/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////                                                                                                                    ////
////-------------------------------------------- HEADER SECTION CSS START ----------------------------------------------////
////                                                                                                                    ////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

:root {
  --primary-blue: #362cc0;
  --accent-red: #df4231;
  --white: #ffffff;
  --ink: #14142b;
  --muted: #6b7280;
  --slate: #475569;
  --surface-tint: #f5f4fc;
  --border-soft: rgba(20, 20, 43, 0.08);
}

body {
  padding-top: 74px;
}

/* ===== HEADER SHELL ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  padding: 12px 0;
}

.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-logo {
  height: 45px;
}

.partner-logo,
.partner-logo-mobile {
  height: 40px;
}

.partner-logo-mobile {
  height: 28px;
  margin-right: 10px;
}

.header-right {
  display: flex;
  align-items: center;
}

.partner-logo {
  display: block;
}

@media (max-width: 991.98px) {
  .partner-logo {
    display: none;
  }
}

@media (min-width: 992px) {
  .header-right {
    display: none;
  }
}

/* Hamburger */
.menu-toggle {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== NAV LIST ===== */
.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  text-decoration: none;
  transition: all .2s ease;
}

.nav-link:hover {
  color: var(--primary-blue);
  background: rgba(54, 44, 192, .08);
}

.nav-link.active,
.mega-trigger.active {
  color: var(--primary-blue) !important;
  background: rgba(54, 44, 192, .1);
  box-shadow: inset 0 0 0 1px rgba(54, 44, 192, .12);
}

.mega-item.active,
.mega-item-link.active,
.mega-subitem.active {
  background: rgba(223, 66, 49, .06);
  box-shadow: inset 3px 0 0 var(--accent-red);
}

.mega-item.has-submenu.active > .mega-item-link,
.mega-item-link.active {
  background: rgba(54, 44, 192, .08);
  box-shadow: inset 3px 0 0 var(--primary-blue);
}

.mega-item.active .mega-title,
.mega-item-link.active .mega-title,
.mega-subitem.active .mega-title,
.mega-subitem.active span {
  color: var(--primary-blue) !important;
  font-weight: 700;
}

.mega-subitem.active i {
  background: var(--primary-blue);
  color: #fff;
}

/* ===== Dropdown caret icon — visibility indicator ===== */
.dropdown-caret {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 6px;
  transition: transform 0.25s ease;
  opacity: 0.65;
}

.mega-trigger[aria-expanded="true"] .dropdown-caret {
  transform: rotate(180deg);
  opacity: 1;
}

@media (max-width: 991.98px) {
  .nav-link.mega-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dropdown-caret {
    width: 14px;
    height: 14px;
  }
}

/* ===== MEGA PANEL — base (hidden by default, JS/CSS decides how it shows) ===== */
.mega-panel {
  display: none;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 20, 43, .14);
  overflow: visible;
}

.mega-inner {
  padding: 28px 32px 20px;
}

.mega-cat-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mega-columns {
  display: flex;
  gap: 32px;
}

.mega-col {
  flex: 1;
  min-width: 0;
}

.mega-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 2px;
  transition: background .2s ease;
}

.mega-item:hover {
  background: var(--surface-tint);
}

.mega-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-red-light {
  background: rgba(223, 66, 49, .1);
  color: var(--accent-red);
}

.bg-purple-light {
  background: rgba(54, 44, 192, .1);
  color: var(--primary-blue);
}

.bg-slate-light {
  background: rgba(71, 85, 105, .1);
  color: var(--slate);
}

.mega-text {
  display: flex;
  flex-direction: column;
}

.mega-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}

.mega-sub {
  font-size: .76rem;
  color: var(--muted);
  margin-top: 2px;
}

.mega-footer {
  background: var(--surface-tint);
  padding: 14px 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
  border-radius: 0 0 18px 18px;
}

.mega-cta {
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-red));
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* =====================================================
   DESKTOP (≥992px) — HOVER controlled, JS click as backup
===================================================== */
@media (min-width: 992px) {
  .nav-wrapper {
    display: block !important;
  }

  .header-right {
    display: none;
  }

  .mega-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 800px;
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  .mega-panel-sm {
    width: 520px;
  }

  /* invisible bridge so mouse doesn't lose hover between link & panel */
  .has-mega::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
  }

  .has-mega:hover .mega-panel,
  .has-mega.open .mega-panel {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* =====================================================
   MOBILE (<992px) — pure click accordion, no positioning tricks
===================================================== */
@media (max-width: 991.98px) {
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  .nav-wrapper {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 40px;
    border-top: 3px solid var(--primary-blue);
  }

  .nav-wrapper.open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 14px;
  }

  .mega-panel {
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    box-shadow: none;
    border-radius: 10px;
    background: var(--surface-tint);
    transition: max-height .3s ease;
  }

  .mega-panel.open {
    display: block;
    max-height: min(70vh, 620px);
    margin: 6px 0 10px;
  }

  .mega-inner {
    padding: 14px 10px;
  }

  .mega-columns {
    flex-direction: column;
    gap: 18px;
  }

  .mega-grid-2 {
    grid-template-columns: 1fr;
  }

  .mega-footer {
    display: none;
  }

  .mega-item {
    padding: 10px 8px;
  }
}

/* ===== ERP SUBMENU (Frappe & ERPNext) ===== */
.mega-item.has-submenu {
  position: relative;
  display: block;
  padding: 0;
  margin-bottom: 2px;
  overflow: visible;
}

.mega-item.has-submenu:hover {
  background: none;
}

@media (min-width: 992px) {
  .mega-item.has-submenu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 18px;
    height: 100%;
  }
}

.mega-item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s ease;
}

.mega-item-link:hover,
.mega-item.has-submenu:hover .mega-item-link,
.mega-item.has-submenu.submenu-open .mega-item-link {
  background: var(--surface-tint);
}

.mega-item-link .mega-text {
  flex: 1;
  min-width: 0;
}

.submenu-caret {
  font-size: .72rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .25s ease, color .2s ease;
}

.mega-item.has-submenu:hover .submenu-caret,
.mega-item.has-submenu.submenu-open .submenu-caret {
  color: var(--primary-blue);
  transform: rotate(180deg);
}

.mega-submenu {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 18px 28px rgba(20, 20, 43, .12);
  padding: 8px;
  z-index: 60;
}

.mega-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.mega-subitem i {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .66rem;
  background: rgba(54, 44, 192, .1);
  color: var(--primary-blue);
  transition: background .2s ease, color .2s ease;
}

.mega-subitem:hover {
  background: var(--surface-tint);
  color: var(--primary-blue);
}

.mega-subitem:hover i {
  background: var(--primary-blue);
  color: #fff;
}

/* ---- DESKTOP: collision-aware submenu positioning ---- */
@media (min-width: 992px) {
  .has-mega {
    position: relative;
    z-index: 30;
  }

  .mega-panel {
    overflow: visible;
  }

  .mega-submenu {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    width: min(260px, 70vw);
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .mega-item.has-submenu:hover .mega-submenu,
  .mega-item.has-submenu.submenu-open .mega-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ---- MOBILE: nested list, always visible ---- */
@media (max-width: 991.98px) {
  .mega-submenu {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-left: 20px;
    padding-left: 14px;
    border-left: 2px solid rgba(54, 44, 192, .14);
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }

  .mega-item-link {
    padding: 10px 8px;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////                                                                                                                    ////
////-------------------------------------------- HEADER SECTION CSS END ------------------------------------------------////
////                                                                                                                    ////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Home Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* ============================================ Hero Section CSS Start ================================================= */

:root {
  --primary-blue: #362cc0;
  --accent-red: #df4231;
  --white: #ffffff;
  --text-dark: #1a1a1a;
  --primary-grad: linear-gradient(135deg,
      var(--primary-blue) 0%,
      var(--accent-red) 100%);
}

.hero-oracle-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./Assets/images/HERO_BG.png") no-repeat center center/cover;
  overflow: hidden;
  padding: 80px 0;
}

/* Subtle Overlay as per your design */
.hero-oracle-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
      rgba(255, 255, 255, 0.9) -70%,
      rgba(255, 255, 255, 0.2) 100%);
  z-index: 1;
}

.custom-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.hero-inner-content {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Main Heading - Restored to #fff */
.site-hero-title,
.hero-title-main,
.hba-hero-title,
.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.site-hero-subtitle,
.hero-subtitle-p,
.hero-subtitle,
.hero-description {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 45px;
  max-width: 750px;
  color: rgba(255, 255, 255, 0.96);
}

/* CTA Button */
.hero-main-cta {
  display: inline-block;
  padding: 20px 45px;
  background: var(--primary-grad);
  color: var(--white);
  text-decoration: none;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(54, 44, 192, 0.3);
}

.hero-main-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(223, 66, 49, 0.4);
}

/* Responsive Trust Bar - All 4 Points included */
.hero-partners-strip {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  max-width: 1000px;
  margin: 70px auto 0 auto;
}

.partner-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1f36;
}

.partner-metric i {
  font-size: 18px;
  color: var(--primary-blue);
}

/* Responsiveness for all devices */
@media (max-width: 991px) {
  .hero-partners-strip {
    gap: 15px;
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .hero-oracle-wrapper {
    min-height: auto;
    padding: 60px 0;
  }

  .hero-title-main {
    font-size: 2.2rem;
  }

  .hero-partners-strip {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .partner-metric {
    width: 100%;
    justify-content: center;
    padding: 5px 0;
  }
}

/* ============================================ Hero Section CSS End ================================================= */

/* ============================================ Service Section CSS Start ============================================ */

:root {
  --primary-red: #df4231;
  --primary-blue: #362cc0;
  --white: #ffffff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
}

/* Global Container Alignment */
.custom-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.os-section {
  padding: 100px 0;
}

/* Header */
.os-header {
  text-align: center;
  margin-bottom: 50px;
}

/* .os-header h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  margin: 0;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
} */

/* ================= SUB-SECTION HEADINGS (H2 - Scaled Down) ================= */
.site-section-title,
.os-header h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px 0;
  line-height: 1.25;
  background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section Subheaders */
.site-section-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  font-weight: 500;
  color: var(--slate);
  margin: 0 auto;
  max-width: 900px;
}

/* Shared CTA text override for dark gradient panels */
.hba-cta-final,
.hba-cta-final-2,
.erp-cta-card {
  --cta-panel-title: #ffffff;
  --cta-panel-copy: rgba(255, 255, 255, 0.9);
}

.hba-cta-final .site-section-title,
.hba-cta-final .hba-cta-heading,
.hba-cta-final-2 .site-section-title,
.hba-cta-final-2 .hba-cta-heading,
.erp-cta-card .erp-cta-body h2 {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--cta-panel-title) !important;
  color: var(--cta-panel-title) !important;
  text-shadow: none !important;
}

.hba-cta-final .hba-cta-subtext,
.hba-cta-final-2 .hba-cta-subtext,
.erp-cta-card .erp-cta-body p {
  color: var(--cta-panel-copy) !important;
  background: none !important;
  -webkit-text-fill-color: var(--cta-panel-copy) !important;
  text-shadow: none !important;
}

/* Services page subheader: consolidated final base rule */
.services-subheader {
  color: #475569;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.7;
  font-weight: 500;
  margin-top: 15px;
  /* max-width: 900px; */
  letter-spacing: 0.5px;
}

/* Anchor Wrapper Rules */
.os-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  height: 100%;
}

.os-card-link.span-2 {
  grid-column: span 2;
}

/* Grid Layout */
.os-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
  padding: 3px;
}

/* Grid Item Base Styles */
.os-grid-item {
  background: white;
  padding: 50px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.4s ease;
  cursor: pointer;
}

/* HOVER: Top Sliding Border Indicator Base */
.os-grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--primary-blue);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

/* Default Element Colors (Odd Cards - Blue Theme) */
.os-icon-wrap {
  font-size: 38px;
  color: var(--primary-blue);
  margin-bottom: 25px;
  transition: transform 0.3s ease;
}

.os-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 8px;
  display: block;
}

.os-grid-item h3 {
  font-size: 1.4rem;
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: 12px;
}

.os-grid-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ========================================================
   CORRECTED ALTERNATE COLORING (Targeting .os-card-link)
   ======================================================== */
.os-card-link:nth-child(even) .os-grid-item::before {
  background: var(--primary-red);
}

.os-card-link:nth-child(even) .os-icon-wrap,
.os-card-link:nth-child(even) .os-tag {
  color: var(--primary-red);
}

/* ========================================================
   HOVER EFFECTS (Triggered when user hovers over link wrapper)
   ======================================================== */
.os-card-link:hover .os-grid-item {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(14, 17, 30, 0.1);
}

.os-card-link:hover .os-grid-item::before {
  transform: scaleX(1);
}

.os-card-link:hover .os-icon-wrap {
  transform: translateY(-3px);
}

/* ===== Full-width feature card (ERP) ===== */
.os-card-link.span-3 {
  grid-column: span 3;
}

.os-grid-item-wide {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon tag"
    "icon title"
    "icon text";
  column-gap: 28px;
  row-gap: 0;
  align-content: center;
  padding: 44px 40px;
}

.os-grid-item-wide .os-tag {
  grid-area: tag;
}

.os-grid-item-wide .os-icon-wrap {
  grid-area: icon;
  align-self: center;
  margin-bottom: 0;
  font-size: 46px;
}

.os-grid-item-wide h3 {
  grid-area: title;
}

.os-grid-item-wide p {
  grid-area: text;
  max-width: 900px;
}

@media (max-width: 1100px) {
  .os-card-link.span-3 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .os-card-link.span-3 {
    grid-column: span 1;
  }

  .os-grid-item-wide {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tag"
      "icon"
      "title"
      "text";
    padding: 40px 25px;
  }

  .os-grid-item-wide .os-icon-wrap {
    font-size: 38px;
    margin-bottom: 25px;
  }
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1100px) {
  .os-main-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .os-card-link.span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .os-section {
    padding: 60px 0;
  }

  .os-main-grid {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .os-grid-item {
    padding: 40px 25px;
  }

  .os-header h2 {
    font-size: 2.2rem;
  }
}

/* ============================================ Service Section CSS End ============================================== */

/* ============================================ Industries Section CSS Start ============================================== */

:root {
  --ind-red: #df4231;
  --ind-blue: #362cc0;
  --ind-bg: #f6f7fb;
  --ind-text: #1e293b;
  --ind-muted: #64748b;
}

/* Container for global alignment */
.custom-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ind-section {
  font-family: "Inter", sans-serif;
  background-color: var(--ind-bg);
  padding: 100px 0;
  color: var(--ind-text);
}

.ind-header {
  text-align: center;
  margin-bottom: 50px;
}

.ind-header h2 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin: 0;
  background: linear-gradient(90deg, var(--ind-blue) 0%, var(--ind-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.ind-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ind-red);
  letter-spacing: 1.5px;
  margin: 15px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.ind-header p {
  color: #475569;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  max-width: 800px;
  margin: 15px auto 0;
  line-height: 1.6;
}

/* Grid Layout */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* Card Styles */
.ind-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ind-card-link:hover,
.ind-card-link:focus-visible {
  text-decoration: none;
}

.ind-card {
  background: #ffffff;
  padding: 45px;
  border-radius: 35px;
  border: 1px solid #edf2f7;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(54, 44, 192, 0.03);
  height: 100%;
}

/* HOVER EFFECT: Scale & Shadow */
.ind-card-link:hover .ind-card,
.ind-card-link:focus-visible .ind-card {
  transform: translateY(-8px);
  border-color: rgba(54, 44, 192, 0.1);
  box-shadow: 0 25px 50px rgba(54, 44, 192, 0.08);
}

/* HOVER EFFECT: Left Animated Border */
.ind-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 0%;
  background: linear-gradient(to bottom, var(--ind-blue), var(--ind-red));
  transition: height 0.4s ease;
}

.ind-card:hover::before {
  height: 100%;
}

/* Icon Box Style */
.ind-icon-box {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  background: #f0f3ff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  font-size: 28px;
  color: var(--ind-blue);
}

.ind-card:nth-child(even) .ind-icon-box {
  color: var(--ind-red);
  background: #fff5f4;
}

/* HOVER: Icon Box Color Change */
.ind-card:hover .ind-icon-box {
  background: var(--ind-blue);
  color: #fff;
}

.ind-card:nth-child(even):hover .ind-icon-box {
  background: var(--ind-red);
  color: #fff;
}

.ind-info {
  display: flex;
  flex-direction: column;
}

.ind-info h3 {
  font-size: 1.5rem;
  margin: 0 0 12px 0;
  color: #111827;
  font-weight: 700;
}

.ind-info p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ind-muted);
  margin: 0;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 992px) {
  .ind-grid {
    grid-template-columns: 1fr;
  }

  .ind-header h2 {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .ind-section {
    padding: 60px 0;
  }

  .ind-card {
    padding: 30px;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .ind-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 25px;
  }

  .ind-header h2 {
    font-size: 2.2rem;
  }

  .ind-info p {
    font-size: 0.9rem;
  }
}

/* ============================================ Industries Section CSS End ============================================== */

/* ============================================ Why Choose Tavish Infotech Section CSS Start ============================================== */

:root {
  --primary-red: #df4231;
  --primary-blue: #362cc0;
  --primary-gradient: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  --text-dark: #1a1a1a;
  --text-gray: #64748b;
}

/* Global Container Alignment */
.custom-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-wrapper {
  padding: 100px 0;
  background-color: #ffffff;
}

/* --- HEADER HIERARCHY --- */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.main-headline {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin: 0;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.sub-headline {
  color: #475569;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  margin-top: 15px;
  letter-spacing: 0.5px;
}

/* Content Layout Grid */
.content-container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.description-content h3 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 25px;
  color: #111;
  line-height: 1.2;
}

.description-content p {
  margin-bottom: 25px;
  color: var(--text-gray);
  font-size: 1.15rem;
  line-height: 1.8;
}

/* Cards Grid Layout */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* Card Styling & Animation */
.card {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

/* Hover Effect: Scale & Shadow Lift */
.card:hover {
  transform: translateY(-10px);
  border-color: rgba(54, 44, 192, 0.2);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.1);
}

/* Icon Styling (Font Awesome Integration) */
.icon-wrapper {
  font-size: 38px;
  color: var(--primary-blue);
  margin-bottom: 25px;
  transition: 0.3s ease;
}

/* .card:nth-child(even) .icon-wrapper {
  color: var(--primary-red);
} */

.card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

.card p {
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 0;
}

/* CTA Button Styling */
.btn-cta {
  display: inline-block;
  padding: 20px 45px;
  margin-top: 15px;
  background: var(--primary-gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-radius: 100px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(223, 66, 49, 0.2);
  font-size: 1.1rem;
  text-align: center;
}

.btn-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(54, 44, 192, 0.3);
}

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablets & Small Laptops */
@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .description-content {
    text-align: center;
  }

  .description-content h3 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  .section-wrapper {
    padding: 60px 0;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 35px 25px;
    text-align: center;
  }

  .icon-wrapper {
    margin-left: auto;
    margin-right: auto;
  }

  .btn-cta {
    width: 100%;
    padding: 18px 30px;
  }
}

/* ============================================ Why Choose Tavish Infotech Section CSS End ============================================== */


/* ============================================ Certifications Section CSS Start ============================================== */

.cert-section {
  padding: 90px 0;
  background: #f8f9fc;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cert-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-blue);
  box-shadow: 0 18px 40px rgba(54, 44, 192, 0.12);
}

.cert-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(54, 44, 192, 0.08);
  color: var(--primary-blue);
  font-size: 1.4rem;
}

.cert-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.cert-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.cert-note {
  text-align: center;
  margin: 30px 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.cs-nda-note {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: #64748b;
  margin: 8px auto 0;
}

@media (max-width: 992px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cert-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .cert-section {
    padding: 60px 0;
  }
}


/* ============================================ Certifications Section CSS End ============================================== */

/* ============================================ Partners with Tavish Infotech Section CSS Start ============================================== */

/* Variables and Base Styles */
:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-dark: #111827;
  --text-gray: #4b5563;
  --primary-gradient: linear-gradient(135deg,
      var(--brand-blue) 0%,
      var(--brand-red) 100%);
}

.section-wrapper-partners {
  background-color: #f8faff;
  padding: 80px 40px;
}

.partners-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.main-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 15px;
  background: linear-gradient(90deg,
      var(--brand-blue) 0%,
      var(--brand-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.sub-headline {
  color: var(--text-gray);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
}

/* Partnership Layout */
.partnership-layout {
  display: flex;
  gap: 50px;
  align-items: stretch;
  margin-bottom: 60px;
}

/* Trust Pillar (Left side) */
.trust-pillar {
  flex: 1;
  background: #f9fafb;
  padding: 40px;
  border-radius: 35px;
  border-left: 8px solid var(--brand-red);
}

.trust-pillar h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--text-dark);
}

.trust-pillar p {
  color: var(--text-gray);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* --- STATS SECTION (Restored Design) --- */
.stat-container-flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-item {
  background: rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-blue);
  display: block;
}

.stat-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
}

/* Feature List (Right side) */
.feature-list {
  flex: 1.4;
  display: flex;
  flex-direction: column;
}

.feature-item {
  display: flex;
  gap: 25px;
  padding: 30px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item:hover {
  background: #fff8f7;
  border-radius: 20px;
}

.icon-circle {
  min-width: 60px;
  height: 60px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gradient-icon {
  font-size: 28px;
  /* background: var(--primary-gradient); */
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
}

.feature-text h4 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.feature-text p {
  color: var(--text-gray);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- GLOBAL STRIP (Responsive & Fixed Alignment) --- */
.global-strip {
  background: var(--primary-gradient);
  border-radius: 25px;
  padding: 40px 50px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.strip-headline {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 800;
  margin-bottom: 10px;
  white-space: nowrap;
}

.strip-subtext {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.btn-white {
  background: #fff;
  color: var(--brand-red);
  padding: 16px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  white-space: nowrap;
  display: inline-block;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 1024px) {
  .partnership-layout {
    flex-direction: column;
  }

  .strip-headline {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .partners-container {
    padding: 40px 20px;
  }

  .global-strip {
    flex-direction: column;
    text-align: center;
    padding: 40px 25px;
  }

  .btn-white {
    width: 100%;
    text-align: center;
  }

  .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================ Partners with Tavish Infotech Section CSS End ============================================== */

/* ============================================ Case Studies Section CSS Start ============================================== */

/* --- CSS START --- */
:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
}

.case-study-section {
  padding: 100px 0;
  background: #ffffff;
}

.case-container-1250 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Heading Style */
.process-header {
  text-align: center;
  margin-bottom: 50px;
}

.process-main-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 15px;
  background: linear-gradient(90deg,
      var(--brand-blue) 0%,
      var(--brand-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.process-subtitle {
  color: #475569;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  margin-top: 15px;
  letter-spacing: 0.5px;
}

/* Main Card Design */
.cs-main-card {
  display: flex;
  min-height: 650px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?q=80&w=1400");
  background-size: cover;
  background-position: center;
  transition: background-image 0.6s ease;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

/* Sidebar Glass Effect */
.cs-sidebar-glass {
  width: 320px;
  background: linear-gradient(180deg,
      rgba(54, 44, 192, 0.92),
      rgba(223, 66, 49, 0.92));
  backdrop-filter: blur(15px);
  z-index: 10;
  padding: 50px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.cs-title-text {
  color: #ffffff;
  padding: 0 35px;
  margin-bottom: 35px;
  font-size: 2.2rem;
  font-weight: 800;
}

.cs-tabs-group {
  display: flex;
  flex-direction: column;
}

.cs-tab-link {
  background: transparent;
  border: none;
  padding: 22px 35px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: 0.3s;
  text-align: left;
}

.cs-tab-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 4px 0 0 #ffffff;
}

/* Content Body & Overlay */
.cs-content-body {
  flex: 1;
  position: relative;
  padding: 60px;
  display: flex;
  align-items: center;
}

.cs-overlay-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(15, 23, 42, 0.95) 15%,
      rgba(15, 23, 42, 0.35) 100%);
  z-index: 1;
}

.cs-inner-wrap {
  position: relative;
  z-index: 5;
  color: #ffffff;
  width: 100%;
}

.cs-sub-loc {
  background: var(--brand-red);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 900;
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
}

.cs-display-heading {
  /* Max size 1.75rem ~ 1.8rem tak set kiya hai jo Section Heading (2.5rem) se balance rahega */
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 16px;
  /* 25px se kam kiya taaki Challenge/Solution block ke paas rahe */
  line-height: 1.25;
  /* Line height 1.1 se thoda badhaya taaki multiline titles readable lage */
  color: #ffffff;
  letter-spacing: -0.01em;
}

.cs-summary p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #f1f5f9;
  font-size: 1.1rem;
}

.cs-summary strong {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--brand-red);
}

/* Stats Grid (Glassmorphism) */
.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin: 40px 0;
}

.stat-item-cs {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.stat-item-cs strong {
  display: block;
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 5px;
}

.stat-item-cs span {
  font-size: 0.85rem;
  color: #cbd5e1;
  font-weight: 500;
}

/* Buttons */
.cs-btn-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-brand-blue {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.btn-brand-outline {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

/* Tabs Visibility Logic */
.cs-panel {
  display: none;
}

.cs-panel.active-panel {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
  .cs-main-card {
    flex-direction: column;
  }

  .cs-sidebar-glass {
    width: 100%;
    padding: 30px 0 0 0;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  }

  .cs-title-text {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
  }

  /* Mobile Side-by-Side Tabs */
  .cs-tabs-group {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 10px;
    scrollbar-width: none;
  }

  .cs-tabs-group::-webkit-scrollbar {
    display: none;
  }

  .cs-tab-link {
    flex: 1;
    min-width: 170px;
    justify-content: center;
    padding: 18px 10px;
    border-bottom: 4px solid transparent;
    white-space: nowrap;
  }

  .cs-tab-link.active {
    box-shadow: none;
    border-bottom: 4px solid #ffffff;
    background: rgba(255, 255, 255, 0.15);
  }

  .cs-content-body {
    padding: 40px 20px;
  }

  .cs-overlay-mask {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(15, 23, 42, 0.8) 100%);
  }

  .cs-btn-row a {
    width: 100%;
    text-align: center;
  }
}

/* ============================================ Case Studies Section CSS End ============================================== */

/* ============================================ Client Testimonials Section CSS Start ============================================== */

:root {
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --primary-grad: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  --navy: #0f172a;
  --slate: #475569;
}

.client-section {
  background-color: #f0f2f5;
  padding: 100px 20px;
}

.testimonial-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-area {
  text-align: center;
  margin-bottom: 50px;
}

.client-heading {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: capitalize;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 10px;
}

.client-subheading {
  color: var(--slate);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  max-width: 700px;
  margin: 0 auto;
}

/* Responsive Grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Premium Card */
.premium-card {
  background: #ffffff;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-height: 480px;
}

.card-bg-decoration {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 8rem;
  font-family: serif;
  color: #f1f5f9;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

.card-main {
  padding: 40px 25px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.img-wrapper {
  position: relative;
  margin-bottom: 25px;
}

.img-wrapper img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: 0 10px 25px rgba(54, 44, 192, 0.15);
}

.profile-group h3 {
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 8px;
  font-weight: 800;
}

.client-loc {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.rating-stars-large {
  display: flex;
  justify-content: center;
  gap: 5px;
  color: #f59e0b;
  font-size: 1.5rem;
}

/* Overlay Styling */
.content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(223, 66, 49, 0.98), rgba(150, 30, 20, 0.98));
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  transform: translateY(30px);
  z-index: 5;
}

.premium-card:hover .content-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.overlay-inner {
  text-align: center;
}

.overlay-quote {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.review-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: white;
  font-style: italic;
  margin-bottom: 20px;
}

.client-name {
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 15px;
}

.premium-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.15);
}

/* --- MEDIA QUERIES (Responsiveness) --- */

/* Tablets: 2 Columns */
@media (max-width: 992px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .client-heading {
    margin-bottom: 5px;
  }
}

/* Mobile Phones: 1 Column */
@media (max-width: 768px) {
  .client-section {
    padding: 60px 15px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
  }

  .premium-card {
    min-height: 420px;
  }

  .content-overlay {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
    background: var(--primary-grad);
    border-radius: 0 0 40px 40px;
    padding: 40px 20px;
  }

  .card-main {
    height: auto;
    padding-bottom: 20px;
  }

  .premium-card:hover {
    transform: none;
  }

  .card-bg-decoration {
    display: none;
  }
}

@media (max-width: 480px) {
  .img-wrapper img {
    width: 110px;
    height: 110px;
  }

  .profile-group h3 {
    font-size: 1.15rem;
  }
}

/* ============================================ Client Testimonials Section CSS End ============================================== */

/* ============================================ Our Proven Process Section CSS Start ============================================== */

:root {
  --process-primary: #362cc0;
  --process-secondary: #df4231;
  --process-gradient: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
}

.tavish-process-section {
  padding: 100px 0;
  background: #f8faff;
  position: relative;
  overflow: hidden;
}

.tavish-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.process-header {
  text-align: center;
  margin-bottom: 80px;
}

.process-main-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 15px;
  background: linear-gradient(90deg,
      var(--brand-blue) 0%,
      var(--brand-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

/* --- DESKTOP VIEW (Starts Left) --- */
.mobile-process-unique-view {
  display: none;
}

.desktop-process-wrapper {
  position: relative;
}

.process-path-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e2e8f0;
  transform: translateX(-50%);
}

.process-step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 80px;
  width: 100%;
  position: relative;
}

.process-step-content {
  width: 44%;
  background: #fff;
  padding: 40px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  z-index: 2;
  transition: 0.4s;
}

.process-step-item:hover .process-step-content {
  transform: translateY(-10px);
  border-color: var(--process-secondary);
}

.process-step-number {
  width: 65px;
  height: 65px;
  background: #fff;
  border: 4px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--process-primary);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.step-header-flex {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.step-icon {
  font-size: 1.8rem;
  color: var(--process-primary);
}

.process-step-content h3 {
  font-size: 1.6rem;
  color: #0f172a;
  margin: 0;
  font-weight: 800;
}

.empty-spacer {
  width: 44%;
}

/* --- MOBILE VIEW (Aapki Favorite Design) --- */
@media (max-width: 991px) {
  .desktop-process-wrapper {
    display: none;
  }

  .mobile-process-unique-view {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    padding-left: 20px;
  }

  .m-timeline-bar {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--process-primary);
    opacity: 0.2;
  }

  .m-step-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--process-primary);
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .m-badge {
    background: var(--process-gradient);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
    text-transform: uppercase;
  }

  .m-icon-box {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--process-primary);
  }

  .m-text-box h3 {
    font-size: 1.25rem;
    color: #0f172a;
    margin-bottom: 8px;
    font-weight: 800;
  }

  .m-text-box p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
  }
}

/* ============================================ Our Proven Process Section CSS End ============================================== */

/* ============================================ CTA Section Section CSS Start ============================================== */

/* --- CTA SECTION STYLES --- */
.tavish-wrapper {
  background: linear-gradient(135deg, #df4231 0%, #362cc0 100%);
  padding: 100px 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.top-heading-area {
  text-align: center;
  margin-bottom: 60px;
}

.cta-main-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #fff !important;
  margin: 0;
}

.main-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}

/* LEFT CONTENT */
.left-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.description-text {
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 600px;
}

/* TRUST POINTS */
.trust-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.trust-feature-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}

.trust-feature-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.icon-box {
  width: 45px;
  height: 45px;
  background: #ffffff;
  color: #df4231;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.2rem;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.trust-feature-item span {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

/* FORM PANEL */
.form-panel {
  background: #ffffff;
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

.form-panel h3 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
}

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

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

input,
select,
textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
  transition: 0.3s;
}

textarea {
  resize: vertical;
  min-height: 90px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #362cc0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(54, 44, 192, 0.1);
}

.submit-btn {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #df4231, #362cc0);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- FLOATING BUTTON --- */
.cta-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 56px;
  width: 56px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(54, 44, 192, 0.12);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(20, 20, 43, 0.18);
  transition: width 0.35s ease, transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 999;
}

.cta-float:hover,
.cta-float:focus-visible {
  width: 210px;
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(20, 20, 43, 0.22);
}

.cta-float .cta-text {
  position: absolute;
  left: 18px;
  color: var(--primary-blue);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cta-float:hover .cta-text,
.cta-float:focus-visible .cta-text {
  opacity: 1;
}

.cta-icon i.fa-solid.fa-phone {
  color: #fff;
}

.cta-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 1024px) {
  .main-grid {
    gap: 40px;
  }

  .tavish-wrapper {
    padding: 80px 0;
  }
}

@media (max-width: 991px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .top-heading-area {
    margin-bottom: 40px;
  }

  .description-text {
    text-align: center;
    margin: 0 auto;
  }

  .trust-feature-list {
    max-width: 700px;
    margin: 20px auto 0;
    width: 100%;
  }

  .form-panel {
    max-width: 600px;
    margin: 40px auto 0;
  }
}

@media (max-width: 600px) {
  .input-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .trust-feature-list {
    grid-template-columns: 1fr;
  }

  .cta-main-title {
    font-size: 1.8rem;
  }

  .form-panel {
    padding: 30px 20px;
  }

  .tavish-wrapper {
    padding: 60px 0;
  }
}

/* ============================================ CTA Section Section CSS End ============================================== */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Home Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      About us Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* --------------------------------------------- Hero Section CSS Strat -------------------------------------------- */

/* --- GLOBAL LAYOUT STANDARD (Sabhi sections ke liye same rahega) --- */
.tavish-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --- ABOUT HERO SECTION --- */
.about-hero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./Assets/images/it-p-bg.png") no-repeat center center/cover;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

/* Blue to Red Gradient Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
      rgba(54, 44, 192, 0.9) 0%,
      rgba(223, 66, 49, 0.8) 100%);
  z-index: 1;
}

/* Typography */
.hero-content {
  width: 100%;
}

.hero-content h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  /* Section Heading se hamesha bada rahega */
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.4rem);
  max-width: 850px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.95;
  color: #fff;
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 1024px) {
  .about-hero {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    height: 320px;
    padding: 40px 0;
  }

  .hero-content h1 {
    margin-bottom: 15px;
  }

  .hero-content p {
    font-size: 1.1rem;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .about-hero {
    height: 300px;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }
}

/* --------------------------------------------- Hero Section CSS End -------------------------------------------- */

/* --------------------------------------------- Company Story Section CSS Start -------------------------------------------- */

:root {
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --text-dark: #1e293b;
  --text-muted: #64748b;
}

/* --- STANDARD LAYOUT --- */
.tavish-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* --- STANDARD HEADER CSS (For All Sections) --- */
.os-header {
  text-align: center;
  margin-bottom: 50px;
}


/* --- JOURNEY SECTION CONTENT --- */
.premium-story-section {
  padding: 100px 0;
  background: #ffffff;
}

.journey-main-card {
  background: #ffffff;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}

.journey-flex-row {
  display: flex;
  flex-wrap: wrap;
}

.journey-col-left {
  width: 42%;
}

.journey-col-right {
  width: 58%;
}

/* Image & Stats */
.journey-image-wrapper {
  position: relative;
  height: 100%;
  min-height: 600px;
}

.journey-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-stats-overlay {
  position: absolute;
  bottom: 30px;
  left: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
}

.stat-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.98);
  padding: 15px 5px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-pill strong {
  display: block;
  font-size: 1.4rem;
  color: var(--primary-red);
}

.stat-pill span {
  font-size: 0.8rem;
  font-weight: 700;
}

/* Right Content */
.journey-content-padding {
  padding: 60px;
}

.journey-lead {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
}

.text-gradient {
  color: var(--primary-blue);
}

.featured-text {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.expertise-box {
  background: #f8fafc;
  padding: 25px;
  border-radius: 20px;
  border-left: 5px solid var(--primary-red);
  margin: 30px 0;
}

/* Industry Grid */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.ind-grid-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.ind-grid-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary-blue);
  box-shadow: 0 10px 20px rgba(54, 44, 192, 0.1);
}

.ind-icon-box {
  width: 45px;
  height: 45px;
  background: rgba(54, 44, 192, 0.05);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-right: 12px;
  font-size: 1.2rem;
}

.ind-grid-item:hover .ind-icon-box {
  background: var(--primary-blue);
  color: #fff;
}

.ind-text {
  font-weight: 700;
  font-size: 1rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {

  .journey-col-left,
  .journey-col-right {
    width: 100%;
  }

  .journey-image-wrapper {
    min-height: 400px;
  }

  .os-header {
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }

  .journey-content-padding {
    padding: 30px 20px;
  }
}

/* --------------------------------------------- Company Story Section CSS End -------------------------------------------- */

/* --------------------------------------------- Our Mission And Vision Section CSS Start -------------------------------------------- */

/* --- SECTION STYLING --- */
.tm-modern-mission-vision {
  background-color: #f6f7fb;
  padding: 100px 0;
}

/* Container Matching Your Layout */
.tavish-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- HEADER STANDARD (Using your provided styles) --- */
.os-header {
  text-align: center;
  margin-bottom: 50px;
}


/* --- MODERN CARD STYLING --- */
.tm-premium-card {
  background: #ffffff;
  border-radius: 35px;
  padding: 50px 40px;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tm-premium-card:hover {
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.08);
  transform: translateY(-10px);
  border-color: var(--primary-blue);
}

/* Card Icon Box */
.tm-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 25px;
  background: rgba(223, 66, 49, 0.1);
  color: var(--primary-red);
  transition: 0.4s;
}

.tm-premium-card:hover .tm-card-icon {
  background: var(--primary-red);
  color: #ffffff;
  transform: rotateY(180deg);
}

/* Typography Inside Card */
.tm-card-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--text-dark);
}

.tm-card-title .red {
  color: var(--primary-red);
}

.tm-card-lead {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
  line-height: 1.4;
}

.tm-card-body p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 25px;
}

/* Pills & Stats (Standardized Red) */
.m-stat,
.l-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--primary-red);
  color: white;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 5px;
  box-shadow: 0 4px 15px rgba(223, 66, 49, 0.2);
}

.tm-mission-stats,
.tm-vision-locations {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
}

/* --- FULL RESPONSIVE FIXES --- */
@media (max-width: 991px) {
  .tm-modern-mission-vision {
    padding: 60px 0;
  }

  .tm-premium-card {
    padding: 35px;
  }

  .tm-card-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .os-header {
    margin-bottom: 35px;
  }

  .tm-card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .tm-premium-card {
    padding: 30px 20px;
    border-radius: 25px;
  }

  .m-stat,
  .l-pill {
    font-size: 0.8rem;
    padding: 8px 12px;
    width: 100%;
  }
}

/* --------------------------------------------- Our Mission And Vision Section CSS End -------------------------------------------- */

/* --------------------------------------------- Core Value Section CSS Start -------------------------------------------- */

.tm-core-values-section {
  --p-blue: #362cc0;
  --p-red: #df4231;
  --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  padding: 100px 0;
}

.tavish-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Header Sync (Matches Mission/Vision) --- */
.os-header {
  text-align: center;
  margin-bottom: 50px;
}

.tm-cv-main-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 900;
  background: linear-gradient(90deg, var(--p-blue) 0%, var(--p-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

/* --- Bento Card Styling --- */
.tm-cv-card {
  background: #ffffff;
  border-radius: 35px;
  padding: 45px;
  height: 100%;
  border: 1px solid #f1f5f9;
  box-shadow: var(--card-shadow);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.tm-cv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.1);
  border-color: var(--p-blue);
}

.tm-cv-card.highlight-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-left: 8px solid var(--p-red);
}

/* --- Icon Design --- */
.tm-cv-icon {
  width: 65px;
  height: 65px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  font-size: 1.8rem;
  transition: 0.4s;
}

.tm-cv-icon.blue {
  background: rgba(54, 44, 192, 0.1);
  color: var(--p-blue);
}

.tm-cv-icon.red {
  background: rgba(223, 66, 49, 0.1);
  color: var(--p-red);
}

.tm-cv-card:hover .tm-cv-icon {
  transform: scale(1.1) rotate(5deg);
}

/* --- Typography --- */
.tm-cv-card h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 15px;
}

.tm-cv-card p {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.6;
}

/* --- Stats for Highlight Card --- */
.tm-cv-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  font-weight: 700;
  color: #475569;
  text-align: center;
  border: 1px solid #f1f5f9;
}

.tm-cv-stats .stat-item span {
  display: block;
  font-size: 2rem;
  color: var(--p-red);
  font-weight: 900;
}

/* --- Full Responsive Fixes --- */
@media (max-width: 991px) {
  .tm-cv-card {
    padding: 35px;
  }

  .tm-cv-card.highlight-card {
    border-left: none;
    border-top: 8px solid var(--p-red);
  }
}

@media (max-width: 768px) {
  .tm-core-values-section {
    padding: 60px 0;
  }

  .stat-item span {
    font-size: 1.6rem;
  }

  .tm-cv-card h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 576px) {
  .tm-cv-card {
    padding: 25px;
    border-radius: 25px;
  }

  .tm-cv-icon {
    width: 55px;
    height: 55px;
    font-size: 1.5rem;
  }
}

/* --------------------------------------------- Core Value Section CSS End -------------------------------------------- */

/* --------------------------------------------- Our Team Section CSS Start -------------------------------------------- */

/* --- OUR TEAM SECTION STYLES --- */
:root {
  --p-blue: #362cc0;
  --p-red: #df4231;
  --text-dark: #0f172a;
  --text-muted: #475569;
  --glass-bg: rgba(255, 255, 255, 0.9);
}

.tm-modern-team-section {
  padding: 100px 0;
  background: #f8faff;
}

.meet-teem-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.tm-team-header.text-center {
  margin: 0 auto 50px auto;
}

/* Header Styling */
.tm-team-header .tm-main-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  background: linear-gradient(90deg, var(--p-blue) 0%, var(--p-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.tm-team-header .tm-main-subtitle {
  color: var(--text-muted);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

/* Team Photo Wrapper */
.team-photo-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 40px;
  overflow: hidden;
  margin-bottom: 50px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
  background-color: #f1f5f9;
}

.full-team-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-photo-wrapper:hover .full-team-img {
  transform: scale(1.05);
}

/* Floating Glass Badges */
.photo-glass-overlay {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 10;
  width: max-content;
}

/* Expertise Grid */
.tm-expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.expertise-cell {
  background: #f8fafc;
  padding: 40px;
  border-radius: 35px;
  border: 1px solid #eef2f6;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.expertise-cell:hover {
  background: #ffffff;
  border-color: var(--p-blue);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.08);
}

.cell-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.cell-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 1.5rem;
  background: white;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* Brand Colors for Icons */
.icon-red i {
  color: var(--p-red);
}

.icon-blue i {
  color: var(--p-blue);
}

.icon-grad {
  background: linear-gradient(135deg, var(--p-blue), var(--p-red));
  color: white;
}

.expertise-cell h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.expertise-cell p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.wide-cell {
  grid-column: span 2;
  background: linear-gradient(to right, #ffffff, #f1f5f9);
  border: 1.5px dashed var(--p-blue);
}

/* --- RESPONSIVE FIXES (PRESERVING DESIGN) --- */
@media (max-width: 991px) {
  .tm-team-header .tm-main-title {
    font-size: 3rem;
  }

  .tm-expertise-grid {
    grid-template-columns: 1fr;
  }

  .wide-cell {
    grid-column: span 1;
  }

  .team-photo-wrapper {
    border-radius: 25px;
    margin-bottom: 30px;
  }

  .photo-glass-overlay {
    flex-direction: column;
    bottom: 20px;
    gap: 8px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .tm-team-header .tm-main-title {
    font-size: 2.2rem;
  }

  .expertise-cell {
    padding: 30px;
  }

  .team-photo-wrapper {
    border-radius: 15px;
  }

  /* Mobile par badges image ke upar jagah gherte hain, isliye unhe hide ya resize karna behtar hai */
  .photo-glass-overlay {
    display: none;
  }
}

/* --------------------------------------------- Our Team Section CSS End -------------------------------------------- */

/* --------------------------------------------- Our Work- Statistics Section CSS Start -------------------------------------------- */

/* --- IMPACT SECTION STYLES (FULL & COMPLETE) --- */
:root {
  --p-blue: #362cc0;
  --p-red: #df4231;
}

section.tm-stats-premium-section {
  background-color: #fff;
  padding: 80px 0;
}

.our-work-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.tm-stats-intro.text-center {
  margin-bottom: 30px;
}

.tm-stats-main-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  background: linear-gradient(90deg, var(--p-blue) 0%, var(--p-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.tm-stats-main-subtitle {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

/* Wrapper Logic for Equal Height */
.impact-hybrid-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* Left Panel */
.impact-hero-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.impact-hero-panel>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 40px;
  border-radius: 30px;
  border: 1px solid #e2e8f0;
}

.hero-stat-box {
  background: #f8fafc;
}

.hero-number {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: #000;
}

.hero-number small {
  font-size: 1.5rem;
}

.hero-label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 5px;
  color: #000;
}

.country-pills {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.country-pills span {
  background: white;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid #e2e8f0;
}

/* Retention Card */
.retention-card {
  background: #f8fafc;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center;
}

.r-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--p-red);
}

.r-label {
  font-size: 1rem;
  font-weight: 800;
  color: #000;
  display: block;
}

.mini-chart-dots {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.mini-chart-dots span {
  width: 6px;
  height: 15px;
  background: var(--p-red);
  border-radius: 10px;
  opacity: 0.3;
}

.mini-chart-dots span:last-child {
  height: 30px;
  opacity: 1;
}

/* Right Panel */
.impact-details-panel {
  flex: 1.6;
  background: white;
  border-radius: 35px;
  border: 1px solid #e2e8f0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}

.metric-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.metric-head i {
  font-size: 1.5rem;
  color: var(--p-blue);
}

.metric-head h4 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

.metric-grid-custom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.m-item {
  background: #f8fafc;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid #f1f5f9;
}

.m-item strong {
  font-size: 2rem;
  color: var(--p-blue);
  display: block;
}

.m-item span {
  font-size: 0.9rem;
  color: #475569;
}

.excellence-flex {
  display: flex;
  justify-content: space-between;
  background: #fff5f4;
  padding: 20px;
  border-radius: 20px;
  border: 1px dashed var(--p-red);
}

.ex-point strong {
  display: block;
  font-size: 1.2rem;
  color: var(--p-red);
}

.transactions-strip-gradient {
  background: linear-gradient(90deg, var(--p-blue), var(--p-red));
  color: white;
  padding: 20px 30px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.support-badge-new {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.8rem;
}

/* Trust Center */
.tm-trust-center {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.trust-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.trust-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.oracle-badge .trust-icon {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}

.blue-badge .trust-icon {
  background: linear-gradient(135deg, #4834d4, #341f97);
}

.red-badge .trust-icon {
  background: linear-gradient(135deg, #eb3b5a, #c0392b);
}

.trust-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-tag {
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

.trust-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.3;
}

/* Tablet: 2 per row */
@media (max-width: 900px) {
  .tm-trust-center {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 per row */
@media (max-width: 560px) {
  .tm-trust-center {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .metric-grid-custom {
    grid-template-columns: 1fr;
  }

  .excellence-flex {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .transactions-strip-gradient {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

/* --------------------------------------------- Our Work- Statistics Section CSS End -------------------------------------------- */

/* --------------------------------------------- Client Testimonials Section CSS Start -------------------------------------------- */

/* --- SUCCESS STORIES SECTION --- */
:root {
  --p-blue: #362cc0;
  --p-red: #df4231;
}

section.tm-success-stories {
  background-color: #f0f2f5;
  padding: 80px 0;
}

.our-work-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.os-header.text-center {
  text-align: center;
  margin-bottom: 50px;
}

.tm-stats-main-title {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(90deg, var(--p-blue) 0%, var(--p-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 15px;
}

.tm-stats-main-subtitle {
  color: #475569;
  font-size: 1.2rem;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
}

.success-flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

.story-panel {
  flex: 1;
  min-width: 320px;
  max-width: 380px;
  background: #ffffff;
  border-radius: 30px;
  padding: 35px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.user-pfp {
  width: 65px;
  height: 65px;
  border-radius: 18px;
  object-fit: cover;
  background: #f8fafc;
}

/* Location Box with Flag */
.user-meta h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.location-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.mini-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.location-box span {
  font-size: 0.85rem;
  color: var(--p-blue);
  font-weight: 700;
}

.panel-body {
  flex-grow: 1;
}

.rating {
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #ffd700;
}

.main-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  font-weight: 500;
}

.panel-footer-decoration {
  height: 4px;
  width: 40px;
  background: #e2e8f0;
  margin-top: 20px;
  border-radius: 10px;
  transition: all 0.4s ease;
}

/* HOVER EFFECTS */
.story-panel:hover {
  transform: translateY(-8px);
  border-color: var(--p-blue);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.1);
}

.story-panel:hover .panel-footer-decoration {
  width: 100%;
  background: linear-gradient(90deg, var(--p-blue), var(--p-red));
}

/* RESPONSIVENESS */
@media (max-width: 1024px) {
  .tm-stats-main-title {
    font-size: 2.5rem;
  }

  .story-panel {
    min-width: 45%;
  }
}

@media (max-width: 768px) {
  .tm-stats-main-title {
    font-size: 2rem;
  }

  .story-panel {
    min-width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .panel-header {
    flex-direction: row;
    text-align: left;
  }

  .user-pfp {
    width: 55px;
    height: 55px;
  }

  .tm-stats-main-title {
    font-size: 1.8rem;
  }
}

/* --------------------------------------------- Client Testimonials Section CSS End -------------------------------------------- */

/* --------------------------------------------- Ready to Transform Your Customer Experience? Section CSS Start -------------------------------------------- */

/* --- FINAL CTA SECTION (COMPLETE) --- */
:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-white: #ffffff;
}

.hba-cta-final {
  padding: 100px 0;
  /* background-color: #fff; */
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
}

/* .hba-main-cta-card {
    position: relative;
    padding: 60px;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hba-indigo) 0%, var(--hba-orange) 100%);
    box-shadow: 0 30px 60px rgba(54, 44, 192, 0.25);
} */

.hba-cta-content-inner {
  position: relative;
  z-index: 2;
}

/* .hba-overlay-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
    z-index: 1;
} */

/* .hba-cta-heading {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--hba-white);
  line-height: 1.2;
  margin-bottom: 15px;
  text-align: left;
} */

.hba-cta-subtext {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 750px;
  line-height: 1.6;
  margin-bottom: 0;
}

.hba-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--hba-white);
  color: var(--hba-indigo);
  padding: 18px 40px;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none !important;
  transition: all 0.4s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}

.hba-btn-glass:hover {
  background: transparent;
  color: var(--hba-white);
  border-color: var(--hba-white);
  transform: translateY(-5px);
}

/* --- FULLY RESPONSIVE BREAKPOINTS --- */

@media (max-width: 991px) {
  .hba-cta-final {
    padding: 60px 0;
  }

  .hba-main-cta-card {
    padding: 50px 40px;
    text-align: center;
  }

  .hba-cta-heading {
    font-size: 2rem;
    text-align: center;
  }

  .hba-cta-subtext {
    text-align: center;
    margin: 0 auto;
    font-size: 1.1rem;
  }

  .hba-btn-glass {
    padding: 15px 30px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .hba-main-cta-card {
    padding: 40px 25px;
    border-radius: 30px;
  }

  .hba-cta-heading {
    font-size: 1.8rem;
  }

  .hba-btn-glass {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------- Ready to Transform Your Customer Experience? Section CSS End -------------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      About us Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Case Studies-1 Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* --------------------------------------------- Hero section CSS Start ---------------------------------------- */

:root {
  --indigo: #362cc0;
  --orange: #df4231;
  --dark: #1e293b;
  --white: #ffffff;
  --muted: #64748b;
}

.hba-hero-section {
  position: relative;
  padding: 100px 0 160px;
  background: var(--white);
  overflow: visible;
  background: url(./Assets/images/it-p-bg.png) no-repeat center center / cover;
}

/* Badge & Typography */
.hba-sol-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(54, 44, 192, 0.08);
  color: var(--indigo);
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 25px;
}



.hero-main-img {
  width: 100%;
  border-radius: 35px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* Stats Bridge Desktop */
.hba-stats-bridge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(50%);
  z-index: 20;
}

.stats-grid-wrapper {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 20px;
  border-radius: 40px;
  box-shadow: 0 20px 60px rgba(54, 44, 192, 0.15);
  border: 1px solid rgba(54, 44, 192, 0.05);
}

.stat-icon-top {
  font-size: 1.4rem;
  color: var(--orange);
  margin-bottom: 12px;
  display: block;
}

.hero-stat-card h3 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--indigo);
  margin: 0;
}

.hero-stat-card p {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 65px;
  background: #e2e8f0;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 991px) {
  .hba-hero-section {
    padding: 10px 0 60px;
    text-align: center;
  }

  .hba-hero-visual {
    margin-bottom: 40px;
    margin-top: 50px;
  }

  .hba-hero-content {
    margin-bottom: 50px;
  }



  .hba-hero-desc {
    font-size: 1.1rem;
    margin: 0 auto;
  }

  /* Moving bridge to normal flow for mobile so it doesn't overlap text */
  .hba-stats-bridge {
    position: relative;
    transform: translateY(0);
    margin-top: 30px;
  }

  .stats-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 35px 20px;
    border-radius: 30px;
  }

  .stat-divider {
    display: none;
  }
}

@media (max-width: 576px) {


  .stats-grid-wrapper {
    grid-template-columns: 1fr;
  }

  /* List on small mobile */
  .hero-stat-card:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
  }
}

/* --------------------------------------------- Hero section CSS End ---------------------------------------- */

/* --------------------------------------------- Project Overview Section CSS Start ---------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
}

.hba-ov-refined {
  /* Padding increased to handle floating stats bridge above it */
  padding: 160px 0 100px 0;
  background-color: #f8fafc;
  position: relative;
}

/* Heading Gradient Style */
.hba-ov-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 25px;
  background: linear-gradient(90deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hba-ov-description {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--hba-muted);
}

.hba-ov-description strong {
  color: var(--hba-dark);
  font-weight: 700;
}

/* Right Side Gradient Card */
.hba-ov-highlights-card-gradient {
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      #6343c9 50%,
      var(--hba-orange) 100%);
  padding: 45px 40px;
  border-radius: 24px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.25);
  transition: transform 0.3s ease;
}

.hba-ov-highlights-card-gradient:hover {
  transform: translateY(-5px);
}

.hba-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hba-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hba-item:first-child {
  padding-top: 0;
}

.hba-icon {
  font-size: 24px;
  width: 35px;
  text-align: center;
  color: #ffffff;
}

.hba-details {
  display: flex;
  flex-direction: column;
}

.hba-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.hba-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 991px) {
  .hba-ov-refined {
    padding: 280px 0 80px 0;
  }

  .hba-ov-title {
    font-size: 2.8rem;
    text-align: center;
  }

  .hba-ov-description {
    text-align: center;
    margin-bottom: 40px;
  }

  .hba-ov-highlights-card-gradient {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .hba-ov-refined {
    padding-top: 320px;
  }

  .hba-ov-title {
    font-size: 2.2rem;
  }

  .hba-ov-highlights-card-gradient {
    padding: 30px 25px;
    border-radius: 20px;
  }

  .hba-value {
    font-size: 1rem;
  }
}

/* --------------------------------------------- Project Overview Section CSS End ---------------------------------------- */

/* --------------------------------------------- Business Problem  Section CSS Start ---------------------------------------- */

:root {
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --dark-text: #1e293b;
  --muted-text: #64748b;
}

.hba-problem-section {
  padding: 100px 0;
  background-color: #f0f0f0;
}

.business-header {
  margin-bottom: 50px;
}

.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hba-prob-lead {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 20px 0 0 0;
  line-height: 1.5;
  max-width: 850px;
}

/* Vertical Card Design */
.hba-vertical-card {
  background: #ffffff;
  padding: 45px 30px;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  text-align: center;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.hba-vertical-card:hover {
  transform: translateY(-12px);
  border-color: var(--primary-red);
  box-shadow: 0 20px 40px rgba(223, 66, 49, 0.1);
}

.v-card-icon {
  width: 65px;
  height: 65px;
  background: rgba(223, 66, 49, 0.08);
  color: var(--primary-red);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 1.6rem;
  margin: 0 auto 25px;
  transition: 0.3s;
}

.hba-vertical-card:hover .v-card-icon {
  background: var(--primary-red);
  color: #ffffff;
}

.hba-vertical-card h5 {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--dark-text);
  margin-bottom: 15px;
  line-height: 1.4;
}

.hba-vertical-card p {
  color: var(--muted-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
  text-align: start;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 1199px) {
  .hba-prob-title {
    font-size: 3rem;
  }

  .hba-prob-lead {
    font-size: 1.2rem;
  }
}

@media (max-width: 991px) {
  .hba-problem-section {
    padding: 60px 0;
  }

  .business-header {
    text-align: center;
    margin-bottom: 40px;
  }

  .hba-prob-title {
    font-size: 2.8rem;
  }

  .hba-prob-lead {
    margin: 20px auto 0;
  }
}

@media (max-width: 767px) {
  .hba-prob-title {
    font-size: 2.4rem;
  }

  .hba-vertical-card {
    padding: 35px 25px;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2rem;
  }

  .hba-prob-lead {
    font-size: 1.1rem;
  }

  .v-card-icon {
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
    margin-bottom: 20px;
  }
}

/* --------------------------------------------- Business Problem  Section CSS End ---------------------------------------- */

/* --------------------------------------------- Our Solution: High Bill Analyzer  Section CSS Start ---------------------------------------- */

:root {
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --dark-slate: #1e293b;
  --slate-muted: #64748b;
}

.hba-solution-section {
  padding: 100px 0;
  background-color: #f8fafc;
}

.hba-sol-badge {
  background: rgba(54, 44, 192, 0.1);
  color: var(--primary-blue);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

/* Reusing Title Style from Business Problem for Consistency */
.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hba-sol-lead {
  color: #475569;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 800px;
}

/* Horizontal Card Design */
.hba-horizontal-card {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 35px;
  background: #ffffff;
  border-radius: 25px;
  border: 1px solid #e2e8f0;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hba-horizontal-card:hover {
  border-color: var(--primary-blue);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(54, 44, 192, 0.08);
}

.h-card-icon {
  width: 60px;
  height: 60px;
  background: rgba(54, 44, 192, 0.08);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: 0.3s ease;
}

.hba-horizontal-card:hover .h-card-icon {
  background: var(--primary-blue);
  color: #ffffff;
}

.h-card-text h4 {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--dark-slate);
  margin-bottom: 12px;
}

.h-card-text p {
  color: var(--slate-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 1199px) {
  .hba-prob-title {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .hba-solution-section {
    padding: 80px 0;
  }

  .business-header {
    text-align: center;
  }

  .hba-sol-lead {
    margin: 15px auto 0;
  }
}

@media (max-width: 767px) {
  .hba-horizontal-card {
    padding: 25px;
    gap: 15px;
  }

  .hba-prob-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.1rem;
  }

  .hba-sol-lead {
    font-size: 1.1rem;
  }

  .hba-horizontal-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .h-card-icon {
    margin-bottom: 5px;
  }

  .hba-sol-badge {
    font-size: 0.7rem;
  }
}

/* --------------------------------------------- Our Solution: High Bill Analyzer  Section CSS End ---------------------------------------- */

/* --------------------------------------------- Implementation Strategy Section CSS Start ---------------------------------------- */

/* Variables for Consistency */
:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --primary-blue: #362cc0;
  --primary-red: #df4231;
}

/* Section Main Container */
.hba-strategy-section {
  padding: 100px 0;
  background-color: #ffffff;
}

/* Header Consistency - Matching your Business Problem Section */
.business-header {
  margin-bottom: 30px;
}

.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hba-prob-lead {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Strategy Card - Base Design */
.hba-strat-card {
  background: #f8fafc;
  padding: 50px 35px;
  border-radius: 40px;
  height: 100%;
  position: relative;
  border: 1px solid #edf2f7;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hover State */
.hba-strat-card:hover {
  background: #ffffff;
  border-color: var(--hba-indigo);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.08);
  transform: translateY(-10px);
}

/* Ghost Numbering (01, 02, 03) */
.strat-number {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(54, 44, 192, 0.05);
  line-height: 1;
  transition: 0.3s ease;
  user-select: none;
}

.hba-strat-card:hover .strat-number {
  color: rgba(54, 44, 192, 0.1);
}

/* Icon Design */
.strat-icon {
  width: 65px;
  height: 65px;
  background: rgba(54, 44, 192, 0.08);
  color: var(--hba-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 1.6rem;
  margin-bottom: 30px;
  transition: 0.3s ease;
}

.hba-strat-card:hover .strat-icon {
  background: var(--hba-indigo);
  color: #ffffff;
}

/* Card Content Design */
.hba-strat-card h4 {
  font-size: 1.4rem;
  font-weight: 850;
  color: var(--hba-dark);
  margin-bottom: 18px;
  line-height: 1.3;
}

.hba-strat-card p {
  color: var(--hba-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* --- FULLY RESPONSIVE BREAKPOINTS --- */

@media (max-width: 1199px) {
  .hba-prob-title {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .hba-strategy-section {
    padding: 60px 0;
  }

  .business-header {
    text-align: center;
    margin-bottom: 40px;
  }

  .hba-prob-lead {
    margin: 15px auto 0;
    font-size: 1.25rem;
  }

  .hba-strat-card {
    text-align: center;
    padding: 40px 25px;
    border-radius: 30px;
  }

  .strat-icon {
    margin: 0 auto 25px;
  }

  .strat-number {
    font-size: 3.5rem;
    top: 15px;
    right: 25px;
  }
}

@media (max-width: 767px) {
  .hba-prob-title {
    font-size: 2.5rem;
  }

  .hba-strat-card {
    padding: 35px 20px;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.1rem;
  }

  .hba-prob-lead {
    font-size: 1.1rem;
  }

  .strat-number {
    font-size: 3rem;
    top: 10px;
    right: 15px;
  }

  .hba-strat-card h4 {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------- Implementation Strategy Section CSS End ---------------------------------------- */

/* --------------------------------------------- Measurable Results Section CSS Strat ---------------------------------------- */

:root {
  --indigo: #362cc0;
  --orange: #df4231;
  --dark-bg: #0f172a;
  --primary-blue: #362cc0;
  --primary-red: #df4231;
}

.final-bento-section {
  padding: 100px 0;
  background: #f1f5f9;
}

/* Header Consistency - Matching all sections */
.business-header {
  margin-bottom: 30px;
}

.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin: 0;
}

.hba-prob-lead {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  line-height: 1.5;
}

/* Bento Grid - Removed Top Margin to match Strategy section */
.bento-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 20px;
}

.bento-item {
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bento-dark {
  background: var(--dark-bg);
}

.bento-main-grad {
  background: linear-gradient(135deg, var(--indigo), var(--orange));
}

.bento-inner {
  padding: 40px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Big Numbers and Headings */
.text-indigo {
  color: #818cf8;
}

.text-orange {
  color: #fb923c;
}

.bento-big-num {
  font-size: 3.2rem;
  font-weight: 950;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}

.bento-head-white {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 15px;
}

.bento-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.bento-text-side p {
  color: #fff;
}

/* Watermark Icons */
.bento-watermark {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-size: 7rem;
  color: #ffffff;
  opacity: 0.04;
  transform: rotate(-15deg);
  z-index: 1;
}

/* Grid Spans */
.item-2x1 {
  grid-column: span 2;
}

.item-1x1 {
  grid-column: span 1;
}

.bento-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bento-side-icon {
  font-size: 4.5rem;
  opacity: 0.2;
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 1199px) {
  .bento-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .item-2x1,
  .item-1x1 {
    grid-column: span 1;
  }

  .bento-main-grad {
    grid-column: span 2;
  }
}

@media (max-width: 991px) {
  .hba-prob-title {
    font-size: 2.8rem;
  }

  .business-header {
    text-align: center;
  }

  .hba-prob-lead {
    margin: 15px auto 0;
  }
}

@media (max-width: 767px) {
  .bento-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .item-2x1,
  .item-1x1,
  .bento-main-grad {
    grid-column: span 1;
  }

  .bento-inner {
    padding: 30px;
  }

  .bento-big-num {
    font-size: 2.8rem;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.1rem;
  }

  .bento-big-num {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------- Measurable Results Section CSS End ---------------------------------------- */

/* --------------------------------------------- Case Example: Complex Bill Analysis Section CSS Start ---------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --white: #ffffff;
  --primary-blue: #362cc0;
  --primary-red: #df4231;
}

.hba-case-section {
  padding: 100px 0;
  background-color: #f0f0f0;
}

/* --- HEADER CONSISTENCY --- */
.business-header {
  margin-bottom: 30px;
}

.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hba-prob-lead {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  line-height: 1.5;
}

/* --- CASE CARD WRAPPER --- */
.hba-case-card-wrapper {
  background: var(--white);
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* Sidebar Styles */
.hba-case-blue-sidebar {
  background: var(--hba-indigo);
  color: var(--white);
}

.sidebar-inner-padding {
  padding: 50px 45px;
}

.sidebar-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  opacity: 0.8;
}

.location-text {
  font-weight: 900;
  font-size: 1.8rem;
  margin-top: 10px;
  color: #fff;
}

.location-text i {
  font-size: 1.4rem;
  margin-right: 8px;
}

.specs-list {
  margin: 35px 0;
}

.spec-item {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 10px;
}

.spec-item span {
  font-size: 0.85rem;
  opacity: 0.75;
  display: block;
  margin-bottom: 4px;
}

.savings-highlight-card {
  background: rgba(255, 255, 255, 0.15);
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.savings-val {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
}

.savings-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Main Content Styles */
.main-inner-padding {
  padding: 50px 45px;
}

.analysis-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  color: var(--hba-indigo);
}

.analysis-header h4 {
  font-weight: 850;
  margin: 0;
}

.analysis-para {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--hba-muted);
  margin-bottom: 30px;
}

/* Redesigned Sub-Cards */
.redesigned-sub-card {
  background: #f8fafc;
  padding: 25px;
  border-radius: 22px;
  height: 100%;
  border-left: 5px solid var(--hba-orange);
  transition: 0.3s;
}

.redesigned-sub-card:hover {
  background: #f1f5f9;
}

.redesigned-sub-card h5 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--hba-dark);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.redesigned-sub-card h5 i {
  color: var(--hba-orange);
}

.redesigned-sub-card ul {
  padding-left: 15px;
  margin: 0;
  list-style: none;
}

.redesigned-sub-card li {
  font-size: 0.95rem;
  color: var(--hba-muted);
  margin-bottom: 10px;
  position: relative;
}

.redesigned-sub-card li::before {
  content: "•";
  color: var(--hba-orange);
  position: absolute;
  left: -15px;
  font-weight: bold;
}

.outcome-text {
  font-size: 1rem;
  color: var(--hba-muted);
  line-height: 1.6;
  margin: 0;
}

.outcome-text strong {
  color: var(--hba-indigo);
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 1199px) {
  .hba-prob-title {
    font-size: 3rem;
  }

  .sidebar-inner-padding,
  .main-inner-padding {
    padding: 35px;
  }
}

@media (max-width: 991px) {
  .business-header {
    text-align: center;
  }

  .hba-prob-lead {
    margin: 15px auto 0;
  }

  .hba-case-card-wrapper {
    border-radius: 25px;
  }

  /* Sidebar goes on top on mobile */
  .hba-case-blue-sidebar {
    text-align: center;
  }

  .spec-item {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
  }
}

@media (max-width: 767px) {
  .hba-prob-title {
    font-size: 2.5rem;
  }

  .location-text {
    font-size: 1.5rem;
  }

  .sidebar-inner-padding,
  .main-inner-padding {
    padding: 30px 20px;
  }

  .analysis-para {
    font-size: 1.05rem;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.1rem;
  }

  .savings-val {
    font-size: 2rem;
  }
}

/* --------------------------------------------- Case Example: Complex Bill Analysis Section CSS End ---------------------------------------- */

/* --------------------------------------------- Key Success Factors Section CSS Start ---------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --primary-blue: #362cc0;
  --primary-red: #df4231;
}

.hba-ksf-section {
  padding: 100px 0;
  background-color: #f4f6fb;
}

/* --- HEADER CONSISTENCY --- */
.business-header {
  margin-bottom: 30px;
}

.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin: 0;
}

.hba-prob-lead {
  color: #475569;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 15px 0 0 0;
  line-height: 1.5;
}

/* --- KSF CARDS --- */
.hba-ksf-card {
  padding: 40px;
  background: #fff;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.hba-ksf-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.08);
  border-color: var(--hba-indigo);
}

.ksf-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 1.5rem;
  margin-bottom: 25px;
  transition: 0.3s ease;
}

/* Icon Colors */
.ksf-icon.indigo {
  background: rgba(54, 44, 192, 0.08);
  color: var(--hba-indigo);
}

.ksf-icon.orange {
  background: rgba(223, 66, 49, 0.08);
  color: var(--hba-orange);
}

.hba-ksf-card:hover .ksf-icon.indigo {
  background: var(--hba-indigo);
  color: #fff;
}

.hba-ksf-card:hover .ksf-icon.orange {
  background: var(--hba-orange);
  color: #fff;
}

.hba-ksf-card h4 {
  font-size: 1.3rem;
  font-weight: 850;
  color: var(--hba-dark);
  margin-bottom: 15px;
  line-height: 1.3;
}

.hba-ksf-card p {
  font-size: 1rem;
  color: var(--hba-muted);
  line-height: 1.6;
  margin: 0;
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 1199px) {
  .hba-prob-title {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .hba-ksf-section {
    padding: 60px 0;
  }

  .business-header {
    text-align: center;
  }

  .hba-prob-lead {
    margin: 15px auto 0;
  }

  .hba-ksf-card {
    text-align: center;
    padding: 35px 25px;
  }

  .ksf-icon {
    margin: 0 auto 20px auto !important;
  }
}

@media (max-width: 767px) {
  .hba-prob-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.1rem;
  }

  .hba-prob-lead {
    font-size: 1.1rem;
  }

  .hba-ksf-card {
    border-radius: 25px;
  }
}

/* --------------------------------------------- Key Success Factors Section CSS End ---------------------------------------- */

/* --------------------------------------------- Conclusion Section CSS Start ---------------------------------------- */

/* --- PURE CONCLUSION SECTION ONLY --- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --white: #ffffff;
  --light-bg: #f8fafc;
}

.hba-conclusion-section {
  padding: 100px 0;
  background-color: #ffffff;
}

/* Header */
.hba-prob-title {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 40px;
}

/* Main Conclusion Box */
.hba-conclusion-box {
  background: #ebeff3;
  border-radius: 40px;
  padding: 60px;
  border-left: 10px solid var(--hba-indigo);
  margin-bottom: 40px;
  position: relative;
}

.hba-conclusion-box .conclusion-lead {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hba-dark);
  line-height: 1.5;
  margin-bottom: 25px;
}

.conclusion-lead strong {
  color: var(--hba-indigo);
}

.conclusion-para {
  font-size: 1.1rem;
  color: var(--hba-muted);
  line-height: 1.8;
}

/* Scalable Card (Right side in Desktop) */
.scalability-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.card-icon-top {
  font-size: 1.8rem;
  color: var(--hba-indigo);
  margin-bottom: 15px;
  display: block;
}

.scalability-card h5 {
  font-size: 1rem;
  font-weight: 900;
  color: var(--hba-dark);
  letter-spacing: 1.2px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.scalability-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
}

.scalability-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--hba-muted);
  margin-bottom: 15px;
}

.scalability-list li i {
  color: var(--hba-orange);
  font-size: 1.1rem;
}

/* Closing Tagline */
.closing-tagline {
  font-size: 1.4rem;
  color: var(--hba-muted);
}

/* --- RESPONSIVE SETTINGS --- */

@media (max-width: 991px) {
  .hba-prob-title {
    font-size: 2.8rem;
    text-align: center;
  }

  .hba-conclusion-box {
    padding: 40px 25px;
    border-left: none;
    border-top: 10px solid var(--hba-indigo);
    text-align: center;
  }

  .scalability-card {
    margin-top: 30px;
  }

  .closing-tagline {
    text-align: center;
    font-size: 1.2rem;
  }
}

@media (max-width: 576px) {
  .hba-prob-title {
    font-size: 2.2rem;
  }

  .hba-conclusion-box {
    border-radius: 30px;
  }

  .conclusion-lead {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------- Conclusion Section CSS End ---------------------------------------- */

/* --------------------------------------------- Ready to Transform Your Customer Experience? Section CSS Start ---------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-white: #ffffff;
}

.hba-cta-final {
  padding: 100px 0;
  /* background-color: #fff; */
}

/* Main CTA Card */
/* .hba-main-cta-card {
    position: relative;
    padding: 70px 60px;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hba-indigo) 0%, var(--hba-orange) 100%);
    box-shadow: 0 30px 60px rgba(54, 44, 192, 0.25);
} */

/* Texture Overlay - No SVG, uses CSS patterns */
/* .hba-overlay-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 32px 32px;
    z-index: 1;
    pointer-events: none;
} */

.hba-cta-heading {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--hba-white);
  line-height: 1.1;
  margin-bottom: 15px;
}

.hba-cta-subtext {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 750px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Glass Button Style */
.hba-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--hba-white);
  color: var(--hba-indigo);
  padding: 18px 45px;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 850;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 2px solid var(--hba-white);
  white-space: nowrap;
}

.hba-btn-glass i {
  transition: transform 0.3s ease;
}

.hba-btn-glass:hover {
  background: transparent;
  color: var(--hba-white);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hba-btn-glass:hover i {
  transform: translateX(5px);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1199px) {
  .hba-cta-heading {
    font-size: 2.3rem;
  }
}

@media (max-width: 991px) {
  .hba-cta-final {
    padding: 60px 0;
  }

  .hba-main-cta-card {
    padding: 50px 30px;
    text-align: center;
  }

  .hba-cta-heading {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .hba-cta-subtext {
    font-size: 1.1rem;
    margin: 0 auto 30px;
  }

  .hba-btn-glass {
    width: 100%;
    max-width: 350px;
    padding: 16px 30px;
  }
}

@media (max-width: 576px) {
  .hba-cta-heading {
    font-size: 1.7rem;
  }

  .hba-main-cta-card {
    padding: 40px 20px;
    border-radius: 30px;
  }

  .hba-btn-glass {
    font-size: 1rem;
  }
}

/* --------------------------------------------- Ready to Transform Your Customer Experience? Section CSS End ---------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Case Studies-1 Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Case Studies-2 Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* ------------------------------------------ Hero Section CSS Start ---------------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --hba-white: #ffffff;
}

.hba-hero-section {
  padding: 100px 0 120px 0;
  background-color: #ffffff;
  position: relative;
  overflow: visible;
}

/* Badge Styling */
.hba-sol-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #eef0ff;
  color: var(--hba-indigo);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}


/* Image Styling */
.hero-main-img {
  width: 100%;
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Floating Stats Bridge (Floating between Hero and Next Section) */
.hba-stats-bridge-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(50%);
  z-index: 100;
}

.stats-card-wrapper {
  background: var(--hba-white);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 20px;
  border-radius: 45px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
}

.hero-stat-card {
  flex: 1;
  text-align: center;
}

.stat-icon {
  font-size: 1.5rem;
  color: var(--hba-orange);
  margin-bottom: 15px;
  display: block;
}

.hero-stat-card h3 {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--hba-indigo);
  margin: 0;
}

.hero-stat-card p {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hba-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* Vertical Divider (Desktop) */
.stat-v-divider {
  width: 1px;
  height: 70px;
  background: #eef2f6;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 991px) {
  .hba-hero-section {
    padding: 10px 0 100px 0;
    text-align: center;
  }


  .hba-hero-desc {
    margin: 0 auto;
  }

  .hba-sol-badge {
    margin: 0 auto 25px;
  }

  /* Stats Bridge Adjustment for Tablet */
  .hba-stats-bridge-overlay {
    position: relative;
    transform: translateY(0);
    margin-top: 50px;
  }

  .stats-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 40px 20px;
  }

  .stat-v-divider {
    display: none;
  }
}

@media (max-width: 576px) {

  .stats-card-wrapper {
    grid-template-columns: 1fr;
    border-radius: 30px;
  }

  .hero-stat-card:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 25px;
  }
}

/* ------------------------------------------ Hero Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Project Overview Section CSS Start ---------------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-dark: #1e293b;
  --hba-muted: #64748b;
  --hba-white: #ffffff;
}

.hba-ov-refined {
  padding: 150px 0 100px 0;
  background-color: #f8fafc;
  position: relative;
}

/* Heading Gradient Style */
.hba-ov-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--hba-indigo), var(--hba-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hba-ov-description {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--hba-muted);
}

.hba-ov-description strong {
  color: var(--hba-dark);
}

/* Right Side Gradient Card */
.hba-ov-highlights-card-gradient {
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      #6343c9 50%,
      var(--hba-orange) 100%);
  padding: 45px 40px;
  border-radius: 30px;
  color: var(--hba-white);
  box-shadow: 0 25px 50px rgba(54, 44, 192, 0.2);
  margin-top: -30px;
}

.hba-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hba-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hba-item:first-child {
  padding-top: 0;
}

.hba-icon {
  font-size: 20px;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--hba-white);
  margin-top: 4px;
}

.hba-details {
  display: flex;
  flex-direction: column;
}

.hba-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.hba-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hba-white);
  line-height: 1.4;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1199px) {
  .hba-ov-title {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .hba-ov-refined {
    padding: 80px 0;
  }

  .hba-ov-title {
    font-size: 2.5rem;
    text-align: center;
  }

  .hba-ov-description {
    text-align: center;
    font-size: 1.15rem;
    margin-bottom: 40px;
  }

  .hba-ov-highlights-card-gradient {
    margin-top: 0;
    padding: 35px 25px;
  }
}

@media (max-width: 576px) {
  .hba-ov-title {
    font-size: 2.1rem;
  }

  .hba-ov-highlights-card-gradient {
    border-radius: 20px;
  }

  .hba-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .hba-value {
    font-size: 1rem;
  }
}

/* ------------------------------------------ Project Overview Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Business Challenge Section CSS Start ---------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-dark: #2d3436;
  --text-muted: #636e72;
}

.challenge-section {
  padding: 100px 0;
  background-color: #ffffff;
  font-family: "Inter", sans-serif;
}

.header-content {
  margin-bottom: 50px;
}

/* Reusing your gradient title style for consistency */
.hba-ov-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  text-align: left;
}

.description {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 850px;
  line-height: 1.7;
  margin-top: 15px;
}

/* Card Styling */
.pain-card {
  background: #fff;
  border: 1px solid #f1f3f5;
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pain-card:hover {
  transform: translateY(-10px);
  border-color: rgba(54, 44, 192, 0.2);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.08);
}

.icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(223, 66, 49, 0.07);
  color: var(--brand-red);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 30px;
  transition: all 0.4s ease;
}

.pain-card:hover .icon-wrapper {
  background: var(--brand-blue);
  color: #fff;
  transform: scale(1.1);
}

.pain-card h5 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
}

.pain-card p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
  text-align: start;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 1199px) {
  .hba-ov-title {
    font-size: 3rem;
  }
}

@media (max-width: 991px) {
  .challenge-section {
    padding: 80px 0;
  }

  .hba-ov-title {
    font-size: 2.5rem;
  }

  .header-content {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .hba-ov-title {
    font-size: 2.2rem;
  }

  .description {
    font-size: 1.05rem;
  }

  .pain-card {
    padding: 35px 20px;
    border-radius: 20px;
  }

  .icon-wrapper {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .hba-ov-title {
    font-size: 1.9rem;
  }
}

/* ------------------------------------------ Business Challenge Section CSS End ---------------------------------------------- */

/* ------------------------------------------ The Solution: Comprehensive Digital Transformation Section CSS Start ---------------------------------------------- */

/* --- Root Variables --- */
:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-dark: #2d3436;
  --text-muted: #636e72;
  --transition-fast: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

section.solution-section {
  background: #f8fafc;
  padding: 100px 0;
}

/* --- Container Box Design --- */
.case-study-box {
  display: flex;
  border-radius: 25px;
  overflow: hidden;
  min-height: 750px;
  background: #000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* --- Sidebar Styling (Desktop) --- */
.cs-menu-sidebar {
  width: 28%;
  background: linear-gradient(180deg, #3e24b4 0%, #d83c2f 100%);
  padding: 40px 0;
  z-index: 10;
}

.cs-menu-title,
.cs-menu-sidebar .site-section-title {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: 28px;
  font-weight: 800;
  padding: 0 40px;
  margin-bottom: 35px;
}

.cs-menu-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.7);
  padding: 18px 40px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 0;
  transition: 0.3s;
}

.cs-menu-sidebar .nav-link i {
  width: 20px;
  text-align: center;
}

.cs-menu-sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-right: 6px solid #fff;
}

/* --- Content Viewer & Panes --- */
.cs-content-viewer {
  width: 72%;
  position: relative;
  background: #000;
}

.tab-content,
.tab-pane {
  height: 100%;
}

.cs-view-panel {
  min-height: 750px;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cs-inner-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Typography & Elements --- */
.cs-tag-badge {
  background: #e33e30;
  color: #fff;
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  width: fit-content;
}

.cs-heading-main {
  font-size: 42px;
  font-weight: 800;
  color: #fff !important;
  margin: 20px 0;
  line-height: 1.1;
}

.cs-row-challenge {
  background: rgba(216, 60, 47, 0.95);
  border-left: 5px solid #fff;
  color: #fff;
  padding: 15px 25px;
  margin-bottom: 12px;
  border-radius: 8px;
}

.cs-row-solution {
  background: rgba(62, 36, 180, 0.95);
  border-left: 5px solid #fff;
  color: #fff;
  padding: 15px 25px;
  margin-bottom: 25px;
  border-radius: 10px;
}

.cs-capabilities-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.cs-capabilities-grid span {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cs-capabilities-grid i {
  color: #2ecc71;
  margin-top: 4px;
}

.cs-impact-oval {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px 40px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.cs-impact-lbl {
  color: #ffbebe;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  display: block;
}

.cs-impact-oval p {
  margin: 0;
  color: #fff;
  font-weight: 600;
}

/* --- Background Images (IMPORTANT) --- */
.bg-lms {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200");
}

.bg-cmaward {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=1200");
}

.bg-dmf {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1518349662322-c43ae5f61df4?q=80&w=1200");
}

.bg-ahims {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1516733725897-1aa73b87c8e8?q=80&w=1200");
}

.bg-amdms {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1200");
}

.bg-mining {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1516937941344-00b4e0337589?q=80&w=1200");
}

/* === Third Case Study Background Images === */

.bg-scs-booking {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1556740738-b6a63e27c4df?q=80&w=1200");
}

.bg-scs-gate {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1590658268037-6bf12165a8df?q=80&w=1200");
}

.bg-scs-dashboard {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200");
}

.bg-scs-alerts {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1581090700227-4c4f50d5b4b8?q=80&w=1200");
}

.bg-scs-audit {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url("https://images.unsplash.com/photo-1454165205744-3b78555e5572?q=80&w=1200");
}

.cs-capabilities {
  margin-top: 20px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.55);
  border-left: 4px solid #ff4c4c;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  max-width: 900px;
}

.cap-heading {
  display: inline;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(90deg,
      var(--primary-blue) 0%,
      var(--primary-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cap-text {
  display: inline;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.6;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 991px) {
  .case-study-box {
    flex-direction: column;
    min-height: auto;
  }

  .cs-menu-sidebar {
    width: 100%;
    padding: 15px 0;
    background: linear-gradient(90deg, #3e24b4 0%, #d83c2f 100%);
  }

  .custom-scroll-tabs {
    flex-direction: row !important;
    overflow-x: auto;
    padding: 0 15px;
    scrollbar-width: none;
  }

  .custom-scroll-tabs::-webkit-scrollbar {
    display: none;
  }

  .cs-menu-sidebar .nav-link {
    padding: 12px 20px;
    white-space: nowrap;
    border-right: none Impo !important;
    width: 100%;
  }

  .cs-menu-sidebar .nav-link.active {
    border-bottom: 4px solid #fff;
    border-right: none !important;
  }

  .cs-content-viewer {
    width: 100%;
  }

  .cs-view-panel {
    padding: 40px 25px;
    min-height: 600px;
  }

  .cs-heading-main {
    font-size: 30px;
  }

  .cs-impact-oval {
    border-radius: 20px;
    padding: 20px;
  }
}

/* ------------------------------------------ The Solution: Comprehensive Digital Transformation Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Implementation Strategy Section CSS Start ---------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --brand-grad: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
}

.implementation-strategy-v3 {
  padding: 100px 0;
  background: #ffffff;
  overflow: hidden;
}

.title-underline {
  width: 80px;
  height: 5px;
  background: var(--brand-grad);
  margin: 10px 0 50px;
  border-radius: 10px;
}

/* Strategy Grid Layout - Modern CSS Grid */
.strategy-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 60px;
}

/* Card Styling - Same Premium Design */
.strat-card {
  position: relative;
  padding: 2px;
  background: #eee;
  border-radius: 25px;
  transition: all 0.4s ease;
  height: 100%;
}

.strat-card-inner {
  background: #fff;
  padding: 40px;
  border-radius: 23px;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Hover Effects */
.strat-card:hover {
  background: var(--brand-grad);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.15);
}

.strat-icon-box {
  width: 65px;
  height: 65px;
  background: #f8f9ff;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 18px;
  margin-bottom: 25px;
  transition: 0.4s;
  border: 1px solid #edf2f7;
}

.strat-card:hover .strat-icon-box {
  background: var(--brand-blue);
  color: #fff;
  transform: rotateY(360deg);
}

.security-icon {
  background: #fff5f5;
  color: var(--brand-red);
}

.strat-card:hover .security-icon {
  background: var(--brand-red);
}

.strat-card h4 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 15px;
  color: #111;
}

.strat-card p {
  color: #666;
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 0;
}

.strat-number {
  position: absolute;
  bottom: -10px;
  right: 15px;
  font-size: 80px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03);
  z-index: 0;
  transition: 0.4s;
}

.strat-card:hover .strat-number {
  color: rgba(223, 66, 49, 0.07);
  transform: scale(1.1);
}

/* Wide Card Logic */
.wide-card {
  grid-column: span 2;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 991px) {
  .strategy-grid-container {
    grid-template-columns: 1fr;
  }

  .wide-card {
    grid-column: span 1;
  }

  .implementation-strategy-v3 {
    padding: 60px 0;
  }

  .strat-card-inner {
    padding: 30px;
  }

  .title-underline {
    margin: 10px auto 40px;
  }
}

@media (max-width: 576px) {
  .hba-ov-title {
    font-size: 28px;
    text-align: center;
  }

  .strat-number {
    font-size: 60px;
  }

  .strat-card h4 {
    font-size: 18px;
  }
}

/* ------------------------------------------ Implementation Strategy Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Key Success Factors Section CSS Start ---------------------------------------------- */

:root {
  --brand-red: #d83c2f;
  --tech-purple: #3e24b4;
}

.sf-modified-orbital {
  background: #fbfbfb;
  padding: 100px 0;
  overflow: hidden;
}

.orbital-wrapper-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1250px;
  margin: 50px 0 0 0;
  position: relative;
}

/* Bubble Styling */
.ksf-bubble {
  background: #fff;
  padding: 25px;
  border-radius: 20px 60px 60px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 30px;
  max-width: 450px;
}

.ksf-bubble:hover {
  transform: translateX(10px) translateY(-5px);
  border-color: var(--brand-red);
  box-shadow: 0 20px 50px rgba(216, 60, 47, 0.12);
}

.ksf-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--brand-red), #ff6b6b);
  color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-right: 20px;
  flex-shrink: 0;
  box-shadow: 0 10px 20px rgba(216, 60, 47, 0.2);
}

.ksf-info h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.ksf-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* Center Hub */
.ksf-center {
  position: relative;
  padding: 40px;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.ksf-diamond-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ksf-diamond {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 30px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(216, 60, 47, 0.1);
  z-index: 5;
}

.ksf-diamond i {
  transform: rotate(-45deg);
  font-size: 50px;
  color: var(--brand-red);
}

.ksf-pulse {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px solid var(--brand-red);
  border-radius: 50%;
  animation: ksfPulse 2.5s infinite;
}

@keyframes ksfPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* --- RESPONSIVE LOGIC --- */

@media (max-width: 992px) {
  .orbital-wrapper-new {
    flex-direction: column;
    gap: 0;
  }

  .ksf-center {
    order: -1;
    padding-bottom: 60px;
  }

  .orbital-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ksf-bubble {
    border-radius: 20px;
    width: 90%;
    max-width: 100%;
    margin-bottom: 20px;
    gap: 15px;
  }

  /* Remove X-axis translate on mobile hover to avoid horizontal scroll */
  .ksf-bubble:hover {
    transform: translateY(-5px);
  }
}

@media (max-width: 576px) {
  .sf-modified-orbital {
    padding: 60px 0;
  }

  .ksf-diamond-container {
    width: 140px;
    height: 140px;
  }

  .ksf-diamond {
    width: 90px;
    height: 90px;
  }

  .ksf-diamond i {
    font-size: 35px;
  }
}

/* Animations - Ensure they don't cause overflow */
.fade-in-left,
.fade-in-right {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ------------------------------------------ Key Success Factors Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Measurable Results Section CSS Start ---------------------------------------------- */

:root {
  --brand-red: #d83c2f;
  --navy-dark: #161c2d;
  --brand-grad: linear-gradient(135deg, #3e24b4 0%, #d83c2f 100%);
}

.measurable-results-fixed {
  background-color: #f4f7fa;
  padding: 100px 0;
}

.hba-ov-title {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 50px;
}

.hba-ov-title span {
  color: #d83c2f;
}

.results-perfect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.res-card {
  background: #161c2d;
  padding: 40px 30px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.res-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.res-icon {
  width: 50px;
  height: 50px;
  background: rgba(216, 60, 47, 0.15);
  color: #ff4d4d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 25px;
}

.icon-light {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.res-content h4 {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
}

.res-content p {
  color: #cbd5e0 !important;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.gradient-style {
  background: linear-gradient(135deg, #3e24b4 0%, #d83c2f 100%);
}

.bg-watermark {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 80px;
  opacity: 0.1;
  color: #fff;
}

/* Responsive Fixes - Binna Design Change Kiye */
@media (max-width: 992px) {
  .results-perfect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .results-perfect-grid {
    grid-template-columns: 1fr;
  }

  .hba-ov-title {
    font-size: 32px;
    text-align: center;
  }

  .res-card {
    text-align: left;
  }
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        Case Studies-3 CSS Start
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.results-perfect-grid-7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Third row ka single card full width */
.results-perfect-grid-7 .res-card:last-child {
  grid-column: 1 / -1;
}

/* Tablet */
@media (max-width: 992px) {
  .results-perfect-grid-7 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .results-perfect-grid-7 {
    grid-template-columns: 1fr;
  }
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        Case Studies-3 CSS END
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ------------------------------------------ Measurable Results Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Conclusion Section CSS Start ---------------------------------------------- */

.sf-conclusion-section {
  background: #ffffff;
  padding: 100px 0;
}

.conclusion-wrap {
  background: #161c2d;
  border-radius: 40px;
  padding: 60px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Background Decorative Glow */
.conclusion-wrap::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle,
      rgba(216, 60, 47, 0.2) 0%,
      transparent 70%);
  z-index: 1;
}

.conclusion-content {
  position: relative;
  z-index: 2;
}

.conclusion-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 25px;
}

/* Gradient Text Style */
.text-gradient {
  background: linear-gradient(135deg, #ff6b6b, #d83c2f, #3e24b4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  display: inline-block;
}

.conclusion-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: 500;
  opacity: 0.95;
}

.conclusion-text {
  font-size: 15px;
  line-height: 1.8;
  color: #cbd5e0;
  margin: 0;
}

/* Impact Badge Card */
.impact-badge-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px 30px;
  border-radius: 30px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.badge-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #d83c2f, #3e24b4);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 20px;
  box-shadow: 0 10px 20px rgba(216, 60, 47, 0.3);
}

.impact-badge-card h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.impact-badge-card p {
  color: #cbd5e0;
  font-size: 14px;
  margin-bottom: 20px;
}

.line-decorator {
  height: 2px;
  width: 50px;
  background: #d83c2f;
  margin: 0 auto 20px;
}

.location-tag {
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Responsive Fix */
@media (max-width: 991px) {
  .sf-conclusion-section {
    padding: 60px 0;
  }

  .conclusion-wrap {
    padding: 40px;
    text-align: center;
  }

  .conclusion-title {
    font-size: 32px;
  }

  .impact-badge-card {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
  }
}

/* ------------------------------------------ Conclusion Section CSS End ---------------------------------------------- */

/* ------------------------------------------ Ready to Transform Your Customer Experience? Section CSS Start ---------------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --hba-white: #ffffff;
}

.hba-cta-final-2 {
  padding: 100px 0;
  /* background-color: #F4F7FA; */
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
}

/* .hba-main-cta-card {
    position: relative;
    padding: 60px;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hba-indigo) 0%, var(--hba-orange) 100%);
    box-shadow: 0 30px 60px rgba(54, 44, 192, 0.25);
} */

/* .hba-overlay-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
    z-index: 1;
    pointer-events: none;
} */

/* .hba-cta-heading {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--hba-white);
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: left;
} */

.hba-cta-subtext {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 750px;
  line-height: 1.6;
  margin-bottom: 0;
}

.hba-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--hba-white);
  color: var(--hba-indigo);
  padding: 18px 40px;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none !important;
  transition: all 0.4s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}

.hba-btn-glass:hover {
  background: transparent;
  color: var(--hba-white);
  border-color: var(--hba-white);
  transform: translateY(-5px);
}

/* --- RESPONSIVE LOGIC --- */

@media (max-width: 991px) {
  .hba-cta-final {
    padding: 60px 0;
  }

  .hba-main-cta-card {
    padding: 50px 30px;
    border-radius: 30px;
    text-align: center;
  }

  .hba-cta-heading {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 15px;
  }

  .hba-cta-subtext {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 25px;
    max-width: 100%;
  }

  .hba-btn-glass {
    padding: 15px 35px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .hba-cta-heading {
    font-size: 1.5rem;
  }

  .hba-btn-glass {
    width: 100%;
    justify-content: center;
    text-wrap: unset;
  }
}

/* ------------------------------------------ Ready to Transform Your Customer Experience? Section CSS End ---------------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Case Studies-2 Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Contact US Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* -------------------------------------- Hero Section CSS Start ---------------------------------------------- */

:root {
  --brand-indigo: #362cc0;
  --brand-red: #df4231;
  --brand-white: #ffffff;
}

/* ================= HERO SECTION ================= */

.contact-hero-split {
  padding: 110px 0;
  background: linear-gradient(135deg, #362cc0 0%, #83267c 50%, #df4231 100%);
  position: relative;
  overflow: hidden;
}

/* ================= HEADING ================= */

.hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 25px;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 35px;
  max-width: 650px;
}

/* ================= BUTTON ================= */

.contact-cta-group {
  display: flex;
  gap: 20px;
}

.contact-cta-group.cta-contact-hero {
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
}

.contact-cta-group.cta-contact-hero p strong {
  font-weight: 700;
}

.btn-secondary-contact {
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 14px 35px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-secondary-contact:hover {
  background: #fff;
  color: var(--brand-indigo);
}

/* ================= VISUAL SECTION ================= */

.contact-hero-visual {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Circle Wrapper */

.circle-wrapper {
  position: relative;
  width: 420px;
  height: 420px;
}

/* Ripple Effect */

.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rippleEffect 4s infinite;
}

.ripple-2 {
  animation-delay: 1.3s;
}

.ripple-3 {
  animation-delay: 2.6s;
}

@keyframes rippleEffect {
  0% {
    width: 140px;
    height: 140px;
    opacity: 0.6;
  }

  100% {
    width: 420px;
    height: 420px;
    opacity: 0;
  }
}

/* Center Icon */

.main-center {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 65px;
  color: #fff;
  box-shadow:
    0 0 60px rgba(255, 255, 255, 0.3),
    0 35px 70px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

/* Outer Icons */

.circle-icon {
  position: absolute;
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transition: 0.3s ease;
}

/* .circle-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.28);
} */

/* 4 Positions */

.icon-1 {
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.icon-2 {
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

.icon-3 {
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.icon-4 {
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
}

/* ================= RESPONSIVE ================= */

/* Tablet View */

@media (max-width: 991px) {
  .circle-wrapper {
    width: 340px;
    height: 340px;
  }

  .main-center {
    width: 140px;
    height: 140px;
    font-size: 50px;
  }

  .circle-icon {
    width: 85px;
    height: 85px;
    font-size: 30px;
  }

  .ripple {
    animation: rippleTablet 4s infinite;
  }

  @keyframes rippleTablet {
    0% {
      width: 100px;
      height: 100px;
      opacity: 0.6;
    }

    100% {
      width: 340px;
      height: 340px;
      opacity: 0;
    }
  }
}

/* Mobile View – Hide Visual */

@media (max-width: 575px) {
  .contact-hero-visual {
    display: none;
  }
}

/* -------------------------------------- Hero Section CSS End ---------------------------------------------- */

/* -------------------------------------- TRUST & STATISTICS SECTION Section CSS Start ---------------------------------------------- */

:root {
  --hba-indigo: #362cc0;
  --hba-orange: #df4231;
  --bg-light: #f8f8f8;
}

.premium-light-contact {
  background: var(--bg-light);
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

/* Decorative Blobs for interactive feel */
.light-blob {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(54, 44, 192, 0.05) 0%,
      transparent 70%);
  z-index: 0;
  border-radius: 50%;
}

.blob-1 {
  top: -100px;
  left: -100px;
}

.blob-2 {
  bottom: -100px;
  right: -100px;
}

/* --- Left Side Stats Design --- */
.premium-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.glass-stat-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid #ffffff;
  padding: 20px 25px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(54, 44, 192, 0.03);
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-stat-card:hover {
  transform: translateX(10px);
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.08);
  border-color: var(--hba-indigo);
}

.stat-icon-circle {
  width: 55px;
  height: 55px;
  background: #f0efff;
  color: var(--hba-indigo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: 0.3s;
}

.glass-stat-card:hover .stat-icon-circle {
  background: var(--hba-indigo);
  color: #fff;
}

.stat-text-group h5 {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  color: #1a1a2e;
}

.stat-text-group p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

/* --- Right Side Premium Form --- */
.premium-white-form {
  background: #ffffff;
  border-radius: 40px;
  padding: 60px;
  box-shadow: 0 40px 100px rgba(54, 44, 192, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 1;
}

.top-tag {
  color: var(--hba-orange);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 10px;
}

.form-title-area h3 {
  font-size: 34px;
  font-weight: 900;
  color: #1a1a2e;
}

.form-title-area p {
  color: #94a3b8;
}

/* Modern Input Styling */
.custom-field,
.custom-select-field {
  width: 100%;
  padding: 16px 20px;
  background: #fcfdfe;
  border: 1.5px solid #edf2f7;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s ease;
  color: #334155;
}

.custom-field:focus {
  border-color: var(--hba-indigo);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(54, 44, 192, 0.05);
  outline: none;
}

/* Premium Button */
/* Default Button */
.btn-premium-send {
  width: 100%;
  padding: 18px 45px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 17px;

  background: #fff;
  border: 2px solid transparent;

  /* ✅ text gradient default */
  background-image: linear-gradient(90deg,
      var(--hba-indigo),
      var(--hba-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  box-shadow: 0 10px 22px rgba(54, 44, 192, 0.15);
  transition: all 0.35s ease;
}

/* Hover Button */
.btn-premium-send:hover {
  /* ✅ background gradient hover */
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;

  box-shadow: 0 14px 28px rgba(54, 44, 192, 0.25);
}

/* ✅ icon color same as text */
.btn-premium-send i {
  transition: 0.35s ease;
}

.btn-premium-send:hover i {
  color: #fff;
}

.nda-footer-badge {
  margin-top: 40px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 15px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  border: 1px solid #edf2f7;
}

.nda-footer-badge i {
  color: #10b981;
  margin-right: 8px;
}

/* Responsive */
@media (max-width: 991px) {
  .premium-white-form {
    padding: 40px 30px;
  }

  .form-footer-action {
    flex-direction: column;
    text-align: center;
  }

  .glass-stat-card:hover {
    transform: translateY(-5px);
  }
}

/* -------------------------------------- TRUST & STATISTICS SECTION Section CSS End ---------------------------------------------- */

/* -------------------------------------- WHAT HAPPENS NEXT SECTION CSS Start ---------------------------------------------- */

:root {
  --t-indigo: #362cc0;
  --t-red: #df4231;
  --t-gradient: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
}

.process-journey-suite {
  background: #f0f0f0;
  padding: 100px 0;
}

/* Desktop Progress Line */
@media (min-width: 992px) {
  .gradient-progress-line {
    position: absolute;
    top: 180px;
    left: 15%;
    right: 15%;
    height: 3px;
    background: var(--t-gradient);
    z-index: 1;
    opacity: 0.3;
    border-radius: 50px;
  }
}

/* Step Cards */
.process-step-card {
  background: #fff;
  padding: 50px 30px 40px;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
}

.process-step-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.08);
}

/* Number & Icons with Brand Colors */
.step-num-glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.indigo-bg {
  background: var(--t-indigo);
  box-shadow: 0 10px 20px rgba(54, 44, 192, 0.3);
}

.gradient-bg {
  background: var(--t-gradient);
  box-shadow: 0 10px 20px rgba(142, 55, 122, 0.3);
}

.red-bg {
  background: var(--t-red);
  box-shadow: 0 10px 20px rgba(223, 66, 49, 0.3);
}

.step-icon-box {
  font-size: 35px;
  margin-bottom: 20px;
}

.indigo-text {
  color: var(--t-indigo);
}

.gradient-text {
  background: var(--t-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red-text {
  color: var(--t-red);
}

.timeline-tag {
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  display: block;
  margin-top: 20px;
  text-transform: uppercase;
}

/* REDESIGNED: CTA Floating Card */
.cta-floating-card {
  /* background: #1a1a2e; */
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
  padding: 50px;
  /* border-radius: 35px; */
  /* background-image: radial-gradient(circle at top right, rgba(223, 66, 49, 0.15), transparent),
        radial-gradient(circle at bottom left, rgba(54, 44, 192, 0.15), transparent); */
  position: relative;
  overflow: hidden;
}

.cta-title {
  color: #fff;
  font-weight: 900;
  font-size: 32px;
  margin-bottom: 10px;
}

.cta-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin: 0;
}

/* New CTA Buttons */
.btn-primary-gradient {
  background: var(--t-gradient);
  color: #fff;
  padding: 16px 35px;
  border-radius: 50px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
  margin-bottom: 10px;
}

.btn-glass-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 14px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-left: 15px;
  transition: 0.3s;
}

.btn-primary-gradient:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(223, 66, 49, 0.3);
  color: #fff;
}

.btn-glass-secondary:hover {
  background: #fff;
  color: #1a1a2e;
}

@media (max-width: 991px) {
  .cta-floating-card {
    padding: 40px 30px;
    text-align: center;
  }

  .btn-glass-secondary {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }

  .btn-primary-gradient {
    width: 100%;
  }
}

/* -------------------------------------- WHAT HAPPENS NEXT SECTION CSS End ---------------------------------------------- */

/* -------------------------------------- OUR LOCATIONS SECTION CSS Start ---------------------------------------------- */

:root {
  --t-indigo: #362cc0;
  --t-red: #df4231;
  --t-bg-light: #f8faff;
  --t-text-dark: #1a1a2e;
  --t-text-gray: #64748b;
}

.tavish-locations {
  background: var(--t-bg-light);
  padding: clamp(40px, 8vw, 80px) 0;
}

.location-premium-card {
  background: #ffffff;
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.06);
  border: 1px solid #f0f0f0;
}

/* Info Side Responsiveness */
.info-side {
  padding: clamp(30px, 5vw, 60px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-meta {
  border-left: 5px solid var(--t-red);
  padding-left: 20px;
  margin-bottom: clamp(15px, 3vw, 30px);
}

.hq-badge {
  color: var(--t-red);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
}

.city-name {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  color: var(--t-indigo);
  margin: 0;
  line-height: 1.1;
}

.contact-link {
  text-decoration: none;
  color: var(--t-text-dark);
  font-weight: 700;
  font-size: clamp(13px, 2vw, 15px);
  word-break: break-all;
  transition: 0.3s;
}

.c-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.c-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #f0f1ff;
  color: var(--t-indigo);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-hours-card {
  background: #f9faff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #eef2f6;
}

/* Map Responsiveness */
.map-side {
  min-height: 450px;
}

.map-wrapper {
  height: 100%;
  width: 100%;
  min-height: inherit;
  position: relative;
}

.map-action-center {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  z-index: 5;
}

.btn-get-directions {
  background: var(--t-red);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(223, 66, 49, 0.3);
  white-space: nowrap;
  transition: 0.3s;
}

.btn-get-directions:hover {
  background: var(--t-indigo);
  color: #fff;
  transform: scale(1.03);
}

/* --- MEDIA QUERIES FOR FULL RESPONSIVENESS --- */

/* Tablet & Smaller Desktops */
@media (max-width: 991px) {
  .map-side {
    min-height: 400px;
    order: 2;
  }

  .info-side {
    order: 1;
  }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
  .location-premium-card {
    border-radius: 20px;
    margin: 0 10px;
  }

  .info-side {
    padding: 25px 20px;
  }

  .bh-row {
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
  }

  .bh-row span:last-child {
    font-size: 12px;
  }

  .btn-get-directions {
    width: 100%;
    padding: 10px 15px;
  }
}

/* -------------------------------------- OUR LOCATIONS SECTION CSS End ---------------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Contact Us Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Privacy Policy Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* ----------------------------------------- Content Section CSS Start ----------------------------------------------- */

/* --- Privacy Policy Content Style --- */
.privacy-intro-section {
  padding: 80px 0;
  background-color: #ffffff;
}

.privacy-card {
  margin: 0 auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  position: relative;
}

.intro-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #1a1a1a;
  font-weight: 500;
  margin-bottom: 25px;
}

.consent-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 0;
}

/* Branded decoration at the bottom of the content */
.accent-line {
  height: 4px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  margin-top: 30px;
  border-radius: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .privacy-intro-section {
    padding: 40px 0;
  }

  .privacy-card {
    padding: 25px;
    border-radius: 20px;
  }

  .intro-text {
    font-size: 1.1rem;
  }

  .consent-text {
    font-size: 1rem;
  }
}

/* ----------------------------------------- Content Section CSS End ----------------------------------------------- */

/* ----------------------------------------- Information Collection Section CSS Start ----------------------------------------------- */

/* --- High-End Privacy Section --- */
.privacy-core-section {
  padding: 100px 0;
  background: #f8fafc;
}

.privacy-header-main {
  margin-bottom: 60px;
}

.badge-premium {
  color: #362cc0;
  background: rgba(54, 44, 192, 0.08);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.display-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #111827;
  margin: 20px 0;
}

.display-title span {
  color: #362cc0;
  background: linear-gradient(90deg, #362cc0, #df4231);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead-text {
  font-size: 1.2rem;
  color: #4b5563;
  max-width: 700px;
}

/* Bento Layout */
.premium-bento-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  padding: 40px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bento-card:hover {
  border-color: #362cc0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.main-card {
  grid-column: span 8;
}

.side-card {
  grid-column: span 4;
}

.bottom-card {
  grid-column: span 7;
}

.accent-card {
  grid-column: span 5;
}

/* Content Inside Cards */
.head-flex {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.icon-box {
  width: 50px;
  height: 50px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #362cc0;
  font-size: 1.2rem;
}

.red-icon {
  color: #df4231;
}

.bento-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

.bento-card p {
  color: #4b5563;
  line-height: 1.6;
}

/* Data Elements */
.data-grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.data-item {
  background: #f9fafb;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
  border: 1px solid #f3f4f6;
}

.clean-list {
  list-style: none;
  padding: 0;
}

.clean-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-weight: 600;
  color: #374151;
}

.p-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.p-tags span {
  background: #362cc0;
  color: #fff;
  padding: 6px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.source-tag {
  margin-top: 20px;
  font-size: 13px;
  color: #6b7280;
  padding: 10px;
  background: #fff5f5;
  border-radius: 10px;
  color: #991b1b;
}

/* --- Responsive --- */
@media (max-width: 1024px) {

  .main-card,
  .side-card,
  .bottom-card,
  .accent-card {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  .display-title {
    font-size: 2.2rem;
  }

  .data-grid-list {
    grid-template-columns: 1fr;
  }

  .bento-card {
    padding: 25px;
  }
}

/* ----------------------------------------- Information Collection Section CSS End ----------------------------------------------- */

/* ----------------------------------------- How We Process Your Information Section CSS Start ----------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
}

section.tavish-process-premium {
  padding: 100px 0;
}

/* Base Styles */
.title-modern {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
}

.title-modern span {
  color: var(--brand-blue);
}

.segment-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

/* Segment Headers */
.segment-no {
  min-width: 40px;
  height: 40px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.no-red {
  background: var(--brand-red);
}

/* Standardized Icon Containers (Sabhi sections ke liye ek jaisa) */
.icon-circle-small,
.icon-wrap {
  min-width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hiring-box {
  background: rgba(54, 44, 192, 0.03);
  border: 1px dashed var(--brand-blue);
}

.legal-notice-premium {
  background: #fff;
}

/* Mobile Alignment Fixes (Sab kuch left-side karne ke liye) */
@media (max-width: 768px) {
  .stack-segment {
    padding: 25px 15px !important;
  }

  /* Ensure flex-direction is always 'row' to keep icon and text side-by-side */
  .hiring-box,
  .legal-notice-premium,
  .business-list-premium li {
    flex-direction: row !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .segment-header h3 {
    font-size: 1.25rem;
  }

  /* Icon spacing fixed for small screens */
  .me-3 {
    margin-right: 1rem !important;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  .title-modern {
    font-size: 1.6rem;
  }

  .main-para {
    font-size: 0.95rem;
  }

  .segment-no {
    min-width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
}

/* ----------------------------------------- How We Process Your Information Section CSS End ----------------------------------------------- */

/* ----------------------------------------- Data Usage Scenarios Section CSS Start ----------------------------------------------- */

/* --- Tavish Refined Compact Design --- */
.tavish-refined-compact {
  padding: 100px 0;
  background: #f8fafc;
}

.refined-header {
  margin-bottom: 35px;
  border-left: 5px solid #362cc0;
  padding-left: 20px;
}

.refined-h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: #111;
  margin: 0;
}

.refined-h2 span {
  color: #362cc0;
}

/* The Integrated Stack */
.main-policy-stack {
  border: 2px solid #f0f0f0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}

.policy-layer {
  display: flex;
  min-height: 100px;
  border-bottom: 2px solid #f0f0f0;
}

.policy-layer:last-child {
  border-bottom: none;
}

.border-top-none {
  border-top: none;
}

/* Layer Sidebar */
.layer-sidebar {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  flex-shrink: 0;
}

.sidebar-blue {
  background: #f4f7ff;
  color: #362cc0;
}

.sidebar-red {
  background: #fff5f5;
  color: #df4231;
}

.sidebar-dark-blue {
  background: #362cc0;
  color: #fff;
}

.l-num {
  font-size: 1.5rem;
  font-weight: 900;
}

.l-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

/* Layer Main Body */
.layer-main-body {
  flex: 1;
  padding: 40px;
}

.body-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111827;
}

/* Dense Usage Grid */
.usage-dense-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.u-cell {
  display: flex;
  gap: 15px;
}

.u-cell i {
  color: #362cc0;
  font-size: 1.2rem;
  margin-top: 4px;
}

.u-cell strong {
  display: block;
  color: #111;
  font-size: 1rem;
  margin-bottom: 4px;
}

.u-cell p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.compliance-stripe {
  margin-top: 30px;
  background: #f8f9fa;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #eee;
}

.compliance-stripe i {
  color: #df4231;
}

/* Split Sections */
.body-grey {
  background: #fafafa;
}

.split-density {
  display: flex;
  gap: 40px;
}

.split-col {
  flex: 1;
}

.split-col h5 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
}

.split-col p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  line-height: 1.6;
}

.border-left-accent {
  border-left: 3px solid #df4231;
  padding-left: 20px;
}

/* Action Layer */
.body-blue-tint {
  background: #f0f4ff;
}

.removal-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.action-text h5 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #362cc0;
}

.action-text p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #444;
}

.p-btn-main {
  background: #362cc0;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(54, 44, 192, 0.2);
  transition: 0.3s;
}

.p-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px rgba(54, 44, 192, 0.3);
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .policy-layer {
    flex-direction: column;
  }

  .layer-sidebar {
    width: 100%;
    height: 60px;
    flex-direction: row;
    gap: 15px;
    border-bottom: 2px solid #f0f0f0;
  }

  .usage-dense-grid {
    grid-template-columns: 1fr;
  }

  .split-density {
    flex-direction: column;
    gap: 25px;
  }

  .removal-action-row {
    flex-direction: column;
    text-align: center;
  }
}

/* ----------------------------------------- Data Usage Scenarios Section CSS End ----------------------------------------------- */

/* ----------------------------------------- Cookie Usage Policy Section CSS Start ----------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
}

.cookie-policy-section {
  padding: 60px 0;
}

.brand-blue-text {
  color: var(--brand-blue);
  font-size: 1.3rem;
  font-weight: 800;
}

.brand-red-text {
  color: var(--brand-red);
  font-size: 1.3rem;
  font-weight: 800;
}

/* Alert Box Fixed Alignment */
.cookie-alert-box {
  background-color: #fff5f4;
  border: 1px solid #ffd6d1;
  border-radius: 12px;
  padding: 20px;
}

.alert-icon-wrapper {
  background: #ffffff;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(223, 66, 49, 0.1);
  color: var(--brand-red);
  font-size: 1.3rem;
}

.alert-text {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

/* Data Section */
.data-capture-section {
  background-color: #f8f9ff;
}

.x-small {
  font-size: 0.75rem;
}

/* Footer Action Card Responsive */
.footer-action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn-blue {
  background-color: var(--brand-blue);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  padding: 10px 20px;
  transition: 0.3s;
}

.btn-blue:hover {
  background-color: #2a2296;
  color: white;
}

.btn-outline-red {
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 20px;
  transition: 0.3s;
  background: transparent;
}

.btn-outline-red:hover {
  background-color: var(--brand-red);
  color: white;
}

/* Mobile Specific Tweaks */
@media (max-width: 768px) {
  .cookie-alert-box {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-action-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .w-sm-100 {
    width: 100%;
  }

  .brand-blue-text,
  .brand-red-text {
    font-size: 1.1rem;
  }
}

/* ----------------------------------------- Cookie Usage Policy Section CSS End ----------------------------------------------- */

/* ----------------------------------------- Last 4 Section CSS Start ----------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
}

.privacy-extended-sections {
  padding: 100px 0;
}

.brand-blue-text {
  color: var(--brand-blue);
}

.brand-red-text {
  color: var(--brand-red);
}

/* Card Styling */
.design-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.border-start-blue {
  border-left: 6px solid var(--brand-blue) !important;
}

/* Icon Box */
.icon-square {
  width: 50px;
  height: 50px;
  background: var(--brand-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.5rem;
}

/* Acceptance Alert Box (Based on your image style) */
.acceptance-alert-box {
  background-color: #fff5f4;
  border: 1px solid #ffd6d1;
  border-radius: 20px;
}

.alert-icon-main {
  background: white;
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: var(--brand-red);
  font-size: 1.8rem;
  box-shadow: 0 10px 20px rgba(223, 66, 49, 0.15);
}

.acceptance-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.border-dashed {
  border: 1px dashed #df4231;
}

.italic {
  font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .acceptance-alert-box {
    flex-direction: column;
  }

  .alert-icon-main {
    margin-bottom: 20px;
  }
}

/* ----------------------------------------- Last 4 Section CSS End ----------------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Privacy Policy Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Government Industries Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* -------------------------------------------------------------------------- Hero Section CSS Start ------------------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --brand-blue-dark: #2a2296;
  --brand-red-dark: #b91c1c;
  --white: #ffffff;
}

.premium-hero-centered {
  min-height: 100vh;
  /* Responsive height */
  width: 100%;
  background: url("./Assets/images/government-industry-bg.png") no-repeat center center;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  padding: 60px 0;
  overflow-x: hidden;
}

.brand-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.85) 0%,
      rgba(54, 44, 192, 0.5) 50%,
      rgba(15, 23, 42, 0.9) 100%);
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
}

.container {
    position: relative;
    z-index: 2;
    max-width: 1200px !important;
}

.hero-glass-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(30px, 5vw, 60px);
  /* Responsive padding */
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.hero-title {
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  /* Size scales with screen */
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 25px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  margin-bottom: 30px;
}

.hero-description {
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 900px;
  margin: 0 auto 40px auto;
  line-height: 1.8;
}

.speed-badge {
  background: var(--brand-red);
  color: white;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 800;
  white-space: nowrap;
}

/* Gradient Buttons Responsive */
.hero-btn-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  /* Wraps buttons on mobile */
}

.btn-brand-solid,
.btn-brand-outline {
  padding: 16px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s ease;
  border: none;
  min-width: 240px;
  text-align: center;
  display: inline-block;
}

.btn-brand-solid {
  background: linear-gradient(135deg,
      var(--brand-blue) 0%,
      var(--brand-blue-dark) 100%);
  color: white !important;
}

.btn-brand-outline {
  background: linear-gradient(135deg,
      var(--brand-red) 0%,
      var(--brand-red-dark) 100%);
  color: white !important;
}

.btn-brand-solid:hover,
.btn-brand-outline:hover {
  transform: translateY(-5px);
  filter: brightness(1.2);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero-glass-content {
    padding: 35px 20px;
    border-radius: 30px;
  }

  .hero-btn-container {
    flex-direction: column;
    align-items: center;
  }

  .btn-brand-solid,
  .btn-brand-outline {
    width: 100%;
    max-width: 320px;
  }
}

/* ---------------------------------------------------- Hero Section CSS End --------------------------------------------------------------------------- */

/* ---------------------------------------------------- Industry Challenges & Solutions Section CSS Start (ICS - Conflict Free Version)---------------------------------------------------- */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --light-bg: #f4f6fb;
  --card-bg: #ffffff;
}

/* SECTION */
.ics-modernization-section {
  padding: 90px 0;
  background: #f4f6fb;
}

/* LEFT NAV */
.ics-challenge-tabs {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}

.ics-tab-btn {
  background: #eef1ff;
  border: none;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
  color: #333;
}

.ics-tab-btn i {
  color: var(--brand-blue);
}

.ics-tab-btn:hover {
  transform: translateX(6px);
}

.ics-tab-btn.ics-active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  color: white;
  box-shadow: 0 10px 25px rgba(54, 44, 192, 0.35);
}

.ics-tab-btn.ics-active i {
  color: white;
}

/* RIGHT CONTENT BOX */
.ics-tab-content-box {
  background: #fff;
  padding: 60px 50px;
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* NETWORK BACKGROUND */
.ics-tab-content-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image:
    radial-gradient(circle at 15% 25%,
      rgba(223, 66, 49, 0.25) 6px,
      transparent 7px),
    radial-gradient(circle at 70% 30%,
      rgba(223, 66, 49, 0.25) 6px,
      transparent 7px),
    radial-gradient(circle at 40% 70%,
      rgba(223, 66, 49, 0.25) 6px,
      transparent 7px),
    radial-gradient(circle at 85% 80%,
      rgba(223, 66, 49, 0.25) 6px,
      transparent 7px),
    linear-gradient(120deg, rgba(54, 44, 192, 0.18) 2px, transparent 2px),
    linear-gradient(60deg, rgba(54, 44, 192, 0.18) 2px, transparent 2px);
}

.industry-finance .ics-tab-content-box::after {
  content: "₹";
}

.industry-healthcare .ics-tab-content-box::after {
  content: "+";
}

.industry-government .ics-tab-content-box::after {
  content: "⚖";
}

.industry-manufacturing .ics-tab-content-box::after {
  content: "⚙";
}

/* MEDICAL WATERMARK */
.ics-tab-content-box::after {
  position: absolute;
  font-size: 260px;
  font-weight: 700;
  color: rgba(223, 66, 49, 0.06);
  bottom: -40px;
  right: 30px;
  line-height: 1;
}

/* CIRCUIT GRID */
.ics-circuit {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 35%,
      rgba(54, 44, 192, 0.25) 2px,
      transparent 3px),
    radial-gradient(circle at 60% 70%,
      rgba(54, 44, 192, 0.25) 2px,
      transparent 3px),
    linear-gradient(rgba(54, 44, 192, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 44, 192, 0.15) 1px, transparent 1px);
  background-size:
    120px 120px,
    160px 160px,
    40px 40px,
    40px 40px;
  opacity: 0.25;
}

/* FLOATING ICON BOXES */
.ics-float-icon {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(54, 44, 192, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  font-size: 22px;
  color: var(--brand-blue);
  animation: floatIcon 7s ease-in-out infinite;
  pointer-events: none;
}

.ficon1 {
  top: 45px;
  left: 45px;
}

.ficon2 {
  bottom: 40px;
  left: 130px;
  animation-delay: 2s;
}

.ficon3 {
  top: 90px;
  right: 90px;
  animation-delay: 4s;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* DATA WAVE */
.ics-wave {
  position: absolute;
  bottom: -40px;
  left: -10%;
  width: 120%;
  height: 120px;
  background: radial-gradient(ellipse at center,
      rgba(54, 44, 192, 0.15) 0%,
      rgba(54, 44, 192, 0.05) 40%,
      transparent 70%);
  animation: waveMove 10s linear infinite;
}

@keyframes waveMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200px);
  }
}

/* FLOATING SMALL ICONS */
.ics-icon {
  position: absolute;
  font-size: 28px;
  color: rgba(223, 66, 49, 0.12);
  animation: floatY 6s ease-in-out infinite;
}

.icon1 {
  top: 30%;
  left: 15%;
}

.icon2 {
  bottom: 25%;
  right: 18%;
  animation-delay: 2s;
}

.icon3 {
  top: 20%;
  right: 35%;
  animation-delay: 4s;
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* TAB CONTENT */
.ics-tab-content {
  display: none;
  animation: fadeIn 0.4s ease;
  width: 100%;
}

.ics-tab-content.ics-active {
  display: block;
}

.ics-content-inner {
  text-align: center;
  max-width: 600px;
  margin: auto;
  position: relative;
  z-index: 5;
}

/* CENTER ICON */
.ics-center-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 30px rgba(54, 44, 192, 0.3);
}

.ics-center-icon i {
  color: white;
  font-size: 34px;
}

/* TEXT */
.ics-tab-content h4 {
  color: var(--brand-blue);
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 22px;
}

.ics-tab-content p {
  color: #555;
  line-height: 1.7;
  font-size: 15px;
}

/* SOLUTION CARD */
.ics-solution-container-card {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  padding: 50px;
  border-radius: 24px;
  color: white;
  text-align: center;
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.35);
  transition: 0.4s ease;
}

.ics-solution-container-card:hover {
  transform: translateY(-5px);
}

.ics-solution-container-card h4 {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
}

.ics-solution-container-card p {
  max-width: 800px;
  margin: auto;
  opacity: 0.95;
  font-size: 16px;
  line-height: 1.7;
}

/* ANIMATION */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .ics-tab-content-box {
    padding: 40px 25px;
  }
}

/* ---------------------------------------------------- Industry Challenges & Solutions Section CSS End ---------------------------------------------------- */

/* ---------------------------------------------------- Why Oracle APEX for Government Section CSS Start ------------------------------------------------ */

:root {
  --primary-blue: #362cc0;
  --primary-red: #df4231;
  --grad-blue: linear-gradient(135deg, #362cc0 0%, #6358e1 100%);
  --grad-red: linear-gradient(135deg, #df4231 0%, #ff6b5c 100%);
}

/* ================= SECTION ================= */

.apex-why-section {
  padding: 100px 0;
  background-color: #f0f0f0;
}

/* ================= GRID BASE ================= */

.apex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* 4 items → 2x2 */
.apex-grid.layout-4 {
  grid-template-columns: repeat(2, 1fr);
}

/* 5 items → last row full width */
.apex-grid.layout-5 {
  grid-template-columns: repeat(6, 1fr);
}

/* first 3 normal */
.apex-grid.layout-5 .quad-item:nth-child(-n + 3) {
  grid-column: span 2;
}

/* last 2 full width */
.apex-grid.layout-5 .quad-item:nth-child(4),
.apex-grid.layout-5 .quad-item:nth-child(5) {
  grid-column: span 3;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 991px) {

  .apex-grid,
  .apex-grid.layout-2,
  .apex-grid.layout-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {

  .apex-grid,
  .apex-grid.layout-2,
  .apex-grid.layout-5 {
    grid-template-columns: 1fr;
  }
}

/* ================= CARD ================= */

.quad-item {
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  transition: all 0.3s ease;
}

.quad-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* ================= ICON ================= */

.icon-gradient {
  width: 65px;
  height: 65px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 25px;
}

.blue-grad {
  background: var(--grad-blue);
  box-shadow: 0 8px 20px rgba(54, 44, 192, 0.25);
}

.red-grad {
  background: var(--grad-red);
  box-shadow: 0 8px 20px rgba(223, 66, 49, 0.25);
}

/* ================= TEXT ================= */

.text-content h4 {
  color: #222;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 15px;
  line-height: 1.4;
}

.text-content p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ================= SMALL DEVICES ================= */

@media (max-width: 768px) {
  .apex-why-section {
    padding: 60px 0;
  }

  .quad-item {
    padding: 28px;
  }

  .icon-gradient {
    width: 55px;
    height: 55px;
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

/* ---------------------------------------------------- Why Oracle APEX for Government Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Our Government Solution Section CSS Start ------------------------------------------------ */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --card-bg: #ffffff;
  --text-muted: #666666;
}

.bento-solutions-section {
  padding: 80px 0;
}

.bento-title {
  color: var(--brand-blue);
  font-weight: 800;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.bento-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Card Styling */
.bento-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 35px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid #e1e1e8;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* ========= GRADIENT BORDER ANIMATION ========= */

/* invisible gradient line */
.bento-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 0%;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-red));
  border-radius: 20px 0 0 20px;
  transition: height 0.45s ease;
}

/* hover pe top to bottom draw */
.bento-card:hover::after {
  height: 100%;
}

/* ============================================== */

.bento-icon {
  font-size: 2rem;
  min-width: 50px;
  transition: transform 0.3s ease;
}

.bento-blue .bento-icon {
  color: var(--brand-blue);
}

.bento-red .bento-icon {
  color: var(--brand-red);
}

.bento-body h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.bento-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Hover effect only lift */
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Icon thoda zoom */
.bento-card:hover .bento-icon {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 991px) {
  .bento-card {
    padding: 25px;
  }
}

@media (max-width: 767px) {
  .bento-card {
    flex-direction: column;
    gap: 10px;
  }
}

/* ---------------------------------------------------- Our Government Solution Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Key Benefits & ROI Section CSS Start ------------------------------------------------ */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
}

.roi-responsive-hub {
  padding: 80px 0;
  background: #f0f0f0;
  overflow: hidden;
}

/* Desktop Hub Styling */
.hub-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.ring {
  position: absolute;
  border: 1px dashed rgba(54, 44, 192, 0.2);
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

.ring-1 {
  width: 280px;
  height: 280px;
}

.ring-2 {
  width: 420px;
  height: 420px;
  animation-direction: reverse;
  animation-duration: 30s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hub-core {
  width: 120px;
  height: 120px;
  background: var(--brand-blue);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 10;
  position: relative;
  box-shadow: 0 0 30px rgba(54, 44, 192, 0.4);
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--brand-blue);
  opacity: 0.5;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.stat-float {
  position: absolute;
  z-index: 15;
  animation: float 4s ease-in-out infinite;
}

.orbit-card {
  background: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
  text-align: center;
  min-width: 120px;
}

.orbit-card h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.orbit-card p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #666;
}

/* Desktop Positions */
.sf-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.sf-2 {
  top: 10%;
  right: 5%;
  animation-delay: 1s;
}

.sf-3 {
  bottom: 10%;
  left: 5%;
  animation-delay: 2s;
}

.sf-4 {
  bottom: 10%;
  right: 5%;
  animation-delay: 3s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Right Content List */
.feature-line {
  display: flex;
  gap: 20px;
  padding-bottom: 25px;
  position: relative;
}

.f-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.dot-blue {
  background: var(--brand-blue);
}

.dot-red {
  background: var(--brand-red);
}

.f-content h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 5px;
}

.f-content p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* =============================================
   RESPONSIVE QUERIES
   ============================================= */

/* Tablet View (1024px to 768px) */
@media (max-width: 1024px) {
  .hub-wrapper {
    transform: scale(0.8);
    height: 400px;
  }

  .sf-1,
  .sf-3 {
    left: 0%;
  }

  .sf-2,
  .sf-4 {
    right: 0%;
  }
}

/* Mobile View (Below 768px) */
@media (max-width: 767px) {
  .roi-responsive-hub {
    padding: 50px 0;
  }

  /* Animation scale down for mobile */
  .hub-wrapper {
    height: 320px;
    transform: scale(0.7);
    margin-bottom: -30px;
  }

  /* Reposition cards for small screens so they don't go off-screen */
  .sf-1 {
    top: 0;
    left: 0;
  }

  .sf-2 {
    top: 0;
    right: 0;
  }

  .sf-3 {
    bottom: 0;
    left: 0;
  }

  .sf-4 {
    bottom: 0;
    right: 0;
  }

  .hub-title {
    font-size: 1.8rem;
  }

  .f-content h4 {
    font-size: 1.1rem;
  }

  .f-content p {
    font-size: 0.9rem;
  }
}

/* Extra Small Mobile (Below 480px) */
@media (max-width: 480px) {

  /* Layout change: If screen is too small, stack cards instead of floating */
  .hub-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: auto;
    transform: none;
    margin-bottom: 40px;
  }

  /* Hide decorative rings on very small screens to save space */
  .ring,
  .hub-core,
  .pulse-ring {
    display: none;
  }

  .stat-float {
    position: relative;
    animation: none;
  }

  .orbit-card {
    min-width: unset;
    width: 100%;
    padding: 15px 10px;
  }
}

/* ---------------------------------------------------- Key Benefits & ROI Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Case Studies / Success Stories Section CSS Start ------------------------------------------------ */

/* ================= ROOT VARIABLES ================= */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-main: #1a202c;
  --text-muted: #4a5568;
  --bg-light: #f4f6fb;
}

/* ================= SECTION ================= */

.case-studies-wrapper {
  padding: 100px 0;
  background: var(--bg-light);
}

/* ================= STACK SPACING ================= */

.case-stack {
  display: flex;
  flex-direction: column;
  gap: 80px;
  /* proper section spacing */
}

/* ================= CARD ================= */

.case-item {
  display: flex;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  min-height: 420px;
}

.case-item.reverse {
  flex-direction: row-reverse;
}

/* ================= IMAGE ================= */

.case-image {
  width: 50%;
  height: 480px;
  /* FIXED SAME HEIGHT */
  position: relative;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* no distortion */
  display: block;
}

/* RIGHT IMAGE RADIUS */
.case-item:not(.reverse) .case-image img {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* LEFT IMAGE RADIUS */
.case-item.reverse .case-image img {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

/* ================= IMPACT BADGE ================= */

.impact-badge {
  position: absolute;
  bottom: 25px;
  left: 25px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 18px 24px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.impact-badge span {
  font-size: 34px;
  font-weight: 800;
}

.impact-badge small {
  display: block;
  font-size: 11px;
  margin-top: 5px;
}

/* ================= CONTENT ================= */

.case-info {
  width: 50%;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ================= FIXED TAG BADGE ================= */

.tag-label {
  display: inline-flex;
  /* important */
  align-items: center;
  justify-content: center;
  width: auto;
  /* no full width */
  max-width: fit-content;
  /* text jitna */
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  letter-spacing: 0.5px;
  color: #fff !important;
  white-space: nowrap;
  /* line break na ho */
  margin-bottom: 10px;
}

/* Blue */
.type-blue .tag-label {
  background: var(--brand-blue);
}

/* Red */
.type-red .tag-label {
  background: var(--brand-red);
}

.case-info h3 {
  font-size: 24px;
  margin-bottom: 16px;
  position: relative;
  font-weight: 600;
}

.case-info h3::after {
  content: "";
  width: 50px;
  height: 4px;
  background: var(--brand-blue);
  display: block;
  margin-top: 8px;
  border-radius: 4px;
}

.case-description {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ================= RESULTS BOX ================= */

.metrics-box {
  padding: 20px 25px;
  border-radius: 16px;
  font-size: 14px;
  background: #f6f7ff;
  border-left: 5px solid;
}

/* .type-blue .tag-label {
    color: var(--brand-blue);
} */

.type-blue .metrics-box {
  border-left-color: var(--brand-blue);
}

.type-red .tag-label {
  color: var(--brand-red);
}

.type-red .metrics-box {
  border-left-color: var(--brand-red);
}

/* ================= CTA / FEEDBACK ================= */

.case-cta-feedback {
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
}

.feedback-card {
  margin-top: 100px;
  padding: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 30px;
}

.feedback-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.feedback-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-quote {
  font-size: 18px;
  line-height: 1.7;
}

.feedback-author {
  display: block;
  margin-top: 15px;
  font-weight: 700;
  color: #fff;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {

  .case-item,
  .case-item.reverse {
    flex-direction: column;
  }

  .case-image,
  .case-info {
    width: 100%;
  }

  .case-image {
    height: 280px;
  }

  .case-info {
    padding: 35px;
  }

  .feedback-card {
    flex-direction: column;
    text-align: center;
    padding: 40px;
  }
}

/* ---------------------------------------------------- Case Studies / Success Stories Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Industry-4 Case Studies / Success Stories Section CSS Start ------------------------------------------------ */

/* ===============================
   CASE STUDIES / SUCCESS STORIES
   =============================== */

.csr-section {
  padding: 100px 0;
  background: #f4f6fb;
}

/* container */
.csr-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* grid layout */
.csr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* card */
.csr-item {
  background: #fff;
  padding: 38px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.35s ease;
  overflow: hidden;
}

/* left color bar */
.csr-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  border-radius: 18px 0 0 18px;
}

/* theme colors */
.csr-blue::before {
  background: #362cc0;
}

.csr-red::before {
  background: #df4231;
}

/* hover effect */
.csr-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.12);
}

/* ================= ICON BADGE ================= */

.csr-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
  background: #eef0ff;
  color: #362cc0;
  transition: 0.3s;
}

.csr-red .csr-icon {
  background: #ffeceb;
  color: #df4231;
}

/* icon hover animation */
.csr-item:hover .csr-icon {
  transform: scale(1.12) rotate(6deg);
}

/* ================= TEXT ================= */

.csr-item h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a202c;
}

.csr-item p {
  color: #4a5568;
  line-height: 1.7;
  font-size: 15px;
}

/* ================= RESPONSIVE ================= */

/* laptop */
@media (max-width: 1100px) {
  .csr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* tablet */
@media (max-width: 768px) {
  .csr-section {
    padding: 70px 0;
  }

  .csr-header h2 {
    font-size: 28px;
  }

  .csr-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .csr-item {
    padding: 28px;
    text-align: center;
  }

  .csr-item::before {
    display: none;
  }

  .csr-icon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* mobile small */
@media (max-width: 480px) {
  .csr-container {
    padding: 0 15px;
  }

  .csr-header h2 {
    font-size: 24px;
  }

  .csr-item h3 {
    font-size: 20px;
  }

  .csr-item p {
    font-size: 14px;
  }
}

/* ---------------------------------------------------- Industry-4 Case Studies / Success Stories Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Our Approach & Methodology Section CSS Start ------------------------------------------------ */

/* Tavish Infotech - Full Methodology Section CSS */
:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-dark: #1a202c;
  --text-muted: #4a5568;
  --bg-gray: #f3f3f3;
  --white: #ffffff;
}

.methodology-section {
  padding: 100px 0;
  background-color: #f0f0f0;
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

/* Header Styling */
.header-area {
  margin-bottom: 70px;
  padding-left: 100px;
}

.sub-heading {
  color: var(--brand-red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.main-heading {
  color: var(--brand-blue);
  font-weight: 800;
  font-size: 2.6rem;
  max-width: 850px;
  line-height: 1.2;
}

/* Timeline Wrapper */
.timeline-wrapper {
  position: relative;
}

.timeline-row {
  display: flex;
  align-items: center;
  /* Circle aur Card hamesha vertically center rahenge */
  position: relative;
  margin-bottom: 0;
}

/* Vertical Line System */
.timeline-left {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  /* Line ko card ki height ke barabar stretch karta hai */
  position: relative;
}

.step-circle {
  width: 58px;
  height: 58px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  z-index: 10;
  flex-shrink: 0;
  margin: auto 0;
  /* Alignment fix: Circle ko row ke center mein rakhta hai */
  transition: all 0.4s ease;
}

.step-icon-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
}

/* Responsive Vertical Line Logic */
.v-line {
  width: 3px;
  background-color: var(--brand-blue);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  /* Current row ke center se start */
  height: 100%;
  /* Agle row ke center tak stretch */
  z-index: 1;
}

.timeline-row:last-child .v-line {
  display: none;
}

/* Horizontal Connector */
.h-connector {
  width: 45px;
  height: 3px;
  flex-shrink: 0;
  z-index: 2;
}

/* Content Card Styling */
.timeline-right {
  flex-grow: 1;
  padding: 25px 0;
}

.step-card {
  background: var(--white);
  border-radius: 20px;
  padding: 35px;
  display: flex;
  align-items: flex-start;
  gap: 25px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  margin-left: -2px;
  cursor: pointer;

  /* Hover Animation Base */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

/* Icon inside Card */
.card-icon {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

/* --- HOVER ANIMATIONS --- */

/* 1. Card Lift & Slide */
.step-card:hover {
  transform: translateX(15px) translateY(-8px);
  box-shadow: 0 25px 50px rgba(54, 44, 192, 0.1);
  border-color: rgba(54, 44, 192, 0.2);
}

/* 2. Card Icon Zoom & Rotate */
.step-card:hover .card-icon {
  transform: scale(1.15) rotate(8deg);
}

/* 3. Text Color Change */
.step-card:hover .card-text h4 {
  color: var(--brand-blue);
}

/* 4. Timeline Circle Pulse */
.timeline-row:hover .step-circle {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(54, 44, 192, 0.3);
}

/* Card Text Styling */
.card-text h4 {
  margin: 0 0 12px 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.card-text p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Color Palette Helpers */
.blue-outer {
  border-color: var(--brand-blue);
}

.red-outer {
  border-color: var(--brand-red);
}

.blue-bg {
  background-color: var(--brand-blue);
}

.red-bg {
  background-color: var(--brand-red);
}

.blue-light-bg {
  background-color: rgba(54, 44, 192, 0.08);
}

.red-light-bg {
  background-color: rgba(223, 66, 49, 0.08);
}

.blue-text {
  color: var(--brand-blue);
}

.red-text {
  color: var(--brand-red);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {

  .header-area,
  .timeline-wrapper {
    margin-left: 40px;
  }

  .main-heading {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .header-area {
    padding-left: 0;
    margin-left: 20px;
  }

  .timeline-wrapper {
    margin-left: 15px;
    padding-right: 15px;
  }

  .timeline-row {
    align-items: flex-start;
  }

  .h-connector {
    width: 15px;
    margin-top: 40px;
  }

  .v-line {
    top: 45px;
    height: calc(100% + 20px);
  }

  .step-circle {
    margin-top: 15px;
    width: 48px;
    height: 48px;
  }

  .step-icon-inner {
    width: 34px;
    height: 34px;
  }

  .step-card {
    padding: 25px;
    flex-direction: column;
    gap: 15px;
  }

  .step-card:hover {
    transform: translateY(-8px);
  }

  /* No X-slide on mobile */
}

/* ---------------------------------------------------- Our Approach & Methodology Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Why Choose Tavish Infotech Section CSS Start ------------------------------------------------ */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --dark: #1e293b;
  --gray: #64748b;
}

/* ============================= */
/* SECTION */
/* ============================= */

.why-final-layout {
  padding: 100px 20px;
  background: linear-gradient(135deg, #f4f6ff, #eef2ff);
  font-family: "Inter", sans-serif;
}

/* ============================= */
/* GRID LAYOUT */
/* ============================= */

.final-grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
}

/* ============================= */
/* BOX */
/* ============================= */

.grid-box {
  padding: 45px;
  background: #ffffff;
  border: 1px solid #e4e8ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.grid-box:hover {
  background: linear-gradient(145deg, #ffffff, #f3f5ff);
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.15);
  transform: translateY(-5px);
  z-index: 2;
}

/* ============================= */
/* IMAGE */
/* ============================= */

.image-box {
  padding: 0;
  min-height: 340px;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================= */
/* ICON */
/* ============================= */

.icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #ffffff;
}

.icon.blue {
  background: linear-gradient(135deg, var(--brand-blue), #6a5acd);
}

.icon.red {
  background: linear-gradient(135deg, var(--brand-red), #ff6b6b);
}

/* ============================= */
/* TEXT */
/* ============================= */

.grid-box h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--dark);
}

.grid-box p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray);
}

/* ============================= */
/* SERVICE LIST */
/* ============================= */

.grid-box ul {
  margin-top: 15px;
  padding: 0;
  list-style: none;
}

.grid-box ul li {
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-box ul li i {
  color: var(--brand-blue);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

/* Large tablets (1024px issue fixed here) */
@media (max-width: 1199px) {
  .final-grid {
    grid-template-columns: 50% 50%;
  }
}

/* Tablets */
@media (max-width: 991px) {
  .final-grid {
    grid-template-columns: 1fr;
  }

  .image-box {
    min-height: 280px;
  }

  .grid-box {
    padding: 30px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .image-box {
    min-height: 220px;
  }

  .grid-box h3 {
    font-size: 1.1rem;
  }

  .grid-box p {
    font-size: 0.88rem;
  }
}

/* ---------------------------------------------------- Why Choose Tavish Infotech Section CSS End ------------------------------------------------ */

/* ----------------------------------------------------Indusrty-4 Why Choose Tavish Infotech Section CSS End ------------------------------------------------ */

/* ===== BRAND VARIABLES ===== */
:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --brand-dark: #1e293b;
  --brand-gray: #64748b;
  --brand-bg: #f4f6ff;
}

/* ===== SECTION ===== */
.ti-why-section {
  padding: 90px 20px;
  background: linear-gradient(135deg, #f4f6ff, #eef2ff);
  font-family: Inter, sans-serif;
}

.ti-container {
  max-width: 1200px;
  margin: auto;
}

/* ===== HEADER ===== */
.ti-header {
  text-align: center;
  margin-bottom: 60px;
}

.ti-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 10px;
}

.ti-header p {
  color: var(--brand-gray);
  font-size: 16px;
}

/* ===== GRID ===== */
.ti-why-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* ===== CARD ===== */
.ti-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e4e8ff;
  transition: 0.35s;
  position: relative;
}

.ti-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(54, 44, 192, 0.18);
  border-color: rgba(54, 44, 192, 0.25);
}

/* ===== ICON ===== */
.ti-icon {
  min-width: 58px;
  height: 58px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), #6a5acd);
}

/* alternate red cards */
.ti-card:nth-child(even) .ti-icon {
  background: linear-gradient(135deg, var(--brand-red), #ff6b6b);
}

/* ===== TEXT ===== */
.ti-content h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--brand-dark);
}

.ti-content p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--brand-gray);
}

/* ===== TABLET ===== */
@media (max-width: 992px) {
  .ti-why-wrapper {
    grid-template-columns: 1fr;
  }

  .ti-header h2 {
    font-size: 30px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {
  .ti-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .ti-icon {
    margin-bottom: 10px;
  }

  .ti-header h2 {
    font-size: 26px;
  }

  .ti-content h3 {
    font-size: 16px;
  }

  .ti-content p {
    font-size: 13px;
  }
}

/* ----------------------------------------------------Indusrty-4 Why Choose Tavish Infotech Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Frequently Asked Questions Section CSS Start ------------------------------------------------ */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --text-dark: #1e293b;
  --text-gray: #475569;
}

.faq-section {
  padding: 100px 0;
  background-color: #f0f0f0;
}

.faq-header {
  margin-bottom: 60px;
}

.faq-tag {
  color: var(--brand-red);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.faq-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 10px 0;
}

.blue-text {
  color: var(--brand-blue);
}

.faq-subtitle {
  color: var(--text-gray);
  font-size: 1.1rem;
}

/* FAQ Wrapper */
.faq-wrapper {
  /* max-width: 900px; */
  margin: 0 auto;
}

.faq-item {
  background: #ffffff;
  border-radius: 15px;
  margin-bottom: 15px;
  border: 1px solid rgba(54, 44, 192, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 10px 25px rgba(54, 44, 192, 0.05);
  border-color: var(--brand-blue);
}

/* Accordion Button */
.faq-question {
  width: 100%;
  padding: 25px 30px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s ease;
}

.faq-question i {
  font-size: 1rem;
  color: var(--brand-blue);
  transition: transform 0.3s ease;
}

/* Open State Styling */
.faq-item.active {
  border-color: var(--brand-blue);
  box-shadow: 0 15px 35px rgba(54, 44, 192, 0.1);
}

.faq-item.active .faq-question {
  color: var(--brand-blue);
}

.faq-item.active .faq-question i {
  transform: rotate(45deg);
  color: var(--brand-red);
}

/* Answer Content */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0, 1, 0, 1);
  background: #ffffff;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
  transition: all 0.3s cubic-bezier(1, 0, 1, 0);
}

.faq-answer p {
  padding: 0 30px 25px 30px;
  color: var(--text-gray);
  line-height: 1.8;
  margin: 0;
  font-size: 1.05rem;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-header h2 {
    font-size: 2rem;
  }

  .faq-question {
    padding: 20px;
    font-size: 1.05rem;
  }

  .faq-answer p {
    padding: 0 20px 20px 20px;
  }
}

/* ---------------------------------------------------- Frequently Asked Questions Section CSS End ------------------------------------------------ */

/* ---------------------------------------------------- Call-to-Action Section Section CSS Start ------------------------------------------------ */

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --dark-deep: #0f172a;
}

.cta-high-tech {
  background: radial-gradient(circle at top left, #1e293b, var(--dark-deep));
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

/* Background Tech Effect */
.cta-high-tech::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
  opacity: 0.1;
  pointer-events: none;
}

.cta-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 5;
}

.cta-main-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
}

/* Left Content */
.cta-tag {
  background: var(--brand-red);
  color: white;
  padding: 6px 15px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(223, 66, 49, 0.4);
}

.cta-headline {
  color: white;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-headline span {
  background: linear-gradient(to right, #60efff, #00ff87);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-para {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.cta-highlight-text {
  color: #fbbf24;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 35px;
}

/* Buttons */
.cta-btns {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-consult {
  background: var(--brand-red);
  color: white;
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(223, 66, 49, 0.2);
}

.btn-case {
  background: var(--brand-blue);
  color: white;
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(54, 44, 192, 0.2);
}

.btn-demo {
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--brand-red);
}

.btn-consult:hover,
.btn-case:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Right Side: Glass Design */
.cta-right {
  flex-shrink: 0;
}

.glass-image-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  width: 450px;
  position: relative;
}

.oracle-partner-top {
  background: white;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  margin-bottom: 20px;
  border: 2px solid var(--brand-red);
}

.oracle-logo-img {
  width: 120px;
}

.oracle-partner-top p {
  color: #333;
  margin: 5px 0 0;
  font-weight: 800;
  font-size: 0.8rem;
}

.main-visual-img {
  width: 100%;
  border-radius: 20px;
  height: 250px;
  object-fit: cover;
  filter: brightness(0.8);
}

.glass-footer {
  padding-top: 20px;
  text-align: center;
  color: #fbbf24;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pulse-dot {
  height: 8px;
  width: 8px;
  background-color: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 10px #fbbf24;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .cta-main-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .cta-btns {
    justify-content: center;
  }

  .cta-left {
    max-width: 100%;
  }

  .glass-image-container {
    width: 100%;
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .cta-headline {
    font-size: 2.2rem;
  }

  .btn-consult,
  .btn-case {
    width: 100%;
  }
}

/* ---------------------------------------------------- Call-to-Action Section Section CSS End ------------------------------------------------ */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Government Industries Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Hire and Talent Page CSS Start        ===============================
                       ===============================================================

**********************************************************************************************************************/

:root {
  --brand-blue: #362cc0;
  --brand-red: #df4231;
  --white: #ffffff;
}

/* =========================================================
   HERO SECTION
========================================================= */

.oracle-hero-modern {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-main-bg {
  background: url("https://img.freepik.com/premium-photo/coworking-office-portrait-creative-teamwork-cooperation-project-with-help-group-collaboration-employees-desk-editing-news-article-planning-magazine-media-with-research_590464-348850.jpg?ga=GA1.1.694334482.1771299767&semt=ais_hybrid&w=740&q=80");
  background-size: cover;
  /* background-position: center; */
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 120px 0 80px;
}

/* OVERLAY */
.brand-glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
      rgba(54, 44, 192, 0.95) 0%,
      rgba(54, 44, 192, 0.8) 20%,
      rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}

.oracle-hero-modern .container,
.oracle-hero-modern .row {
  height: auto !important;
}

/* CONTENT */
.content-wrapper {
  position: relative;
  z-index: 5;
  padding: 0;
  /* max-width: 720px; */
}

/* BADGE */
.top-accent-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-red);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(223, 66, 49, 0.3);
}

/* TITLE */
.main-display-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 25px;
}

/* DESC */
.hero-description-hire {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 650px;
  /* margin-bottom: 40px; */
  line-height: 1.6;
  margin: 0 auto 40px auto;
}

/* FEATURES */
.feature-inline-list {
  display: flex;
  gap: 20px;
  margin-bottom: 45px;
  flex-wrap: wrap;
  justify-content: center;
}

.feat-pill {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--white);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.feat-pill i {
  color: #ff9187;
  margin-right: 8px;
}

/* CTA */
.cta-action-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-premium-action {
  background: var(--white);
  color: var(--brand-blue) !important;
  padding: 20px 45px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none !important;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-premium-action:hover {
  background: var(--brand-red);
  color: var(--white) !important;
  transform: translateY(-5px);
}

.savings-capsule {
  background: var(--brand-red);
  color: var(--white);
  padding: 10px 25px;
  border-radius: 12px;
  text-align: center;
}

.cap-small {
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.cap-big {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

/* =========================================================
   EXPERIENCE (UPDATED PREMIUM 10+)
========================================================= */

.experience-ribbon {
  display: flex;
  align-items: center;
  gap: 35px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
  justify-content: center;
}

.ribbon-box {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ribbon-num {
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffb3a9, #ff6a55);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
  position: relative;
}

.ribbon-txt {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  opacity: 0.95;
}

.models-list {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.models-list span {
  color: var(--white);
  font-weight: 700;
}

/* MOBILE */
@media (max-width: 991px) {
  .hero-main-bg {
    padding: 140px 20px 90px;
    text-align: center;
  }

  .content-wrapper {
    margin: auto;
  }

  .feature-inline-list,
  .cta-action-row,
  .experience-ribbon {
    justify-content: center;
    align-items: center;
  }

  .main-display-title {
    font-size: 2.6rem;
  }

  .hero-description-hire {
    font-size: 1.05rem;
  }

  .ribbon-num {
    font-size: 46px;
  }
}

/* --------------------------------------------------------------- Hero Section CSS End ---------------------------------------------------------------- */

/* --------------------------------------------------------------- Trusted Oracle Development Section CSS Start ---------------------------------------------------------------- */
:root {
  --blue: #362cc0;
  --red: #df4231;
  --text: #1e293b;
  --muted: #64748b;
  --bg: #f8faff;
}

/* SECTION */
.gp4-section {
  padding: 100px 0px;
  background: var(--bg);
}

.gp4-container {
  /* max-width: 1100px; */
  margin: auto;
}

/* HEADER */
.gp4-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 70px;
}

.gp4-intro h2 {
  font-size: 42px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 18px;
}

.gp4-intro p {
  color: var(--muted);
  line-height: 1.8;
}

/* GRID */
.gp4-regions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* CARD */
.gp4-card {
  padding: 30px 32px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
  height: 100%;
}

.gp4-card h3 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.gp4-card p {
  color: #475569;
  line-height: 1.75;
}

/* BRAND STYLE */
.gp4-card.blue {
  border-top: 4px solid var(--blue);
  background: linear-gradient(145deg, rgba(54, 44, 192, 0.06), white);
}

.gp4-card.red {
  border-top: 4px solid var(--red);
  background: linear-gradient(145deg, rgba(223, 66, 49, 0.06), white);
}

.gp4-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

/* BADGE */
.country-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 6px 11px;
  border-radius: 50px;
  margin-right: 10px;
}

.country-badge.blue {
  color: var(--blue);
  background: rgba(54, 44, 192, 0.12);
  border: 1px solid rgba(54, 44, 192, 0.35);
  box-shadow: 0 4px 14px rgba(54, 44, 192, 0.18);
}

.country-badge.red {
  color: var(--red);
  background: rgba(223, 66, 49, 0.12);
  border: 1px solid rgba(223, 66, 49, 0.35);
  box-shadow: 0 4px 14px rgba(223, 66, 49, 0.18);
}

/* FINAL BLOCK */
.gp4-global {
  margin-top: 70px;
  padding: 30px 34px;
  border-radius: 18px;
  background: linear-gradient(90deg,
      rgba(54, 44, 192, 0.12),
      rgba(223, 66, 49, 0.12));
  font-weight: 500;
  color: #1f2937;
  text-align: center;
  line-height: 1.8;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .gp4-regions {
    grid-template-columns: 1fr;
  }

  .gp4-intro h2 {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------- Trusted Oracle Development Section CSS End ---------------------------------------------------------------- */

/* --------------------------------------------------------------- Why Hire Oracle Developers from Tavish Infortech? Section CSS Start ---------------------------------------------------------------- */

:root {
  --blue: #362cc0;
  --red: #df4231;
  --text: #1e293b;
  --muted: #64748b;
}

/* SECTION */
.why2-section {
  padding: 100px 0px;
  background: #f0f0f0;
}

.why2-container {
  max-width: 900px;
  margin: auto;
}

/* HEADER */
.why2-header {
  text-align: center;
  margin-bottom: 70px;
}

.why2-header h2 {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 15px;
}

.why2-header p {
  color: var(--muted);
  line-height: 1.8;
}

/* TIMELINE */
.why2-timeline {
  position: relative;
  padding-left: 48px;
}

/* STATIC LINE */
.why2-timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(var(--blue), var(--red));
  opacity: 0.25;
}

/* MOVING DOT */
.why2-timeline::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(var(--blue), var(--red));
  box-shadow: 0 0 12px rgba(54, 44, 192, 0.6);
  animation: travel 6s linear infinite;
}

@keyframes travel {
  0% {
    top: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ITEM */
.why2-item {
  position: relative;
  margin-bottom: 55px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: 0.35s;
}

/* ICON */
.why2-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 15px;
  z-index: 2;
  transition: 0.35s;
}

.why2-item:nth-child(even) .why2-icon {
  border-color: var(--red);
  color: var(--red);
}

/* CONTENT */
.why2-content {
  padding: 14px 18px;
  border-radius: 12px;
  transition: 0.35s;
}

.why2-content h3 {
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--text);
  transition: 0.3s;
}

.why2-content p {
  color: #475569;
  line-height: 1.7;
}

/* HOVER EFFECT */
.why2-item:hover .why2-content {
  background: white;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  transform: translateY(-6px);
}

/* ICON PULSE */
.why2-item:hover .why2-icon {
  transform: scale(1.15);
  box-shadow: 0 0 0 8px rgba(54, 44, 192, 0.15);
}

.why2-item:nth-child(even):hover .why2-icon {
  box-shadow: 0 0 0 8px rgba(223, 66, 49, 0.15);
}

/* TITLE COLOR SHIFT */
.why2-item:hover h3 {
  color: var(--blue);
}

.why2-item:nth-child(even):hover h3 {
  color: var(--red);
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .why2-header h2 {
    font-size: 28px;
  }

  .why2-timeline {
    padding-left: 36px;
  }

  .why2-section {
    padding: 90px 18px;
  }
}

/* --------------------------------------------------------------- Why Hire Oracle Developers from Tavish Infortech? Section CSS End ---------------------------------------------------------------- */

/* --------------------------------------------------------------- End-to-End Oracle Development Section CSS Start ---------------------------------------------------------------- */

:root {
  --blue: #362cc0;
  --red: #df4231;
  --muted: #64748b;
}

/* layout */
.oracle-services {
  padding: 100px 0px;
  background: #f4f6fb;
}

.os-container {
  margin: auto;
}

.os-header {
  text-align: center;
  margin-bottom: 70px;
}

.os-header p {
  color: var(--muted);
}

.os-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
}

/* left menu */
.os-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.os-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-radius: 12px;
  border: none;
  background: #e3e6fd;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
}

.os-tab i {
  color: var(--blue);
}

.os-tab:hover {
  background: #e8e9ff;
}

.os-tab.active {
  background: linear-gradient(90deg, var(--blue), var(--red));
  color: #fff;
}

.os-tab.active i {
  color: #fff;
}

/* content panel */
.os-content {
  background: #f8faff;
  padding: 45px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* panel */
.os-panel {
  display: none;
}

.os-panel.active {
  display: block;
}

.os-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  margin-bottom: 10px;
}

.os-title i {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(54, 44, 192, 0.12);
  color: var(--blue);
}

.os-desc {
  color: #475569;
  margin-bottom: 18px;
}

/* features */
.os-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.os-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.os-features i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(223, 66, 49, 0.12);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* tags */
.os-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.os-tags span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 50px;
  background: rgba(54, 44, 192, 0.1);
  color: var(--blue);
  font-weight: 600;
}

/* cta */
.os-cta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.os-cta a {
  text-decoration: none;
  font-weight: 700;
  color: var(--blue);
}

.os-cta a i {
  margin-left: 6px;
  transition: 0.3s;
}

.os-cta a:hover i {
  transform: translateX(5px);
}

/* responsive */
@media (max-width: 900px) {
  .os-layout {
    grid-template-columns: 1fr;
  }

  .os-menu {
    flex-direction: row;
    overflow: auto;
  }

  .os-tab {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------- End-to-End Oracle Development Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Flexible Engagement Models Section CSS Start ------------------------------------------------------- */
/* ================= SECTION ================= */
.eng-journey {
  padding: 100px 0px;
  background: #f0f0f0;
}

.ej-container {
  max-width: 1100px;
  margin: auto;
}

.ej-header {
  text-align: center;
  margin-bottom: 80px;
}

.ej-header h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #1e293b;
}

.ej-header p {
  color: #64748b;
}

/* ================= TRACK LINE ================= */
.ej-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.ej-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  height: 4px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  opacity: 0.25;
}

/* ================= STEP ================= */
.ej-step {
  position: relative;
  text-align: center;
  width: 100%;
}

/* NODE */
.ej-node {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: auto;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  color: #362cc0;
  transition: 0.35s;
  position: relative;
}

/* node halo */
.ej-node::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 44, 192, 0.18), transparent 70%);
  opacity: 0;
  transition: 0.35s;
}

.ej-step:hover .ej-node {
  transform: scale(1.15);
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
}

.ej-step:hover .ej-node::after {
  opacity: 1;
}

/* ================= CARD ================= */
.ej-info {
  position: relative;
  margin-top: 22px;
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
  overflow: hidden;
}

/* gradient bottom accent */
.ej-info::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  opacity: 0.25;
  transition: 0.35s;
}

.ej-step:hover .ej-info {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
}

.ej-step:hover .ej-info::after {
  height: 4px;
  opacity: 1;
}

/* TEXT */
.ej-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #1e293b;
}

.ej-info p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* ================= HIGHLIGHT MODEL ================= */
.ej-step.highlight .ej-node {
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
  transform: scale(1.15);
}

.ej-step.highlight .ej-info {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.9),
      rgba(245, 247, 255, 0.9));
  box-shadow: 0 30px 80px rgba(54, 44, 192, 0.18);
}

.ej-step.highlight .ej-info::after {
  height: 4px;
  opacity: 1;
}

/* ================= CTA ================= */
.ej-cta {
  margin-top: 90px;
  text-align: center;
  font-weight: 600;
  color: #1e293b;
}

.ej-cta a {
  margin-left: 14px;
  padding: 12px 26px;
  border-radius: 50px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  color: #fff;
  text-decoration: none;
  transition: 0.25s;
}

.ej-cta a:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(54, 44, 192, 0.35);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .ej-track {
    flex-direction: column;
    gap: 60px;
  }

  .ej-track::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: auto;
  }
}

@media (max-width: 600px) {
  .eng-journey {
    padding: 90px 16px;
  }

  .ej-header h2 {
    font-size: 28px;
  }

  .ej-node {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
}

/* --------------------------------------------------------------- Flexible Engagement Models Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Simple 4-Step Process Section CSS Start ------------------------------------------------------- */
:root {
  --primary: #362cc0;
  --secondary: #df4231;
  --dark: #1e293b;
  --text: #64748b;
  --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}

/* SECTION */
.premium-process {
  padding: 100px 0px;
  background-color: #f0f0f0;
}

.pp-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* TITLE */
.pp-title {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 15px;
}

.pp-subtitle {
  text-align: center;
  color: var(--text);
  max-width: 700px;
  margin: 0 auto 100px;
  font-size: 18px;
  line-height: 1.6;
}

/* TIMELINE WRAPPER */
.pp-timeline-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
}

.pp-main-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  transform: translateY(-50%);
  z-index: 1;
}

.pp-timeline-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* TIMELINE ITEM */
.pp-item {
  width: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ICON DOT */
.pp-dot {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 0 8px #f8fafc;
  color: white;
  font-size: 22px;
  transition: 0.3s ease;
}

.pp-dot i {
  color: white;
}

.pp-item:hover .pp-dot {
  transform: scale(1.1);
  box-shadow:
    0 0 0 10px #f8fafc,
    0 0 20px rgba(54, 44, 192, 0.4);
}

/* CONNECTOR LINE */
.pp-connector {
  width: 2px;
  height: 70px;
  background: linear-gradient(to bottom, var(--primary), #cbd5e1);
}

.item-bottom .pp-connector {
  background: linear-gradient(to top, var(--primary), #cbd5e1);
}

/* CARD DESIGN */
.pp-card {
  background: var(--bg-gradient);
  padding: 30px 25px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  text-align: center;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid #ffffff;
}

.pp-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.1);
  border-color: var(--primary);
}

.pp-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 15px;
  line-height: 1.3;
}

.pp-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* TIME TAG */
.pp-time-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary);
  background: #fff1f0;
  padding: 6px 15px;
  border-radius: 50px;
}

/* ZIG-ZAG SPACING */
.item-top {
  justify-content: flex-end;
  margin-bottom: 220px;
}

.item-bottom {
  justify-content: flex-start;
  margin-top: 220px;
}

/* FOOTER PREMIUM BOX */

.pp-footer-info {
  margin-top: 120px;
  display: flex;
  justify-content: center;
}

/* MAIN BOX */
.pp-highlight-box {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 45px 55px;
  border-radius: 28px;
  color: white;
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

/* Decorative Shape */
.pp-highlight-box::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  bottom: -80px;
  right: -60px;
}

/* ICON BOX */
.pp-highlight-icon {
  width: 85px;
  height: 85px;
  min-width: 85px;
  background: white;
  color: var(--secondary);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* Heading */
.pp-highlight-content h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Highlight Badge */
.pp-highlight-content h3 span {
  background: white;
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Description */
.pp-highlight-content p {
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.95;
  max-width: 600px;
}

/* HOVER EFFECT */
.pp-highlight-box:hover {
  transform: translateY(-8px);
  transition: 0.4s ease;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .pp-timeline-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
  }

  .pp-item {
    width: 45%;
  }

  .pp-main-line {
    display: none;
  }

  .pp-connector {
    display: none;
  }

  .item-top,
  .item-bottom {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .pp-item {
    width: 100%;
  }

  .pp-title {
    font-size: 28px;
  }

  .pp-subtitle {
    font-size: 16px;
  }

  .pp-card {
    padding: 25px 20px;
  }

  .pp-highlight-box {
    flex-direction: column;
    text-align: center;
    padding: 35px;
  }

  .pp-highlight-icon {
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------- Simple 4-Step Process Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Advanced Oracle Technology Section CSS Start ------------------------------------------------------- */

:root {
  --primary: #362cc0;
  --secondary: #df4231;
  --dark: #1e293b;
  --text: #64748b;
}

body {
  margin: 0;
  padding: 0;
}

.oracle-stack-pro {
  padding: 100px 0px;
  background: linear-gradient(to bottom, #f8fafc, #eef2f7);
}

.osp-container {
  max-width: 1200px;
  margin: 0 auto;
}

.osp-header {
  text-align: center;
  margin-bottom: 100px;
}

.osp-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 15px;
}

.osp-header p {
  color: var(--text);
  font-size: 17px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Wrapper */
.osp-wrapper {
  position: relative;
  padding-left: 80px;
}

.osp-wrapper::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--primary), var(--secondary));
  border-radius: 10px;
}

/* Row */
.osp-row {
  display: grid;
  grid-template-columns: 260px 80px 1fr;
  align-items: center;
  margin-bottom: 90px;
}

/* Left */
.osp-left h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
}

/* Center */
.osp-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.osp-dot {
  width: 18px;
  height: 18px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px #f8fafc,
    0 0 20px rgba(223, 66, 49, 0.5);
}

/* Right Card */
.osp-right {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  padding: 28px 35px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  border-left: 5px solid var(--primary);
  transition: 0.35s ease;
}

.osp-right:hover {
  transform: translateY(-8px);
  border-left: 5px solid var(--secondary);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

/* Tags */
.osp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.osp-tags span {
  background: #eef2ff;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
  transition: 0.3s ease;
}

.osp-tags span:hover {
  background: var(--secondary);
  color: white;
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 992px) {
  .osp-wrapper {
    padding-left: 50px;
  }

  .osp-wrapper::before {
    left: 20px;
  }

  .osp-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 60px;
  }

  .osp-center {
    position: absolute;
    left: 12px;
    margin-top: 5px;
  }
}

/* --------------------------------------------------------------- Advanced Oracle Technology Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- The India Advantage Section CSS Start ------------------------------------------------------- */

.india-advantage-cards {
  padding: 100px 0px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}

.iac-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.iac-header {
  text-align: center;
  margin-bottom: 90px;
}

.iac-header h2 {
  font-size: 34px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
}

.iac-header p {
  font-size: 17px;
  color: #64748b;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid */
.iac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Card */
.iac-card {
  position: relative;
  padding: 50px 30px 35px 30px;
  background: white;
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06);
  transition: 0.35s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.iac-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.12);
}

/* Floating Icon */
.iac-icon {
  position: absolute;
  top: -25px;
  left: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  box-shadow: 0 15px 35px rgba(54, 44, 192, 0.3);
}

/* Title */
.iac-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1e293b;
}

/* Text */
.iac-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 1024px) {
  .iac-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .iac-grid {
    grid-template-columns: 1fr;
  }

  .iac-header h2 {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------- The India Advantage Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Transparent Pricing Section CSS Start ------------------------------------------------------- */

.oracle-pricing-final {
  padding: 100px 0;
  background: radial-gradient(circle at top left, #eef2ff, #f8fafc);
}

.opf-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Header */
.opf-header {
  margin-bottom: 100px;
}

.opf-header h2 {
  font-size: 40px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 15px;
}

.opf-sub {
  font-size: 18px;
  color: #df4231;
  font-weight: 600;
}

/* Grid */
.opf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-bottom: 120px;
}

/* Card */
.opf-card {
  position: relative;
  padding: 55px 40px;
  border-radius: 35px;
  background: white;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.08);
  transition: 0.4s ease;
}

.opf-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.15);
}

/* Featured */
.opf-featured {
  border: 2px solid #df4231;
  transform: scale(1.08);
}

.opf-badge {
  position: absolute;
  top: 20px;
  right: 25px;
  background: #df4231;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Card Icon */
.opf-icon {
  width: 75px;
  height: 75px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  box-shadow: 0 25px 50px rgba(54, 44, 192, 0.3);
}

/* Text */
.opf-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #1e293b;
}

.opf-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
}

/* Includes Section */
.opf-includes {
  background: white;
  padding: 70px;
  border-radius: 40px;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.08);
  margin-bottom: 80px;
}

.opf-includes h3 {
  font-size: 28px;
  margin-bottom: 50px;
  color: #1e293b;
}

/* Features */
.opf-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.opf-feature {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #ebebeb;
  padding: 20px 25px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.opf-feature i {
  color: #df4231;
  font-size: 18px;
  min-width: 20px;
}

.opf-feature span {
  font-size: 15px;
  color: #475569;
}

.opf-feature:hover {
  transform: translateY(-6px);
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

/* CTA */
.opf-btn {
  padding: 16px 45px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: white;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
  display: inline-block;
}

.opf-btn:hover {
  opacity: 0.85;
}

/* SECTION WRAP */
.cta-modern-wrap {
  padding: 90px 20px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 35px;
  margin: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Container */
.cta-modern-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Row Layout */
.cta-modern-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Left */
.cta-modern-left {
  flex: 1;
}

/* Heading */
.cta-modern-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Right */
.cta-modern-right {
  flex-shrink: 0;
}

/* Decorative glow effect */
.cta-modern-wrap::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  top: -100px;
  right: -100px;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-modern-row {
    flex-direction: column;
    text-align: center;
  }

  .cta-modern-title {
    font-size: 26px;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .opf-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .opf-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .opf-grid {
    grid-template-columns: 1fr;
  }

  .opf-featured {
    transform: none;
  }

  .opf-header h2 {
    font-size: 26px;
  }

  .opf-includes {
    padding: 40px 25px;
  }
}

/* --------------------------------------------------------------- Transparent Pricing Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Hire Dedicated Tech Experts Section CSS Start ------------------------------------------------------- */

.experts-premium-2x2 {
  padding: 100px 0px;
  background: #ffffff;
}

.ep-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.ep-header {
  text-align: center;
  margin-bottom: 100px;
}

.ep-header h2 {
  font-size: 40px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 20px;
}

.ep-header p {
  font-size: 17px;
  color: #64748b;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Grid 2x2 */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

/* Card */
.ep-card {
  background: white;
  padding: 30px;
  border-radius: 35px;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.08);
  transition: 0.4s ease;
}

/* Gradient Border Effect */
.ep-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 35px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ep-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.15);
}

/* Icon */
.ep-icon {
  width: 85px;
  height: 85px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  box-shadow: 0 30px 70px rgba(54, 44, 192, 0.3);
}

/* Title */
.ep-card h3 {
  font-size: 22px;
  margin-bottom: 18px;
  color: #1e293b;
}

/* Text */
.ep-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 992px) {
  .ep-grid {
    grid-template-columns: 1fr;
  }

  .ep-header h2 {
    font-size: 28px;
  }
}

/* --------------------------------------------------------------- Hire Dedicated Tech Experts Section CSS End ------------------------------------------------------- */

/* --------------------------------------------------------------- Transform Your Business Section CSS Start ------------------------------------------------------- */

.cta-premium-compact {
  padding: 70px 20px;
  /* Compact height */
  background: linear-gradient(135deg, #2d1fd3, #df4231);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Subtle Glow */
.cta-premium-compact::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.08),
      transparent 70%);
  top: -120px;
  right: -120px;
}

/* Container */
.cta-container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.transform-heading {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  margin: 0;
  color: #fff;
  line-height: 1.2;
}

.transform-subheading {
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  margin-top: 15px;
  letter-spacing: 0.5px;
}

/* Heading */
/* .cta-top h2 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 12px;
} */

/* .cta-top p {
  font-size: 15px;
  max-width: 700px;
  margin: 0 auto 35px;
  opacity: 0.9;
} */

/* Grid */
.cta-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 30px;
  margin-bottom: 35px;
  text-align: left;
}

/* Feature Item */
.cta-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.12);
  padding: 16px 18px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: 0.3s ease;
}

.cta-feature-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
}

/* Icon Box */
.icon-box {
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box i {
  font-size: 16px;
  color: #2d1fd3;
}

.cta-action {
  display: flex;
  justify-content: end;
}

/* Text */
.cta-feature-item h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.cta-feature-item p {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-feature-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-feature-item {
    justify-content: center;
  }

  .cta-top h2 {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------- Transform Your Business Section CSS End ------------------------------------------------------- */

/* *******************************************************************************************************************
                       ===============================================================
        =============================      Hire and Talent Page CSS End        ===============================
                       ===============================================================

**********************************************************************************************************************/

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Forms Moderization Page CSS Start     =================================
                       ============================================================================

**********************************************************************************************************************************/
/* ================= HERO SECTION WITH CSS VARIABLE ================= */

.hba-hero-clean-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 0 60px 0;
  /* Ensures proper header spacing & bottom padding */
}

/* Variable based Dynamic Background Layer */
.hba-hero-clean-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(10, 12, 28, 0.75) 0%, rgba(10, 12, 28, 0.50) 100%),
    linear-gradient(135deg, rgba(15, 18, 45, 0.6) 0%, rgba(40, 20, 80, 0.5) 100%),
    var(--hero-bg-img, url("../Assets/images/default-hero-bg.png")) center/cover no-repeat;
  z-index: 1;
}

/* Container & Inner Content */
.hba-hero-content {
  position: relative;
  z-index: 2;
}

/* Badge Style */
.hba-sol-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #ffffff;
  margin-bottom: 20px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hba-sol-badge i {
  color: #ffc107;
}

/* ================= HERO SECTION TITLE (H1 - Largest & Boldest) ================= */
.hba-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  /* Section Heading se hamesha bada rahega */
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

/* Hero Description: single base rule for HBA hero pages */
.hba-hero-desc {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  max-width: 820px;
  margin-bottom: 28px;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Primary Button */
.hba-hero-clean-action {
  display: flex;
  align-items: center;
}

.hba-hero-clean-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #df4231, #f3582c);
  color: #ffffff !important;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(223, 66, 49, 0.4);
  transition: all 0.3s ease;
}

.hba-hero-clean-btn:hover {
  background: linear-gradient(90deg, #362cc0, #281ea6);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(54, 44, 192, 0.5);
}

/* Responsive Rules for Small Devices */
@media (max-width: 992px) {
  .hba-hero-clean-section {
    min-height: auto;
    padding: 90px 15px 50px 15px;
  }

  .hba-hero-clean-action {
    justify-content: center;
  }
}

@media (max-width: 576px) {


  .hba-hero-desc {
    font-size: 0.9rem;
  }

  .hba-hero-clean-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------Hero Section CSS End --------------------------------------------------- */

/* ------------------------------------Future Ready Oracle Forms Section CSS Start --------------------------------------------------- */

/* ============================= */
/*        OFM SECTION            */
/* ============================= */

.ofm-section {
  background: #f8f9ff;
}

/* Heading */
.ofm-heading {
  font-size: 38px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
}

.ofm-heading span {
  color: #362cc0;
}

.ofm-subtext {
  max-width: 750px;
  margin: auto;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* Cards */
.ofm-card {
  background: #ffffff;
  padding: 35px 25px;
  border-radius: 16px;
  text-align: center;
  transition: 0.3s ease;
  border-top: 4px solid #362cc0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.ofm-card:hover {
  transform: translateY(-8px);
  border-top: 4px solid #df4231;
  box-shadow: 0 20px 40px rgba(54, 44, 192, 0.15);
}

/* Icon */
.icon-wrapper {
  width: 65px;
  height: 65px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Title */
.ofm-card h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Card Text */
.ofm-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Closing */
.ofm-closing {
  max-width: 800px;
  margin: auto;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
  .ofm-heading {
    font-size: 30px;
  }
}

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

  .ofm-subtext {
    font-size: 14px;
  }
}

/* ------------------------------------Future Ready Oracle Forms Section CSS End --------------------------------------------------- */

/* ------------------------------------Whats You get Section CSS Start --------------------------------------------------- */

/* ============================= */
/*        BENEFITS SECTION       */
/* ============================= */

.ofm-benefits-section {
  background: #f0f0f0;
}

/* Heading */
.benefits-heading {
  font-size: 36px;
  font-weight: 700;
  color: #111;
}

.benefits-heading span {
  color: #362cc0;
}

/* Benefit Card */
.benefit-card {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 18px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Gradient Border Effect */
.benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover */
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(54, 44, 192, 0.15);
}

/* Icon */
.benefit-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
  font-size: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Title */
.benefit-card h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Text */
.benefit-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .benefits-heading {
    font-size: 28px;
  }
}

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

  .benefit-card {
    padding: 25px 20px;
  }
}

/* ------------------------------------Whats You get Section CSS End --------------------------------------------------- */

/* ------------------------------------Common Business Challenges Section CSS Start --------------------------------------------------- */

.challenge-pro-section {
  padding: 110px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5ff 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle Background Shape */
.challenge-pro-section::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(54, 44, 192, 0.15), transparent 70%);
  top: -150px;
  right: -150px;
}

.section-header h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111;
}

.section-header p {
  max-width: 700px;
  margin: 0 auto 70px;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* GRID */
.challenge-box {
  margin-bottom: 40px;
}

.challenge-inner {
  padding: 20px 0;
  border-bottom: 2px solid #eee;
  transition: 0.3s ease;
}

.challenge-inner i {
  font-size: 26px;
  color: #362cc0;
  margin-bottom: 15px;
  display: inline-block;
  transition: 0.3s ease;
}

.challenge-inner h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.challenge-inner p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

/* Hover effect */
.challenge-inner:hover {
  border-bottom: 2px solid #df4231;
}

.challenge-inner:hover i {
  color: #df4231;
  transform: translateY(-5px);
}

/* Responsive */
@media (max-width: 992px) {
  .section-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .challenge-pro-section {
    padding: 80px 15px;
  }

  .section-header h2 {
    font-size: 24px;
  }

  .section-header p {
    font-size: 14px;
  }
}

/* ------------------------------------Common Business Challenges Section CSS End --------------------------------------------------- */

/* ------------------------------------ How Oracle Forms Section CSS Start --------------------------------------------------- */

/* ================================ */
/* MODERN BENEFIT SECTION V2       */
/* ================================ */

.modern-benefit-section-v2 {
  padding: 120px 0px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}

/* Subtle Background Shape */
.modern-benefit-section-v2::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(54, 44, 192, 0.12), transparent 70%);
  top: -100px;
  left: -120px;
}

/* HEADER */
.section-header h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-header p {
  max-width: 750px;
  margin: 0 auto 70px;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* BENEFIT STRIP */
.benefit-box {
  padding: 30px 20px;
  position: relative;
  transition: 0.3s ease;
}

.benefit-box i {
  font-size: 30px;
  color: #362cc0;
  margin-bottom: 15px;
  transition: 0.3s ease;
}

.benefit-box h6 {
  font-size: 16px;
  font-weight: 600;
}

/* Animated underline effect */
.benefit-box::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  transition: 0.3s ease;
  transform: translateX(-50%);
}

.benefit-box:hover::after {
  width: 60%;
}

.benefit-box:hover i {
  color: #df4231;
  transform: translateY(-6px);
}

/* Closing */
.closing-text p {
  max-width: 800px;
  margin: 60px auto;
  font-size: 16px;
  color: #666;
}

/* CTA PANEL */
.cta-panel {
  padding: 60px 30px;
  border-radius: 20px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
  margin-top: 40px;
}

.cta-panel h4 {
  font-size: 24px;
  margin-bottom: 20px;
}

.cta-btn {
  display: inline-block;
  padding: 14px 35px;
  background: #fff;
  color: #362cc0;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
}

.cta-btn:hover {
  transform: translateY(-3px);
  background: #f1f1f1;
}

/* Responsive */
@media (max-width: 992px) {
  .section-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .modern-benefit-section-v2 {
    padding: 80px 15px;
  }

  .section-header h2 {
    font-size: 24px;
  }

  .section-header p {
    font-size: 14px;
  }

  .cta-panel h4 {
    font-size: 20px;
  }
}

/* ------------------------------------ How Oracle Forms Section CSS End --------------------------------------------------- */

/* ------------------------------------ Our Oracle Forms Modernization Section CSS Start --------------------------------------------------- */

/* ================================= */
/*        ULTRA PROCESS SECTION      */
/* ================================= */

.ultra-process-section {
  padding: 140px 20px;
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
}

/* Header */
.process-header h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.process-header p {
  max-width: 750px;
  margin: 0 auto 100px;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* Grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* Card */
.process-card {
  position: relative;
  padding: 60px 45px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(54, 44, 192, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  transition: 0.4s ease;
  overflow: hidden;
}

/* Faded Background Number */
.bg-number {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 90px;
  font-weight: 700;
  color: rgba(54, 44, 192, 0.06);
}

/* Icon Circle */
.icon-circle {
  width: 70px;
  height: 70px;
  margin-bottom: 25px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 15px 40px rgba(54, 44, 192, 0.35);
  transition: 0.4s ease;
}

/* Title */
.process-card h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* Text */
.process-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

/* Hover Effects */
.process-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 40px 90px rgba(54, 44, 192, 0.15);
}

.process-card:hover .icon-circle {
  transform: rotate(8deg) scale(1.05);
}

/* Responsive */
@media (max-width: 992px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .ultra-process-section {
    padding: 90px 15px;
  }

  .process-header h2 {
    font-size: 24px;
  }

  .bg-number {
    font-size: 60px;
  }
}

/* ------------------------------------ Our Oracle Forms Modernization Section CSS End --------------------------------------------------- */

/* ------------------------------------ Comprehensive Oracle Forms Modernization Services Section CSS Start --------------------------------------------------- */

/* ================================= */
/*      SERVICES STRUCTURED SECTION  */
/* ================================= */

.services-structured-section {
  padding: 130px 20px;
  background: #f8f9ff;
}

/* Header */
.section-header h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-header p {
  max-width: 750px;
  margin: 0 auto 80px;
  color: #555;
}

/* Grid */
.structured-grid {
  /* max-width: 1000px; */
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 80px;
}

/* Item */
.structured-item {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  padding: 25px 20px;
  border-radius: 12px;
  transition: all 0.35s ease;
  position: relative;
  background: transparent;
}

/* Hover Background Effect */
.structured-item:hover {
  background: #ffffff;
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(54, 44, 192, 0.12);
}

/* Number */
.item-number {
  font-size: 26px;
  font-weight: 700;
  color: #362cc0;
  min-width: 50px;
  position: relative;
  transition: 0.3s ease;
}

/* Vertical Accent Line */
.item-number::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 38px;
  width: 3px;
  height: 35px;
  background: linear-gradient(#362cc0, #df4231);
  transition: 0.3s ease;
}

/* Hover Effects */
.structured-item:hover .item-number {
  color: #df4231;
  transform: scale(1.1);
}

.structured-item:hover .item-number::after {
  height: 55px;
}

/* Content */
.item-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  transition: 0.3s ease;
}

.item-content p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  transition: 0.3s ease;
}

/* Title subtle hover */
.structured-item:hover .item-content h5 {
  color: #362cc0;
}

/* Responsive */
@media (max-width: 992px) {
  .structured-grid {
    grid-template-columns: 1fr;
  }

  .section-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .services-structured-section {
    padding: 90px 15px;
  }

  .section-header h2 {
    font-size: 24px;
  }
}

/* ------------------------------------ Comprehensive Oracle Forms Modernization Services Section CSS End --------------------------------------------------- */

/* ------------------------------------ Real Business Outcomes You Can expect Section CSS Start --------------------------------------------------- */

/* ================================= */
/*    OUTCOME BALANCED SECTION       */
/* ================================= */

.outcome-balanced-section {
  padding: 120px 20px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  color: #fff;
  position: relative;
}

/* LEFT SIDE */
.outcome-left h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
}

.outcome-left p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
  opacity: 0.9;
}

.region-text {
  font-size: 14px;
  opacity: 0.8;
}

.outcome-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 15px 40px;
  background: #fff;
  color: #362cc0;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s ease;
}

.outcome-btn:hover {
  transform: translateY(-4px);
  background: #f3f3f3;
}

/* RIGHT GRID */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* CARD */
.outcome-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: 0.35s ease;
  min-height: 75px;
}

/* ICON */
.outcome-card i {
  font-size: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.9);
  color: #362cc0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}

/* TEXT */
.outcome-card span {
  font-size: 14px;
  font-weight: 600;
}

/* HOVER */
.outcome-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.outcome-card:hover i {
  background: #df4231;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .outcome-left h2 {
    font-size: 30px;
  }

  .outcome-grid {
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  .outcome-balanced-section {
    padding: 80px 15px;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .outcome-left h2 {
    font-size: 24px;
  }
}

/* ------------------------------------ Real Business Outcomes You Can expect Section CSS End --------------------------------------------------- */

/* ------------------------------------ Why Choose Tavish Infotech Section CSS Start --------------------------------------------------- */

/* ================================= */
/*       WHY CARD SECTION            */
/* ================================= */

.why-card-section {
  padding: 130px 20px;
  background: #f8f9ff;
}

/* Header */
.section-header h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-header p {
  max-width: 650px;
  margin: 0 auto 80px;
  font-size: 16px;
  color: #555;
}

/* Card */
.why-card {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid #eee;
  transition: 0.4s ease;
  height: 100%;
}

/* Hover */
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(54, 44, 192, 0.15);
}

/* Icon Circle */
.icon-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #362cc0, #df4231);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 15px 35px rgba(54, 44, 192, 0.3);
  transition: 0.3s ease;
}

.why-card:hover .icon-circle {
  transform: scale(1.1);
}

/* Title */
.why-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* Text */
.why-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
  .section-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .why-card-section {
    padding: 90px 15px;
  }

  .section-header h2 {
    font-size: 24px;
  }
}

/* ------------------------------------ Why Choose Tavish Infotech Section CSS End --------------------------------------------------- */

/* ------------------------------------ Let's Modernize Your Oracle Forms Today Section CSS Start --------------------------------------------------- */

/* CTA Section */
.cta-brand {
  background: linear-gradient(135deg,
      var(--hba-indigo) 0%,
      var(--hba-orange) 100%);
  padding: 80px 20px;
  color: #fff;
}

.cta-wrapper {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* Left Side */
.cta-left {
  flex: 1;
}

.cta-left h2 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 25px;
}

.cta-left p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.highlight-text {
  font-weight: 800;
  color: #fff;
}

/* Right Side */
.cta-right {
  flex: 0.6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Button */
.cta-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #5f2c82;
  padding: 14px 30px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s ease;
}

.cta-main-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 992px) {
  .cta-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .cta-right {
    align-items: center;
  }

  .cta-left h2 {
    font-size: 28px;
  }
}

.consultation-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 15px 40px;
  background: #362cc0;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  /* needed for pseudo-element */
  transition: 0.3s ease;
}

/* Arrow pseudo-element */
.consultation-btn::after {
  content: "→";
  /* right arrow */
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* Hover effect */
.consultation-btn:hover {
  transform: translateY(-4px);
  color: #362cc0;
  background: #f3f3f3;
}

.consultation-btn:hover::after {
  transform: translateX(5px);
  /* move arrow to the right */
}

/* ------------------------------------ Let's Modernize Your Oracle Forms Today Section CSS End --------------------------------------------------- */

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Forms Moderization Page CSS End     =================================
                       ============================================================================

**********************************************************************************************************************************/

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle APEX Consulting Services Page CSS Start     =================================
                       ============================================================================

**********************************************************************************************************************************/

/* ==========================================================================
   EXPERT APEX GUIDANCE SYSTEM - FULL WIDTH FOOTER MODIFICATION
   ========================================================================== */

.apex-guidance-system {
  padding: 100px 0;
  background-color: #f0f0f0;
  /* Matching clean presentation format */
  position: relative;
  z-index: 10;
}

.ags-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Expert Pill Badge */
.ags-badge-frame {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(54, 44, 192, 0.07);
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.ags-badge-frame i {
  font-size: 12px;
  color: #362cc0;
}

.ags-badge-frame span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #362cc0;
}

/* Elegant Slate/Plum Gradient Heading Style */
.ags-main-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  color: #372554;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.ags-lead-text {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #5e6d82;
  margin: 0;
}

/* Clean Challenge Frame Card */
.ags-challenge-matrix-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0 25px 50px rgba(54, 44, 192, 0.05);
  position: relative;
}

/* Dual Dynamic Gradient Accent Line */
.ags-challenge-matrix-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 4px;
  background: linear-gradient(90deg, #362cc0, #df4231);
  border-radius: 0 0 4px 4px;
}

.ags-card-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 28px;
}

.ags-challenge-list-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ags-challenge-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.ags-challenge-item:hover {
  transform: translateX(6px);
  border-color: rgba(54, 44, 192, 0.15);
}

.ags-status-bullet {
  font-size: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullet-red i {
  color: #ef4444;
}

.bullet-orange i {
  color: #f97316;
}

.bullet-amber i {
  color: #f59e0b;
}

.ags-challenge-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

/* --- THE MODIFIED FULL-WIDTH FOOTER ENGINE --- */
.ags-footer-summary-fullwidth {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  border-left: 4px solid #362cc0;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
  width: 100%;
  margin-top: 10px;
}

.ags-footer-icon {
  font-size: 20px;
  color: #362cc0;
  padding-top: 2px;
  flex-shrink: 0;
}

.ags-footer-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

/* --- FULL RESPONSIVE CONTEXT ENGINE --- */
@media (max-width: 991px) {
  .apex-guidance-system {
    padding: 70px 0;
  }

  .ags-main-title {
    font-size: 2.4rem;
  }

  .ags-footer-summary-fullwidth {
    margin-top: 40px;
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .ags-main-title {
    font-size: 2.1rem;
    text-align: center;
  }

  .ags-badge-frame {
    margin: 0 auto 20px auto;
  }

  .ags-lead-text {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .apex-guidance-system {
    padding: 50px 0;
  }

  .ags-main-title {
    font-size: 1.8rem;
  }

  .ags-challenge-matrix-card {
    padding: 24px 20px;
  }

  .ags-footer-summary-fullwidth {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .ags-challenge-text {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   What You Get with Our Oracle APEX Consulting Services
   ========================================================================== */

.apex-services-grid-system {
  padding: 100px 0;
  background-color: #ffffff;
  position: relative;
  z-index: 15;
}

.asgs-anchor-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Deep Plum Corporate Typography */
.asgs-main-heading {
  font-size: 2.85rem;
  font-weight: 800;
  color: #372554;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

/* Action Trigger Placement Directly Below Title */
.asgs-action-deck {
  width: 100%;
}

/* .asgs-prime-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  color: #ffffff !important;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 10px 25px rgba(59, 38, 179, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
} */


.asgs-prime-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  z-index: 1;

  /* Default */
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  color: #fff;
  /* border: 2px solid transparent; */

  transition: all 0.35s ease;
}

/* Gradient Border */
.asgs-prime-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 2px;
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.asgs-prime-btn:hover {
  background: transparent;
  box-shadow: 0 15px 35px rgba(59, 38, 179, 0.15);
  color: #362cc0;
}

/* Show Gradient Border */
.asgs-prime-btn:hover::before {
  opacity: 1;
}

/* Gradient Text */
.asgs-prime-btn:hover span {
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.asgs-prime-btn i {
  font-size: 13px;
  transition: transform 0.3s ease;
}

.asgs-prime-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(59, 38, 179, 0.25);
}


.asgs-prime-btn:hover i {
  transform: translateX(8px);

  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  color: transparent;
}

/* Compact Container with Sleek Professional Framing */
.asgs-list-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

/* Modern High-Density List Rows */
.asgs-row-item {
  display: flex;
  align-items: center;
  padding: 24px 36px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.3s ease;
}

.asgs-row-item:last-child {
  border-bottom: none;
}

/* Row Hover Interaction */
.asgs-row-item:hover {
  background-color: #fafbfe;
}

/* Premium Square Micro-Icon Wrapper */
.asgs-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 24px;
}

/* Theme Calibrated Colors */
.box-blue {
  background: rgba(54, 44, 192, 0.07);
  color: #362cc0;
}

.box-purple {
  background: rgba(92, 55, 191, 0.07);
  color: #5c37bf;
}

.box-crimson {
  background: rgba(185, 51, 84, 0.07);
  color: #b93354;
}

.box-orange {
  background: rgba(225, 59, 48, 0.07);
  color: #e13b30;
}

.box-cyan {
  background: rgba(8, 145, 178, 0.07);
  color: #0891b2;
}

.asgs-content-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Modern Label Tag */
.asgs-index-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
  font-family: monospace;
}

/* Sharp, Clear Typography for Features */
.asgs-feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATION ENGINE
   ========================================================================== */

@media (max-width: 991px) {
  .apex-services-grid-system {
    padding: 70px 0;
  }

  .asgs-main-heading {
    font-size: 2.3rem;
    text-align: center !important;
    margin-bottom: 24px;
  }

  .asgs-anchor-panel {
    align-items: center;
  }

  .asgs-row-item {
    padding: 20px 24px;
  }
}

@media (max-width: 768px) {
  .asgs-main-heading {
    font-size: 1.95rem;
  }

  .asgs-row-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }

  .asgs-icon-box {
    margin-right: 0;
  }

  .asgs-prime-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .apex-services-grid-system {
    padding: 50px 0;
  }

  .asgs-main-heading {
    font-size: 1.65rem;
  }

  .asgs-feature-title {
    font-size: 1.05rem;
  }
}

/* <!-- ------------------------------------- Challenges Oracle APEX Consulting Addresses Services CSS Start ---------------------------------------------- --> */

/* Design System Variables */
:root {
  --var-primary-blue: #362cc0;
  --var-accent-red: #df4231;
  --var-deep-plum: #372554;
  --var-text-dark: #111430;
  --var-text-muted: #5c636a;
  --var-text-white: #ffffff;

  /* 90deg Custom Gradient as requested */
  --ags-border-gradient: linear-gradient(90deg,
      var(--var-primary-blue) 0%,
      var(--var-accent-red) 100%);
}

/* Typography Assignments mapped to Design Tokens */
.apex-guidance-system .po-sub-label-tag {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--var-primary-blue);
}

.apex-guidance-system .po-main-display-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: var(--var-deep-plum);
}

.apex-guidance-system .ags-lead-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: var(--var-text-muted);
}

.apex-guidance-system .matrix-content-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--var-text-dark);
}

.apex-guidance-system .outcome-card-desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--var-text-muted);
}

/* Base Card Styling (Stable Clean White Background) */
.apex-guidance-system .challenge-matrix-card {
  background: #ffffff;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(17, 20, 48, 0.02);
  transition:
    transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.3s ease;
  z-index: 1;
}

/* Premium Border Mask Trick for 90deg Gradient Hover */
.apex-guidance-system .challenge-matrix-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 1.5px;
  /* Border thickness */
  background: #eef0f6;
  /* Default soft gray border */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* Hover Action - Only active the 90deg gradient on border mask */
.apex-guidance-system .challenge-matrix-card:hover::before {
  background: var(--ags-border-gradient);
}

.apex-guidance-system .challenge-matrix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(54, 44, 192, 0.06);
}

/* Font Awesome Icon Wrapper Style */
.apex-guidance-system .challenge-icon-wrapper {
  width: 44px;
  height: 44px;
  background: rgba(54, 44, 192, 0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

/* Font Awesome Icon Specific Sizing & Color */
.apex-guidance-system .ags-fa-icon {
  font-size: 1.15rem;
  color: var(--var-primary-blue);
  transition: color 0.3s ease;
}

/* Hover state interaction on the Font Awesome Icon and Wrapper */
.apex-guidance-system .challenge-matrix-card:hover .challenge-icon-wrapper {
  background: var(--ags-border-gradient);
}

.apex-guidance-system .challenge-matrix-card:hover .ags-fa-icon {
  color: var(--var-text-white);
  /* High contrast look */
}

/* Responsive Stacking Utilities */
@media (max-width: 576px) {
  .apex-guidance-system .card-content {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }

  .apex-guidance-system .challenge-icon-wrapper {
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
}

/* <!-- ------------------------------------- Challenges Oracle APEX Consulting Addresses Services CSS End ---------------------------------------------- --> */

/* <!-- ------------------------------------- How Our Oracle APEX Consulting Drives Business Growths Services CSS Start ---------------------------------------------- --> */

/* Design System Core Tokens */
:root {
  --var-primary-blue: #362cc0;
  --var-accent-red: #df4231;
  --var-deep-plum: #372554;
  --var-text-dark: #111430;
  --var-text-muted: #5c636a;
  --var-text-white: #ffffff;

  /* 90deg Custom Gradient Configurations */
  --po-gradient-blue: linear-gradient(90deg,
      var(--var-primary-blue) 0%,
      var(--var-deep-plum) 100%);
  --po-gradient-red: linear-gradient(90deg,
      var(--var-accent-red) 0%,
      var(--var-deep-plum) 100%);
}

/* Typography Class References mapping */
.po-block-system .po-sub-label-tag {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--var-primary-blue);
  display: inline-block;
}

.po-block-system .po-main-display-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: var(--var-deep-plum);
}

.po-block-system .po-body-narrative,
.po-block-system .outcome-card-desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--var-text-muted);
}

.po-block-system .outcome-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--var-text-dark);
}

.po-block-system .focus-badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--var-text-dark);
}

/* Base Part Card Properties (Pure White Background Stays Permanent) */
.po-block-system .growth-part-card {
  background: #ffffff;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(17, 20, 48, 0.02);
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
  z-index: 1;
}

/* Masked Border Construction for Hover Gradients */
.po-block-system .growth-part-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 1.5px;
  /* Border thickness line */
  background: #eef0f6;
  /* Shared Default Border */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

.po-block-system .growth-part-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(17, 20, 48, 0.06);
}

/* Part Badge Symmetrical Styling */
.po-block-system .part-badge {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* Icon Box Uniform Architecture */
.po-block-system .part-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 14px;
  font-size: 0.95rem;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

/* =========================================
   Theme Combination 01: Red Accent Theme
   ========================================= */
.po-block-system .part-red-theme .part-badge {
  background: rgba(223, 66, 49, 0.08);
  color: var(--var-accent-red);
}

.po-block-system .part-red-theme .part-icon-box {
  background: rgba(223, 66, 49, 0.05);
  color: var(--var-accent-red);
}

/* Hover Trigger for Red Theme Border Only */
.po-block-system .part-red-theme:hover::before {
  background: var(--po-gradient-red);
}

.po-block-system .part-red-theme:hover .part-icon-box {
  background: var(--po-gradient-red);
  color: var(--var-text-white);
}

/* =========================================
   Theme Combination 02: Blue Primary Theme
   ========================================= */
.po-block-system .part-blue-theme .part-badge {
  background: rgba(54, 44, 192, 0.08);
  color: var(--var-primary-blue);
}

.po-block-system .part-blue-theme .part-icon-box {
  background: rgba(54, 44, 192, 0.05);
  color: var(--var-primary-blue);
}

/* Hover Trigger for Blue Theme Border Only */
.po-block-system .part-blue-theme:hover::before {
  background: var(--po-gradient-blue);
}

.po-block-system .part-blue-theme:hover .part-icon-box {
  background: var(--po-gradient-blue);
  color: var(--var-text-white);
}

/* =========================================
   3. Centralized Call to Action Button
   ========================================= */
.po-block-system .tavish-central-cta {
  background: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  color: var(--var-text-white);
  padding: 16px 40px;
  border-radius: 50px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(17, 20, 48, 0.1);
  transition:
    background 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

.po-block-system .tavish-central-cta:hover {
  background: var(--var-primary-blue);
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(54, 44, 192, 0.2);
}

.po-block-system .tavish-central-cta i {
  transition: transform 0.3s ease;
}

.po-block-system .tavish-central-cta:hover i {
  transform: rotate(10deg) scale(1.1);
}

/* Mobile Responsive Optimization Rules */
@media (max-width: 768px) {
  .po-block-system .tavish-central-cta {
    width: 100%;
    /* Full width on mobile screens for easy clicking */
  }
}

/* <!-- ------------------------------------- How Our Oracle APEX Consulting Drives Business Growths Services CSS End ---------------------------------------------- --> */

/* <!-- ------------------------------------- Our Oracle APEX Consulting Process Services CSS Start ---------------------------------------------- --> */

:root {
  --var-primary-blue: #362cc0;
  --var-accent-red: #df4231;
  --var-deep-plum: #372554;
  --var-text-dark: #111430;
  --var-text-muted: #5c636a;
  --var-text-white: #ffffff;

  --acm-gradient-red: linear-gradient(90deg,
      var(--var-accent-red) 0%,
      var(--var-deep-plum) 100%);
  --acm-gradient-blue: linear-gradient(90deg,
      var(--var-primary-blue) 0%,
      var(--var-deep-plum) 100%);
}

.apex-consulting-matrix .po-main-display-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: var(--var-deep-plum);
}

.apex-consulting-matrix .acm-lead-narrative,
.apex-consulting-matrix .pillar-body-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--var-text-muted);
}

.apex-consulting-matrix .phase-main-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--var-text-dark);
}

.apex-consulting-matrix .pillar-sub-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--var-text-dark);
}

.apex-consulting-matrix .matrix-master-card {
  background: #ffffff;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 4px 35px rgba(17, 20, 48, 0.02);
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
  z-index: 1;
}

.apex-consulting-matrix .matrix-master-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: #eef0f6;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

.apex-consulting-matrix .matrix-master-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(17, 20, 48, 0.05);
}

.apex-consulting-matrix .pillar-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

/* Red Theme Integration */
.apex-consulting-matrix .theme-red .pillar-icon-box {
  background: rgba(223, 66, 49, 0.05);
  color: var(--var-accent-red);
}

.apex-consulting-matrix .theme-red:hover::before {
  background: var(--acm-gradient-red);
}

.apex-consulting-matrix .theme-red:hover .pillar-icon-box {
  background: var(--acm-gradient-red);
  color: var(--var-text-white);
}

/* Blue Theme Integration */
.apex-consulting-matrix .theme-blue .pillar-icon-box {
  background: rgba(54, 44, 192, 0.05);
  color: var(--var-primary-blue);
}

.apex-consulting-matrix .theme-blue:hover::before {
  background: var(--acm-gradient-blue);
}

.apex-consulting-matrix .theme-blue:hover .pillar-icon-box {
  background: var(--acm-gradient-blue);
  color: var(--var-text-white);
}

@media (max-width: 768px) {
  .apex-consulting-matrix .matrix-master-card {
    padding: 30px 20px !important;
  }
}

/* <!-- ------------------------------------- Our Oracle APEX Consulting Process Services CSS End ---------------------------------------------- --> */

/* <!-- ------------------------------------- Oracle APEX Consulting Solutions We Deliver CSS Start ---------------------------------------------- --> */

:root {
  --atd-primary-purple: #3e32b0;
  --atd-primary-accent: #e54b3c;
  --atd-dark-rich: #0e111e;
  --atd-dark-card: #151a30;
  --atd-text-light: rgba(255, 255, 255, 0.95);
  --atd-text-muted-light: rgba(255, 255, 255, 0.7);
  --atd-gradient-flow: linear-gradient(135deg, var(--atd-primary-purple) 0%, var(--atd-primary-accent) 100%);
}

/* Core Unified Container */
.premium-unified-card-wrapper {
  background: var(--atd-dark-rich);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(11, 13, 26, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* LEFT SIDE PANEL */
.dynamic-gradient-side-panel {
  background: var(--atd-gradient-flow);
  min-height: 100%;
}

.tabs-header {
  border-bottom: 2px solid #fff;
}

.side-panel-subheading {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* LEFT SIDE: Seamless Dynamic Pills */
.custom-brand-pills .nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: none;
  border-radius: 12px;
  text-align: left;
  padding: 14px 18px;
  margin-bottom: 6px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-brand-pills .nav-link i {
  font-size: 1.1rem;
  opacity: 0.8;
}

/* Tab Pill Hover & Active States */
.custom-brand-pills .nav-link:hover {
  color: var(--atd-text-light);
  background: rgba(255, 255, 255, 0.08);
}

.custom-brand-pills .nav-link.active {
  color: var(--atd-text-light) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* RIGHT SIDE CANVAS with Grid Overlay */
.dynamic-rich-dark-canvas {
  background: var(--atd-dark-rich);
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  position: relative;
}

.tab-internal-container {
  z-index: 2;
  position: relative;
}

/* Content Elements styles */
.dynamic-rich-dark-canvas .premium-pill-badge {
  display: inline-block;
  background: rgba(229, 75, 60, 0.15);
  border: 1px solid var(--atd-primary-accent);
  color: #ff7163;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 6px;
}

.dynamic-rich-dark-canvas .content-title-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--atd-text-light);
  line-height: 1.25;
}

.dynamic-rich-dark-canvas .content-desc-paragraph {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--atd-text-muted-light);
  max-width: 680px;
}

/* METRICS GRID: Pure Minimal Glassmorphic Feature Blocks */
.glass-metric-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 18px 20px;
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.glass-metric-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
}

.glass-metric-card i.text-brand-glow {
  color: #ffffff;
  font-size: 1.2rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.glass-metric-card .metric-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

/* Mobile & Touch Responsive Adaptation */
@media (max-width: 991px) {
  .premium-unified-card-wrapper {
    border-radius: 16px;
  }

  .dynamic-gradient-side-panel {
    min-height: auto;
  }

  .custom-brand-pills {
    flex-direction: row !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 15px !important;
  }

  .custom-brand-pills .nav-link {
    display: inline-flex !important;
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 991px) {
  .premium-unified-card-wrapper {
    border-radius: 16px;
    overflow-x: hidden;
  }

  .dynamic-gradient-side-panel {
    min-height: auto;
  }

  .custom-brand-pills {
    flex-direction: column !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    width: 100%;
    padding-bottom: 0 !important;
  }

  .custom-brand-pills .nav-link {
    display: flex !important;
    width: 100%;
    margin-bottom: 6px;
    flex-shrink: 1;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  body,
  html {
    overflow-x: hidden;
  }
}

/* <!-- ------------------------------------- Oracle APEX Consulting Solutions We Deliver CSS End -------------------------- --> */



/* --------------------------- */
/* --------------------------------------------------------------- Oracle APEX Support Section CSS Start ---------------------------------------------------------------- */

:root {
  --oas-blue: #362cc0;
  --oas-red: #df4231;
  --oas-muted: #64748b;
}

/* Layout Setup */
.oracle-apex-support {
  padding: 100px 0px;
  background: #f4f6fb;
}

.oas-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.oas-header {
  text-align: center;
  margin-bottom: 70px;
}

.oas-header h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #1e293b;
}

.oas-subheader {
  color: var(--oas-muted);
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.oas-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
}

/* Vertical Tab Menu */
.oas-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.oas-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  border: none;
  background: #e3e6fd;
  color: #1e293b;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
}

.oas-tab i {
  color: var(--oas-blue);
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.oas-tab:hover {
  background: #e8e9ff;
}

.oas-tab.active {
  background: linear-gradient(90deg, var(--oas-blue), var(--oas-red));
  color: #fff;
}

.oas-tab.active i {
  color: #fff;
}

/* Content Panel Presentation */
.oas-content {
  background: #f8faff;
  padding: 45px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.oas-panel {
  display: none;
}

.oas-panel.active {
  display: block;
}

.oas-title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 26px;
  margin-bottom: 20px;
  color: #1e293b;
}

.oas-title i {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(54, 44, 192, 0.12);
  color: var(--oas-blue);
  font-size: 18px;
}

.oas-desc {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* High-Density Features List */
.oas-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oas-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: #334155;
  font-weight: 500;
  font-size: 15px;
}

.oas-features i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(223, 66, 49, 0.12);
  color: var(--oas-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* Responsive UI Breakpoints */
@media (max-width: 992px) {
  .oas-layout {
    grid-template-columns: 1fr;
  }

  .oas-menu {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .oas-tab {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------- Oracle APEX Support Section CSS End ------------------------------------------------------- */
/* ---------------------------- */


/* <!-- ------------------------------------- Real Business Outcomes You Can Expect CSS Start -------------------------- --> */

/* --- Outer Wrapper with Micro Dots Pattern --- */
.tavish-outcomes-light-wrapper {
  background: #ffffff !important;
  background-image: radial-gradient(rgba(62, 50, 176, 0.05) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
  border-radius: 24px !important;
  padding: 45px 40px !important;
  box-shadow: 0 30px 70px rgba(14, 17, 30, 0.05) !important;
  border: 1px solid rgba(62, 50, 176, 0.06) !important;
}

/* --- Premium Corporate Cards Framework --- */
.tavish-light-outcome-card {
  background: #ffffff !important;
  border: 1px solid rgba(62, 50, 176, 0.09) !important;
  border-radius: 16px !important;
  padding: 26px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  box-shadow: 0 4px 15px rgba(14, 17, 30, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

/* --- Professional Dual Hover Interactions --- */
.tavish-light-outcome-card:hover {
  background: #ffffff !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(62, 50, 176, 0.08) !important;
}

/* If card has a purple icon, hover turns border to clean brand purple */
.tavish-light-outcome-card:has(.box-purple):hover {
  border-color: rgba(62, 50, 176, 0.4) !important;
}

/* If card has a red icon, hover turns border to clean brand red */
.tavish-light-outcome-card:has(.box-red):hover {
  border-color: rgba(229, 75, 60, 0.4) !important;
}

/* --- Balanced Icon Containers (Alternate Theme) --- */
.tavish-light-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

/* Purple Theme Setup */
.tavish-light-icon-box.box-purple {
  background: rgba(62, 50, 176, 0.06) !important;
  border: 1px solid rgba(62, 50, 176, 0.15) !important;
}

.tavish-light-icon-box.box-purple i {
  color: #3e32b0 !important;
  font-size: 1.2rem !important;
}

/* Red/Orange Theme Setup */
.tavish-light-icon-box.box-red {
  background: rgba(229, 75, 60, 0.06) !important;
  border: 1px solid rgba(229, 75, 60, 0.15) !important;
}

.tavish-light-icon-box.box-red i {
  color: #e54b3c !important;
  font-size: 1.2rem !important;
}

/* Icon Pop Animation on Hover */
.tavish-light-outcome-card:hover .tavish-light-icon-box.box-purple {
  background: #3e32b0 !important;
}

.tavish-light-outcome-card:hover .tavish-light-icon-box.box-red {
  background: #e54b3c !important;
}

.tavish-light-outcome-card:hover .tavish-light-icon-box i {
  color: #ffffff !important;
  transform: scale(1.08);
}

/* --- Typography Design --- */
.tavish-light-text-box {
  flex-grow: 1 !important;
}

.tavish-light-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #141824 !important;
  /* Premium corporate charcoal black */
  line-height: 1.4 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.3s ease !important;
}

/* --- Responsive Layout Balance --- */
@media (max-width: 767px) {
  .tavish-outcomes-light-wrapper {
    border-radius: 16px !important;
    padding: 24px 16px !important;
  }

  .tavish-light-outcome-card {
    padding: 20px 18px !important;
    gap: 14px !important;
  }

  .tavish-light-title {
    font-size: 1rem !important;
  }
}

/* --- Outer Wrapper with Micro Dots Pattern --- */
.tavish-outcomes-light-wrapper {
  background: #ffffff !important;
  background-image: radial-gradient(rgba(62, 50, 176, 0.05) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
  border-radius: 24px !important;
  padding: 45px 40px !important;
  box-shadow: 0 30px 70px rgba(14, 17, 30, 0.05) !important;
  border: 1px solid rgba(62, 50, 176, 0.06) !important;
}

/* --- Premium Corporate Cards Framework --- */
.tavish-light-outcome-card {
  background: #ffffff !important;
  border: 1px solid rgba(62, 50, 176, 0.09) !important;
  border-radius: 16px !important;
  padding: 26px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  box-shadow: 0 4px 15px rgba(14, 17, 30, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

/* --- Professional Dual Hover Interactions --- */
.tavish-light-outcome-card:hover {
  background: #ffffff !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(62, 50, 176, 0.08) !important;
}

/* If card has a purple icon, hover turns border to clean brand purple */
.tavish-light-outcome-card:has(.box-purple):hover {
  border-color: rgba(62, 50, 176, 0.4) !important;
}

/* If card has a red icon, hover turns border to clean brand red */
.tavish-light-outcome-card:has(.box-red):hover {
  border-color: rgba(229, 75, 60, 0.4) !important;
}

/* --- Balanced Icon Containers (Alternate Theme) --- */
.tavish-light-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

/* Purple Theme Setup */
.tavish-light-icon-box.box-purple {
  background: rgba(62, 50, 176, 0.06) !important;
  border: 1px solid rgba(62, 50, 176, 0.15) !important;
}

.tavish-light-icon-box.box-purple i {
  color: #3e32b0 !important;
  font-size: 1.2rem !important;
}

/* Red/Orange Theme Setup */
.tavish-light-icon-box.box-red {
  background: rgba(229, 75, 60, 0.06) !important;
  border: 1px solid rgba(229, 75, 60, 0.15) !important;
}

.tavish-light-icon-box.box-red i {
  color: #e54b3c !important;
  font-size: 1.2rem !important;
}

/* Icon Pop Animation on Hover */
.tavish-light-outcome-card:hover .tavish-light-icon-box.box-purple {
  background: #3e32b0 !important;
}

.tavish-light-outcome-card:hover .tavish-light-icon-box.box-red {
  background: #e54b3c !important;
}

.tavish-light-outcome-card:hover .tavish-light-icon-box i {
  color: #ffffff !important;
  transform: scale(1.08);
}

/* --- Typography Design --- */
.tavish-light-text-box {
  flex-grow: 1 !important;
}

.tavish-light-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #141824 !important;
  /* Premium corporate charcoal black */
  line-height: 1.4 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.3s ease !important;
}

/* --- Responsive Layout Balance --- */
@media (max-width: 767px) {
  .tavish-outcomes-light-wrapper {
    border-radius: 16px !important;
    padding: 24px 16px !important;
  }

  .tavish-light-outcome-card {
    padding: 20px 18px !important;
    gap: 14px !important;
  }

  .tavish-light-title {
    font-size: 1rem !important;
  }
}

/* <!-- ------------------------------------- Real Business Outcomes You Can Expect CSS End -------------------------- --> */



/* <!-- ------------------------------------- Why Choose Tavish Infotech? CSS Start -------------------------- --> */

/* --- Left Sticky Panel Styles --- */
.tavish-why-sticky-panel {
  position: sticky !important;
  top: 100px !important;
}

.badge-accent-light {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(62, 50, 176, 0.05) !important;
  border: 1px solid rgba(62, 50, 176, 0.1) !important;
  color: #3e32b0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
  border-radius: 30px !important;
}

/* --- Right Side Cards Container & Connection Line --- */
.tavish-why-cards-container {
  position: relative !important;
  padding-left: 20px !important;
}

/* Elegant left vertical accent line */
.tavish-why-cards-container::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 30px !important;
  bottom: 30px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(62, 50, 176, 0.15) 0%, rgba(229, 75, 60, 0.15) 100%) !important;
  border-radius: 2px !important;
}

/* --- Premium Solution Card Layout --- */
.tavish-why-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(62, 50, 176, 0.07) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 25px rgba(14, 17, 30, 0.02) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.tavish-why-card:last-child {
  margin-bottom: 0 !important;
}

/* --- Interactive Hover Effects (Dual Accent Glow) --- */
.tavish-why-card:hover {
  transform: translateX(6px) !important;
}

/* Purple Hover Feedback */
.tavish-why-card:has(.purple-glow):hover {
  border-color: rgba(62, 50, 176, 0.3) !important;
  box-shadow: 0 15px 35px rgba(62, 50, 176, 0.06) !important;
}

/* Red/Orange Hover Feedback */
.tavish-why-card:has(.red-glow):hover {
  border-color: rgba(229, 75, 60, 0.3) !important;
  box-shadow: 0 15px 35px rgba(229, 75, 60, 0.06) !important;
}

/* --- Elegant Icon Wrappers --- */
.tavish-why-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

/* Purple Icon Theme */
.tavish-why-icon-wrapper.purple-glow {
  background: rgba(62, 50, 176, 0.06) !important;
  border: 1px solid rgba(62, 50, 176, 0.15) !important;
}

.tavish-why-icon-wrapper.purple-glow i {
  color: #3e32b0 !important;
  font-size: 1.25rem !important;
}

/* Red Icon Theme */
.tavish-why-icon-wrapper.red-glow {
  background: rgba(229, 75, 60, 0.06) !important;
  border: 1px solid rgba(229, 75, 60, 0.15) !important;
}

.tavish-why-icon-wrapper.red-glow i {
  color: #e54b3c !important;
  font-size: 1.25rem !important;
}

/* Hover Icon Fill Animations */
.tavish-why-card:hover .tavish-why-icon-wrapper.purple-glow {
  background: #3e32b0 !important;
}

.tavish-why-card:hover .tavish-why-icon-wrapper.red-glow {
  background: #e54b3c !important;
}

.tavish-why-card:hover .tavish-why-icon-wrapper i {
  color: #ffffff !important;
  transform: scale(1.05);
}

/* --- Typography Controls --- */
.tavish-why-content {
  flex-grow: 1 !important;
}

.tavish-why-card-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #0e111e !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

.tavish-why-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: rgba(14, 17, 30, 0.65) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- Responsive Adaptations --- */
@media (max-width: 991px) {
  .tavish-why-sticky-panel {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 20px !important;
  }

  .tavish-why-cards-container {
    padding-left: 0 !important;
  }

  .tavish-why-cards-container::before {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .tavish-why-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  .tavish-why-card-title {
    font-size: 1.05rem !important;
  }
}

/* <!-- ------------------------------------- Why Choose Tavish Infotech? CSS End -------------------------- --> */
/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle APEX Consulting Services Page CSS End     =================================
                       ============================================================================

**********************************************************************************************************************************/





/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle APEX Development Services Page CSS Start     =================================
                       ============================================================================

**********************************************************************************************************************************/
/* *****************************************************************************************************
    Our Oracle APEX Development Process Services CSS Start
*******************************************************************************************************/

a.hero-link {
  color: unset;
}

/* --- Core Containers --- */
.tavish-split-proc-section {
  position: relative !important;
}

.tavish-sp-showcase-container {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

/* --- Row Layout & Fixed Asymmetry --- */
.tavish-sp-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 30px !important;
  position: relative !important;
}

/* --- Left Timeline Column --- */
.tavish-sp-left-timeline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 50px !important;
  flex-shrink: 0 !important;
}

.tavish-sp-circle {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-node-purple .tavish-sp-circle {
  border: 2px solid #3e32b0 !important;
}

.sp-node-red .tavish-sp-circle {
  border: 2px solid #e54b3c !important;
}

.tavish-sp-circle i {
  font-size: 1.05rem !important;
}

.sp-node-purple .tavish-sp-circle i {
  color: #3e32b0 !important;
}

.sp-node-red .tavish-sp-circle i {
  color: #e54b3c !important;
}

/* The Solid Vertical Spacing Line between nodes */
.tavish-sp-connector-line {
  width: 2px !important;
  flex-grow: 1 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  margin: 8px 0 !important;
  min-height: 40px !important;
  /* Forces solid breathing room space between content */
  transition: all 0.3s ease !important;
}

/* --- Right Side Content Space --- */
.tavish-sp-right-content {
  flex-grow: 1 !important;
  padding-bottom: 35px !important;
  /* Perfect uniform padding block */
}

/* Symmetrical Card Framework */
.tavish-sp-card {
  background: #ffffff !important;
  border: 1px solid rgba(62, 50, 176, 0.06) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  box-shadow: 0 4px 20px rgba(14, 17, 30, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

/* --- Interactive Premium Hover System --- */
.tavish-sp-row:hover .tavish-sp-card {
  transform: translateX(6px) !important;
}

.sp-node-purple:hover .tavish-sp-card {
  border-color: rgba(62, 50, 176, 0.35) !important;
  box-shadow: 0 12px 30px rgba(62, 50, 176, 0.05) !important;
}

.sp-node-red:hover .tavish-sp-card {
  border-color: rgba(229, 75, 60, 0.35) !important;
  box-shadow: 0 12px 30px rgba(229, 75, 60, 0.05) !important;
}

/* Glowing Circle and Line Transitions */
.sp-node-purple:hover .tavish-sp-circle {
  background: #3e32b0 !important;
}

.sp-node-red:hover .tavish-sp-circle {
  background: #e54b3c !important;
}

.tavish-sp-row:hover .tavish-sp-circle i {
  color: #ffffff !important;
}

.sp-node-purple:hover .tavish-sp-connector-line {
  background: #3e32b0 !important;
}

.sp-node-red:hover .tavish-sp-connector-line {
  background: #e54b3c !important;
}

/* --- High Readability Typography (Bigger & Spaced out) --- */
.tavish-sp-number {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 6px !important;
  opacity: 0.5 !important;
}

.sp-node-purple .tavish-sp-number {
  color: #3e32b0 !important;
}

.sp-node-red .tavish-sp-number {
  color: #e54b3c !important;
}

.tavish-sp-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  /* Increased for premium clear visibility */
  color: #0e111e !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.tavish-sp-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.98rem !important;
  /* Made larger so it does not compress */
  color: rgba(14, 17, 30, 0.7) !important;
  line-height: 1.65 !important;
  /* More space between lines for fast scanning */
  margin: 0 !important;
}

/* --- Smooth Responsive Breakpoints --- */
@media (max-width: 767px) {
  .tavish-sp-row {
    gap: 15px !important;
  }

  .tavish-sp-card {
    padding: 20px !important;
  }

  .tavish-sp-title {
    font-size: 1.15rem !important;
  }
}

/* *******************************************************************************************************************************
    Our Oracle APEX Development Process Services CSS End
*********************************************************************************************************************************/

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle APEX Development Services Page CSS End     =================================
                       ============================================================================

**********************************************************************************************************************************/


/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Forms to APEX Migration & Moderization Services Page CSS Start    =================================
                       ============================================================================
**********************************************************************************************************************************/
/* ==========================================================================
   TAVISH MODERN SLIDER SECTION (UPDATED)
   ========================================================================== */

/* Section Base */
.tavish-modern-slider-section {
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}

.tavish-modern-swiper {
  padding: 15px 10px 40px 10px !important;
}

/* --- Equal Height Flex Enablers --- */
.swiper-wrapper {
  display: flex !important;
}

.swiper-slide {
  height: auto !important;
  /* Forces all slides in a row to match the tallest card */
  display: flex !important;
}

/* --- NextGen Card Base Design --- */
.tavish-nextgen-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  /* Ensures 100% equal height across all cards */
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tavish-nextgen-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

/* --- Ambient Top Glow Accent --- */
.card-glow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transition: all 0.4s ease;
}

.card-purple .card-glow-bg {
  background: linear-gradient(90deg, #3e32b0, #6366f1);
}

.card-red .card-glow-bg {
  background: linear-gradient(90deg, #e54b3c, #ff6b6b);
}

.tavish-nextgen-card:hover .card-glow-bg {
  height: 6px;
}

/* --- Top Header Elements Inside Card --- */
.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.phase-pill {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase;
}

.card-purple .phase-pill {
  background: rgba(62, 50, 176, 0.08);
  color: #3e32b0;
}

.card-red .phase-pill {
  background: rgba(229, 75, 60, 0.08);
  color: #e54b3c;
}

.card-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: all 0.4s ease;
}

.card-purple .card-icon-wrapper {
  background: #f1f0fb;
  color: #3e32b0;
}

.card-red .card-icon-wrapper {
  background: #fdf0ee;
  color: #e54b3c;
}

.tavish-nextgen-card:hover .card-purple .card-icon-wrapper {
  background: #3e32b0;
  color: #ffffff;
  transform: rotate(-6deg) scale(1.05);
}

.tavish-nextgen-card:hover .card-red .card-icon-wrapper {
  background: #e54b3c;
  color: #ffffff;
  transform: rotate(6deg) scale(1.05);
}

/* --- Card Body Content (Stretches smoothly) --- */
.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-headline {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.3;
}

.card-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* --- Footer Tag Grid (Pinned to bottom for equal alignment) --- */
/* --- Footer Tag Grid (Updated for Multi-line Text Wrap) --- */
.card-footer-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
  margin-top: auto;
}

.tag-item {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: flex-start;
  /* Icon ko pehli line ke sath top align rakhne ke liye */
  gap: 8px;
  white-space: normal;
  /* Text overflow rok kar next line me bhejega */
  word-break: break-word;
  /* Lamba word ho toh properly wrap karega */
  line-height: 1.3;
  /* Multi-line readability ke liye spacing */
}

.tag-item i {
  margin-top: 2px;
  /* Icon ko font size ke hisab se perfectly middle/top center karne ke liye */
  flex-shrink: 0;
  /* Icon ka size squeeze hone se bachega */
}

.card-purple .tag-item i {
  color: #3e32b0;
  font-size: 0.85rem;
}

.card-red .tag-item i {
  color: #e54b3c;
  font-size: 0.85rem;
}

/* --- Navigation Controls & Pagination --- */
.slider-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.nav-btn:hover {
  background: #3e32b0;
  color: #ffffff;
  border-color: #3e32b0;
  box-shadow: 0 6px 15px rgba(62, 50, 176, 0.25);
}

.custom-dots {
  position: static !important;
  width: auto !important;
  display: flex;
  gap: 6px;
}

.custom-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #94a3b8;
  opacity: 0.6;
  border-radius: 10px;
  transition: all 0.3s ease;
  margin: 0 !important;
}

.custom-dots .swiper-pagination-bullet-active {
  background: #3e32b0 !important;
  opacity: 1;
  width: 28px;
}

/* Responsive Styles */
@media (max-width: 576px) {
  .card-footer-tags {
    grid-template-columns: 1fr;
  }
}

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Forms to APEX Migration & Moderization Services Page CSS End      =================================
                       ============================================================================
**********************************************************************************************************************************/




/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Training Programs for Business Teams Services Page CSS Start      =================================
                       ============================================================================
**********************************************************************************************************************************/

/* --- Isolated Framework Controller --- */
.tavish-hub-section {
  position: relative !important;
}

.tavish-hub-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* --- High-Density Accordion Interactive Ribbon --- */
.tavish-hub-trigger {
  background: #ffffff !important;
  border: 1px solid rgba(14, 17, 30, 0.05) !important;
  border-radius: 16px !important;
  padding: 16px 24px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.th-trigger-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: #64748b !important;
  opacity: 0.5 !important;
  margin-right: 20px !important;
  transition: color 0.3s ease !important;
}

.th-trigger-content {
  flex-grow: 1 !important;
}

.th-trigger-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #0e111e !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  transition: color 0.3s ease !important;
}

.th-trigger-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  display: block !important;
  margin-top: 4px !important;
  transition: color 0.3s ease !important;
}

.th-trigger-arrow {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  transition: transform 0.35s ease, color 0.3s ease !important;
}

/* --- Premium Active States Engine --- */
.tavish-hub-trigger.active {
  transform: scale(1.01) translateX(4px) !important;
  border-color: transparent !important;
}

.th-purple.active {
  background: #3e32b0 !important;
  box-shadow: 0 12px 25px rgba(62, 50, 176, 0.18) !important;
}

.th-red.active {
  background: #e54b3c !important;
  box-shadow: 0 12px 25px rgba(229, 75, 60, 0.18) !important;
}

/* Color Inversion on Activation */
.tavish-hub-trigger.active .th-trigger-title,
.tavish-hub-trigger.active .th-trigger-num,
.tavish-hub-trigger.active .th-trigger-arrow {
  color: #ffffff !important;
  opacity: 1 !important;
}

.tavish-hub-trigger.active .th-trigger-subtitle {
  color: rgba(255, 255, 255, 0.75) !important;
}

.tavish-hub-trigger.active .th-trigger-arrow {
  transform: rotate(90deg) !important;
}

/* --- Right Side Preview Arena (The Learning Radius) --- */
.tavish-hub-display-panel {
  background: #ffffff !important;
  border: 1px solid rgba(14, 17, 30, 0.05) !important;
  border-radius: 24px !important;
  padding: 45px 50px !important;
  box-shadow: 0 10px 40px rgba(14, 17, 30, 0.01) !important;
  height: 100% !important;
  min-height: 490px !important;
  /* Fixed balance frame to prevent page jumps */
  display: flex !important;
  align-items: center !important;
}

.tavish-hub-pane {
  display: none !important;
  width: 100% !important;
  animation: thFadeReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.tavish-hub-pane.th-pane-active {
  display: block !important;
}

@keyframes thFadeReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.th-pane-header {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

/* Modern Rounded Technology Boxes */
.th-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.th-icon-box i {
  font-size: 1.35rem !important;
}

.box-purple {
  background: rgba(62, 50, 176, 0.08) !important;
  color: #3e32b0 !important;
}

.box-red {
  background: rgba(229, 75, 60, 0.08) !important;
  color: #e54b3c !important;
}

.th-pane-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.85rem !important;
  color: #0e111e !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.th-pane-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  color: #475569 !important;
  line-height: 1.75 !important;
  margin-bottom: 35px !important;
}

/* --- Syllabus High-Density Component Grids --- */
.th-syllabus-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.th-syllabus-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.3s ease !important;
}

.th-syllabus-card span {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.th-syllabus-card i {
  font-size: 1.15rem !important;
}

.s-purple i {
  color: #3e32b0 !important;
}

.s-red i {
  color: #e54b3c !important;
}

/* Micro Card Hover Interactive Engine */
.th-syllabus-card:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  transform: translateY(-2px) !important;
}

.s-purple:hover {
  border-color: rgba(62, 50, 176, 0.15) !important;
}

.s-red:hover {
  border-color: rgba(229, 75, 60, 0.15) !important;
}

/* --- Fully Scalable Adaptive Breakpoints --- */
@media (max-width: 991px) {
  .tavish-hub-display-panel {
    padding: 30px !important;
    min-height: auto !important;
    margin-top: 15px !important;
  }

  .th-syllabus-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ******************************************************************************************************************************
                       ============================================================================
        =============================      Oracle Training Programs for Business Teams Services Page CSS End      =================================
                       ============================================================================
**********************************************************************************************************************************/








/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////                                                                                                                    ////
////-------------------------------------------- FOOTER SECTION CSS START ----------------------------------------------////
////                                                                                                                    ////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* --- Variables --- */
:root {
  --primary-gradient: linear-gradient(135deg, #362cc0 0%, #df4231 100%);
  --bg-dark: #0a0a0e;
  --text-white: #ffffff;
  --text-grey: #e0e0e0;
}

/* --- General Footer Styling --- */
.premium-footer {
  background-color: var(--bg-dark);
  color: var(--text-white);
  padding: 80px 0 0;
  font-family: "Inter", sans-serif;
  position: relative;
}

.premium-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--primary-gradient);
}

/* --- Brand & Text --- */
.footer-logo {
  height: 48px;
}

.brand-desc {
  font-size: 14px;
  line-height: 1.7;
  max-width: 320px;
}

.text-light-grey {
  color: var(--text-grey) !important;
}

.footer-title {
  color: var(--text-white);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 25px;
  position: relative;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background: var(--primary-gradient);
  border-radius: 10px;
}

/* --- Links & Icons --- */
.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links li a {
  color: var(--text-grey);
  text-decoration: none;
  transition: 0.3s;
  font-size: 14px;
}

.footer-links li a:hover {
  color: #ffffff;
  padding-left: 8px;
}

.text-gradient {
  background: var(--primary-gradient);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 50%;
  margin-right: 12px;
  transition: 0.3s;
  text-decoration: none;
}

.social-icon:hover {
  background: var(--primary-gradient);
  transform: translateY(-5px);
  color: #fff;
}

/* --- Newsletter --- */
.newsletter-box {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-box input {
  background: transparent;
  border: none;
  color: white;
  padding-left: 10px;
  width: 100%;
  outline: none;
}

.gradient-btn {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 10px 18px;
  border-radius: 50px;
  transition: 0.3s;
}

/* --- Bottom Section (Yahan changes kiye hain) --- */
.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
}

.partner-card {
  background: white;
  padding: 6px 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.partner-logo-footer {
  height: 48px;
}

.legal-links,
.legal-links a {
  color: #888;
  font-size: 12px;
  text-decoration: none;
}

/* --- Responsive Media Queries --- */
@media (max-width: 991px) {

  .footer-brand,
  .social-links {
    text-align: center;
  }

  .brand-desc {
    margin: 0 auto;
  }

  .social-links {
    justify-content: center;
    display: flex;
  }
}

@media (max-width: 576px) {

  /* Mobile optimization for bottom bar */
  .partner-card {
    padding: 4px 10px;
  }

  .partner-logo-footer {
    height: 22px;
  }

  .footer-bottom-flex p,
  .legal-links,
  .legal-links span {
    font-size: 10px !important;
  }

  .footer-bottom-flex {
    gap: 8px;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////                                                                                                                    ////
////-------------------------------------------- FOOTER SECTION CSS END ------------------------------------------------////
////                                                                                                                    ////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.case-study-eyebrow {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.case-study-heading {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.case-study-subtitle {
  font-size: 18px;
  color: #fff;
  max-width: 700px;
  line-height: 1.6;
  margin-bottom: 20px;
}


/* ============================================================
     TOKENS — exactly as supplied, nothing added
  ============================================================ */
:root {
  --primary-blue: #362cc0;
  --accent-red: #df4231;
  --white: #ffffff;
  --text-dark: #1a1a1a;
  --ink: #14142b;
  --muted: #6b7280;
  --slate: #475569;
  --surface-tint: #f5f4fc;
  --border-soft: rgba(20, 20, 43, 0.08);
}

/* ============================================================
     SHARED SECTION SCAFFOLDING (ebsx- prefix, won't collide with
     anything already on the page)
  ============================================================ */
.ebsx-section {
  padding: 96px 5%;
}

.ebsx-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.ebsx-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 18px;
}

.ebsx-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent-red);
  display: block;
}

.ebsx-eyebrow.on-dark {
  color: #ffffff;
}

.ebsx-eyebrow.on-dark::before {
  background: rgba(255, 255, 255, 0.55);
}

.ebsx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.ebsx-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  max-width: 620px;
  margin: 0;
}

.ebsx-title.on-dark {
  color: var(--white);
}

.ebsx-desc {
  color: var(--slate);
  font-size: 16px;
  line-height: 1.75;
  max-width: 420px;
  margin: 0;
}

.ebsx-desc.on-dark {
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
     1. SERVICES
  ============================================================ */
.ebsx-services {
  background: var(--white);
}

.ebsx-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
}

.ebsx-svc-card {
  background: var(--white);
  padding: 40px 36px;
  position: relative;
}

.ebsx-svc-index {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-red);
  letter-spacing: 0.08em;
  margin-bottom: 22px;
  display: block;
}

.ebsx-svc-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 12px;
}

.ebsx-svc-card>p {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 22px;
}

.ebsx-svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ebsx-svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-dark);
  line-height: 1.5;
}

.ebsx-svc-list li i {
  color: var(--primary-blue);
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ============================================================
     2. MODULES
  ============================================================ */
.ebsx-modules {
  background: var(--surface-tint);
}

.ebsx-modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 0;
}

.ebsx-mod-tile {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 24px 18px;
  transition: border-color .2s, transform .2s;
}

.ebsx-mod-tile:hover {
  border-color: var(--primary-blue);
  transform: translateY(-3px);
}

.ebsx-mod-tile i {
  font-size: 20px;
  color: var(--primary-blue);
  margin-bottom: 14px;
  display: block;
}

.ebsx-mod-tile h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}

.ebsx-mod-tile p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
     3. WHY TAVISH
  ============================================================ */
.ebsx-why {
  background: var(--surface-tint);
}

.ebsx-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ebsx-why-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-red);
  border-radius: 14px;
  padding: 32px 26px 30px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ebsx-why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(20, 20, 43, 0.08);
}

.ebsx-why-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  margin-bottom: 18px;
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.ebsx-why-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.ebsx-why-card p {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
     4. PROCESS
  ============================================================ */
.ebsx-process {
  background: var(--white);
}

.ebsx-process-rail {
  position: relative;
  margin-top: 8px;
}

.ebsx-process-rail::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-soft);
}

.ebsx-process-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  position: relative;
}

.ebsx-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--primary-blue);
  color: var(--primary-blue);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.ebsx-process-step:first-child .ebsx-step-num {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--white);
}

.ebsx-process-step h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.ebsx-process-step p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
     5. INDUSTRIES
  ============================================================ */
.ebsx-industries {
  background: var(--surface-tint);
}

.ebsx-industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ebsx-ind-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 26px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color .2s;
}

.ebsx-ind-card:hover {
  border-color: var(--accent-red);
}

.ebsx-ind-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.ebsx-ind-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.ebsx-ind-card p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
     6. CERTIFICATIONS
  ============================================================ */
.ebsx-cert {
  background: var(--white);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 64px 5%;
}

.ebsx-cert-inner {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.ebsx-cert-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.ebsx-cert-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 50px;
  padding: 12px 22px;
  background: var(--surface-tint);
}

.ebsx-cert-badge i {
  color: var(--accent-red);
  font-size: 16px;
}

.ebsx-cert-badge span {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
     RESPONSIVE
  ============================================================ */
@media (max-width: 992px) {
  .ebsx-services-grid {
    grid-template-columns: 1fr;
  }

  .ebsx-modules-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ebsx-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ebsx-process-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }

  .ebsx-process-rail::before {
    display: none;
  }

  .ebsx-industries-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .ebsx-section {
    padding: 64px 6%;
  }

  .ebsx-head {
    margin-bottom: 36px;
  }

  .ebsx-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ebsx-why-grid {
    grid-template-columns: 1fr;
  }

  .ebsx-process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .ebsx-cert-row {
    gap: 10px;
  }

  .ebsx-cert-badge {
    padding: 10px 16px;
  }
}



/* ============================================================
     TOKENS — same set used across the site, nothing added
  ============================================================ */
:root {
  --primary-blue: #362cc0;
  --accent-red: #df4231;
  --white: #ffffff;
  --text-dark: #1a1a1a;
  --ink: #14142b;
  --muted: #6b7280;
  --slate: #475569;
  --surface-tint: #f5f4fc;
  --border-soft: rgba(20, 20, 43, 0.08);
}

/* ============================================================
     SHARED SECTION SCAFFOLDING (fsx- prefix)
  ============================================================ */
.fsx-section {
  padding: 96px 5%;
}

.fsx-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.fsx-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 18px;
}

.fsx-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent-red);
  display: block;
}

.fsx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.fsx-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  max-width: 640px;
  margin: 0;
}

.fsx-desc {
  color: var(--slate);
  font-size: 16px;
  line-height: 1.75;
  max-width: 420px;
  margin: 0;
}

/* ============================================================
     1. SERVICES
  ============================================================ */
.fsx-services {
  background: var(--white);
}

.fsx-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
}

.fsx-svc-card {
  background: var(--white);
  padding: 40px 36px;
}

.fsx-svc-index {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-red);
  letter-spacing: 0.08em;
  margin-bottom: 22px;
  display: block;
}

.fsx-svc-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 12px;
}

.fsx-svc-card>p {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 22px;
}

.fsx-svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.fsx-svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-dark);
  line-height: 1.5;
}

.fsx-svc-list li i {
  color: var(--primary-blue);
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ============================================================
     2. CLOUD PILLARS
  ============================================================ */
.fsx-pillars {
  background: var(--surface-tint);
}

.fsx-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fsx-pillar-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 30px 24px;
  transition: transform .2s, box-shadow .2s;
}

.fsx-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(20, 20, 43, 0.08);
}

.fsx-pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 18px;
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary-blue);
}

.fsx-pillar-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.fsx-pillar-card p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
     3. MODULE COVERAGE (TABS)
  ============================================================ */
.fsx-modules {
  background: var(--white);
}

.fsx-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.fsx-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--slate);
  transition: all .2s;
}

.fsx-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.fsx-tab:hover:not(.is-active) {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.fsx-mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.fsx-mod-item {
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 18px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fsx-mod-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  margin-top: 6px;
  flex-shrink: 0;
}

.fsx-mod-item h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.fsx-mod-item p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
     4. EBS vs FUSION COMPARISON
  ============================================================ */
.fsx-compare {
  background: var(--surface-tint);
}

.fsx-compare-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--white);
}

.fsx-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.fsx-compare-table th {
  font-family: 'Poppins', sans-serif;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-tint);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.fsx-compare-table td {
  padding: 14px 20px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.fsx-compare-table tr:last-child td {
  border-bottom: none;
}

.fsx-compare-table .fsx-feature {
  color: var(--ink);
  font-weight: 600;
}

.fsx-compare-table .fsx-ebs-col {
  color: var(--muted);
}

.fsx-compare-table .fsx-fusion-col {
  color: var(--primary-blue);
  font-weight: 600;
}

.fsx-badge-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

.fsx-badge-ebs {
  background: rgba(223, 66, 49, 0.1);
  color: var(--accent-red);
}

.fsx-badge-fusion {
  background: rgba(54, 44, 192, 0.1);
  color: var(--primary-blue);
}

/* ============================================================
     5. WHY TAVISH / ADVANTAGE
  ============================================================ */
.fsx-advantage {
  background: var(--white);
}

.fsx-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fsx-adv-card {
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-red);
  border-radius: 14px;
  padding: 30px 24px;
  transition: transform .2s, box-shadow .2s;
}

.fsx-adv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(20, 20, 43, 0.06);
}

.fsx-adv-icon {
  font-size: 24px;
  margin-bottom: 16px;
  display: block;
}

.fsx-adv-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.fsx-adv-card p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
     6. PROCESS
  ============================================================ */
.fsx-process {
  background: var(--surface-tint);
}

.fsx-process-rail {
  position: relative;
}

.fsx-process-rail::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-soft);
}

.fsx-process-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  position: relative;
}

.fsx-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--primary-blue);
  color: var(--primary-blue);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.fsx-process-step:first-child .fsx-step-num {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--white);
}

.fsx-process-step h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.fsx-process-step p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
     7. INDUSTRIES
  ============================================================ */
.fsx-industries {
  background: var(--white);
}

.fsx-industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.fsx-ind-card {
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 26px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color .2s;
}

.fsx-ind-card:hover {
  border-color: var(--accent-red);
}

.fsx-ind-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.fsx-ind-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.fsx-ind-card p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
     8. CERTIFICATIONS
  ============================================================ */
.fsx-cert {
  background: var(--white);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 64px 5%;
}

.fsx-cert-inner {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.fsx-cert-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.fsx-cert-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 50px;
  padding: 12px 22px;
  background: var(--surface-tint);
}

.fsx-cert-badge i {
  color: var(--accent-red);
  font-size: 16px;
}

.fsx-cert-badge span {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
     RESPONSIVE
  ============================================================ */
@media (max-width: 992px) {
  .fsx-services-grid {
    grid-template-columns: 1fr;
  }

  .fsx-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fsx-mod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fsx-adv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fsx-process-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }

  .fsx-process-rail::before {
    display: none;
  }

  .fsx-industries-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .fsx-section {
    padding: 64px 6%;
  }

  .fsx-head {
    margin-bottom: 36px;
  }

  .fsx-pillars-grid {
    grid-template-columns: 1fr;
  }

  .fsx-mod-grid {
    grid-template-columns: 1fr;
  }

  .fsx-adv-grid {
    grid-template-columns: 1fr;
  }

  .fsx-process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .fsx-cert-row {
    gap: 10px;
  }

  .fsx-cert-badge {
    padding: 10px 16px;
  }
}

/* ================= HERO CLOUD PILLS ================= */
.hba-hero-pills {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hba-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.hba-hero-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.hba-hero-pill-icon {
  font-size: 16px;
  line-height: 1;
}

/* Responsive Rules for Small Devices */
@media (max-width: 992px) {
  .hba-hero-pills {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .hba-hero-pills {
    gap: 10px;
  }

  .hba-hero-pill {
    padding: 8px 16px;
    font-size: 13px;
  }
}





/* ==========================================================================
   Frappe & ERPNext section styles — Tavish Infotech
   All selectors are prefixed .erp- so nothing leaks into other service pages.
   ========================================================================== */

.erp-scope {
  --erp-primary: #362cc0;
  --erp-primary-dark: #241d86;
  --erp-accent: #df4231;
  --erp-white: #ffffff;
  --erp-ink: #14142b;
  --erp-muted: #6b7280;
  --erp-slate: #475569;
  --erp-tint: #f5f4fc;
  --erp-border: rgba(20, 20, 43, 0.08);
  --erp-shadow: 0 10px 30px rgba(20, 20, 43, 0.06);
  --erp-radius: 16px;
  font-family: "Poppins", sans-serif;
  color: var(--erp-ink);
}

.erp-scope *,
.erp-scope *::before,
.erp-scope *::after {
  box-sizing: border-box;
}

/* ---------- Section shell ---------- */
.erp-section {
  padding: 84px 0;
  background: var(--erp-white);
}

.erp-section-tint {
  background: var(--erp-tint);
}

.erp-section-soft {
  background: #f8fafc;
}

.erp-head {
  max-width: 900px;
  margin-bottom: 48px;
}

.erp-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.erp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--erp-primary);
  background: rgba(54, 44, 192, .08);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 18px;
  white-space: nowrap;
}

.erp-h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.22;
  font-weight: 700;
  color: var(--erp-ink);
  margin: 0 0 16px;
}

.erp-h2 span {
  color: var(--erp-primary);
}

.erp-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--erp-slate);
  margin: 0;
}

.erp-p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--erp-slate);
  margin: 0 0 18px;
}

.erp-p:last-child {
  margin-bottom: 0;
}

.erp-p strong {
  color: var(--erp-ink);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.erp-hero {
  position: relative;
  overflow: hidden;
  padding: 132px 0 92px;
  background: linear-gradient(120deg, #a48080 0%, #8f8ad2 55%, #898899 100%);
  color: var(--erp-white);
}

/* .erp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--erp-hero-img, none);
  background-size: cover;
  background-position: center;
  opacity: .18;
  mix-blend-mode: luminosity;
} */

.erp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--erp-hero-img, none);
  background-size: cover;
  background-position: 70% center;
  opacity: 1.45;
  mix-blend-mode: overlay;
}

.erp-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 66, 49, .38), transparent 68%);
}

.erp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.erp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
  white-space: nowrap;
}

.erp-hero-badge i {
  color: #ffd7d2;
}

.erp-hero h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
}

.erp-hero-sub {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  color: #ffd7d2;
  margin: 0 0 20px;
}

.erp-hero-desc {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 32px;
  max-width: 780px;
}

.erp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.erp-crumb {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 22px;
}

.erp-crumb a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}

.erp-crumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.erp-crumb span[aria-current] {
  color: #fff;
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.erp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.erp-btn i {
  font-size: 13px;
}

.erp-btn-primary {
  background: var(--erp-accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(223, 66, 49, .3);
}

.erp-btn-primary:hover {
  background: #c5321f;
  color: #fff;
  transform: translateY(-2px);
}

.erp-btn-ghost {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}

.erp-btn-ghost:hover {
  background: #fff;
  color: var(--erp-primary);
  transform: translateY(-2px);
}

.erp-btn-solid {
  background: var(--erp-primary);
  color: #fff;
  box-shadow: 0 12px 26px rgba(54, 44, 192, .26);
}

.erp-btn-solid:hover {
  background: var(--erp-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Generic grids ---------- */
.erp-grid {
  display: grid;
  gap: 24px;
}

.erp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.erp-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.erp-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Cards ---------- */
.erp-card {
  background: var(--erp-white);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  padding: 28px;
  box-shadow: var(--erp-shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.erp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 20, 43, .1);
  border-color: rgba(54, 44, 192, .22);
}

.erp-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  background: rgba(54, 44, 192, .1);
  color: var(--erp-primary);
}

.erp-icon-accent {
  background: rgba(223, 66, 49, .1);
  color: var(--erp-accent);
}

.erp-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--erp-ink);
  margin: 0 0 10px;
}

.erp-card-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--erp-slate);
  margin: 0;
}

/* ---------- Service link cards (pillar page) ---------- */
.erp-svc-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  padding: 26px;
  text-decoration: none;
  box-shadow: var(--erp-shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.erp-svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(54, 44, 192, .28);
  box-shadow: 0 18px 40px rgba(20, 20, 43, .1);
}

.erp-svc-card .erp-icon {
  margin-bottom: 0;
  flex: 0 0 52px;
}

.erp-svc-body {
  flex: 1;
}

.erp-svc-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--erp-ink);
  margin-bottom: 6px;
}

.erp-svc-path {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--erp-muted);
  word-break: break-all;
}

.erp-svc-card .erp-svc-arrow {
  color: var(--erp-accent);
  font-size: 14px;
  margin-top: 6px;
}

/* ---------- Check list ---------- */
.erp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.erp-list li {
  position: relative;
  padding-left: 40px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--erp-slate);
}

.erp-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(54, 44, 192, .1);
  color: var(--erp-primary);
}

.erp-list-accent li::before {
  background: rgba(223, 66, 49, .1);
  color: var(--erp-accent);
}

/* ---------- Grouped block (service pages) ---------- */
.erp-block {
  background: #fff;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  padding: 34px;
  box-shadow: var(--erp-shadow);
  height: 100%;
}

.erp-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--erp-ink);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--erp-border);
}

.erp-block-title i {
  color: var(--erp-accent);
  font-size: 16px;
}

/* ---------- Modules ---------- */
.erp-mod {
  background: #fff;
  border: 1px solid var(--erp-border);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
  transition: border-color .28s ease, transform .28s ease;
}

.erp-mod:hover {
  border-color: rgba(54, 44, 192, .28);
  transform: translateY(-3px);
}

.erp-mod-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--erp-primary);
  margin: 0 0 10px;
}

.erp-mod-name i {
  font-size: 14px;
  color: var(--erp-accent);
}

.erp-mod-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--erp-slate);
  margin: 0;
}

/* ---------- Steps / delivery ---------- */
.erp-steps {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.erp-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--erp-border);
  border-radius: 14px;
  padding: 22px 24px;
}

.erp-step-num {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--erp-primary), #5a4de0);
}

.erp-step:nth-child(even) .erp-step-num {
  background: linear-gradient(135deg, var(--erp-accent), #ef6a5a);
}

.erp-step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--erp-ink);
  margin: 0 0 6px;
}

.erp-step-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--erp-slate);
  margin: 0;
}

/* ---------- Certification strip ---------- */
.erp-cert {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.erp-cert span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--erp-primary);
  background: #fff;
  border: 1px solid rgba(54, 44, 192, .18);
  padding: 10px 16px;
  border-radius: 999px;
}

.erp-cert span i {
  color: var(--erp-accent);
}

/* ---------- Split (text + panel) ---------- */
.erp-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.erp-panel {
  background: linear-gradient(140deg, #1b1560, var(--erp-primary));
  color: #fff;
  border-radius: 22px;
  padding: 40px;
}

.erp-panel h3 {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 20px;
  color: #fff;
}

.erp-panel .erp-list li {
  color: rgba(255, 255, 255, .9);
}

.erp-panel .erp-list li::before {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ---------- FAQ ---------- */
.erp-faq {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.erp-faq-item {
  background: #fff;
  border: 1px solid var(--erp-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.erp-faq-item.active {
  border-color: rgba(54, 44, 192, .3);
  box-shadow: var(--erp-shadow);
}

.erp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 22px 24px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--erp-ink);
  font-family: inherit;
}

.erp-faq-q i {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--erp-primary);
  transition: transform .25s ease;
}

.erp-faq-item.active .erp-faq-q {
  color: var(--erp-primary);
}

.erp-faq-item.active .erp-faq-q i {
  transform: rotate(45deg);
  color: var(--erp-accent);
}

.erp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.erp-faq-item.active .erp-faq-a {
  max-height: 520px;
}

.erp-faq-a p {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--erp-slate);
}

/* ---------- Closing note ---------- */
.erp-note {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--erp-tint);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  padding: 30px 32px;
  margin-top: 36px;
}

.erp-note i {
  font-size: 20px;
  color: var(--erp-accent);
  margin-top: 2px;
}

.erp-note p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--erp-ink);
}

/* ---------- CTA band ---------- */
.erp-cta {
  padding: 84px 0;
  background: var(--erp-white);
}

.erp-cta-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #1b1560 0%, var(--erp-primary) 60%, #4b3fd6 100%);
  border-radius: 26px;
  padding: 56px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  align-items: center;
}

.erp-cta-card::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 66, 49, .35), transparent 68%);
}

.erp-cta-body {
  position: relative;
  z-index: 2;
}

.erp-cta-body h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
}

.erp-cta-body p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 12px;
}

.erp-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.erp-cta-actions .erp-btn {
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .erp-split {
    gap: 36px;
  }
}

@media (max-width: 991px) {

  .erp-section,
  .erp-cta {
    padding: 64px 0;
  }

  .erp-hero {
    padding: 108px 0 72px;
  }

  .erp-grid-3,
  .erp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .erp-split {
    grid-template-columns: 1fr;
  }

  .erp-panel {
    padding: 32px;
  }

  .erp-cta-card {
    grid-template-columns: 1fr;
    padding: 40px;
  }

  .erp-head {
    margin-bottom: 36px;
  }
}

@media (max-width: 767px) {

  .erp-section,
  .erp-cta {
    padding: 52px 0;
  }

  .erp-hero {
    padding: 96px 0 60px;
  }

  .erp-grid-2,
  .erp-grid-3,
  .erp-grid-4,
  .erp-steps {
    grid-template-columns: 1fr;
  }

  .erp-block {
    padding: 26px;
  }

  .erp-card {
    padding: 24px;
  }

  .erp-note {
    flex-direction: column;
    gap: 12px;
    padding: 24px;
  }

  .erp-cta-card {
    padding: 30px;
    border-radius: 20px;
  }

  .erp-hero-actions .erp-btn,
  .erp-btn {
    width: 100%;
    justify-content: center;
  }

  .erp-faq-q {
    padding: 18px;
    font-size: 15.5px;
  }

  .erp-faq-a p {
    padding: 0 18px 20px;
  }
}

@media (max-width: 575px) {
  .erp-svc-card {
    flex-direction: column;
    gap: 14px;
  }

  .erp-step {
    flex-direction: column;
    gap: 14px;
  }

  .erp-hero h1 {
    font-size: 27px;
  }
}