/* ==========================================
   GLOBAL TYPOGRAPHY & COLORS 
   ========================================== */
body {
  font-family: "Host Grotesk", sans-serif;
  font-size: 1.125rem !important;
  color: #2a2a2a ;
  font-weight: 400 !important;
  background-color: #fcfbfe;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .navbar-brand strong {
  font-family: "Jost", sans-serif;
	line-height: 1.3
}

p {
  font-size: 1.125 !important;
  font-weight: 400 !important;
  color: #2a2a2a  !important
}
:root {
  --primary-purple: #015cc0;
  --primary-light: #ece9ff;
  --text-navy: #24262c;
  --text-muted: #353a4e;
}
.text-navy {
  color: var(--text-navy);
}
.text-secondary-muted {
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}
.tracking-wide {
  letter-spacing: 1px;
  font-size: 0.85rem;
}
/* ==========================================
   SHARED UI COMPONENTS (Buttons, Badges, Links)
   ========================================== */
.bg-badge {
  background-color: #eeecfb;
  color: var(--primary-purple);
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.btn-consultation {
  background-color: var(--primary-purple);
  color: #fff !important;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-consultation:hover {
  background-color: #2b17bc;
  transform: translateY(-2px);
}
.btn-primary-custom {
  background-color: var(--primary-purple);
  border: none;
  font-weight: 500;
  padding: 0.85rem 2rem;
  color: #fff;
  transition: all 0.3s ease;
}
.btn-primary-custom:hover {
  background-color: #2b17bc;
  color: #fff;
  transform: translateY(-2px);
}
.btn-primary-custom:active {
  background-color: #2b17bc;
  color: #fff !important;
  transform: translateY(-2px);
}
.btn-video {
  color: var(--primary-purple);
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-video:hover {
  color: #2b17bc;
  opacity: 0.85;
}
.action-link {
  font-weight: 600;
  text-decoration: none;
  display: inline;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  transition: all 0.3s ease !important;
}
.action-link:hover {
  gap: 0.85rem;
  opacity: 0.85;
  transform: translateY(-2px) !important;
}
.action-link-purple {
  color: #6366f1;
}
.action-link-green {
  color: #22c55e;
}
.action-link-blue {
  color: #3b82f6;
}
/* ==========================================
   HEADER & UNIFIED MEGA MENU
   ========================================== */
.navbar-brand {
  font-size: 1.35rem;
  color: var(--text-navy);
}
.logo-icon i {
  color: var(--primary-purple);
  font-size: 1.5rem;
  transform: rotate(180deg);
}
.icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.icon-box-sm {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.95rem;
}
.bg-purple-light {
  background-color: #ece9f7;
}
.text-purple {
  color: #7044ff;
}
.bg-green-light {
  background-color: #e0f3e6;
}
.text-green {
  color: #22c55e;
}
.bg-blue-light {
  background-color: #e5f0ff;
}
.text-blue {
  color: #3b82f6;
}
.bg-pink-light {
  background-color: #fff1f2;
}
.text-pink {
  color: #f43f5e;
}
.bg-orange-light {
  background-color: #fff7ed;
}
.text-orange {
  color: #f97316;
}
.text-primary-custom {
  color: var(--primary-purple);
}
.bg-purple-light2 {
  background-color: #f3f0fd;
}
.bg-green-light2 {
  background-color: #eafff1;
}
.bg-blue-light2 {
  background-color: #e5f0ff;
}
.bg-pink-light2 {
  background-color: #fff1f2;
}
.bg-orange-light2 {
  background-color: #fff7ed;
}
.bg-red-light2 {
  background-color: #fbf1f1;
}
.fs-7 {
  font-size: 0.7rem !important;
}
.z-index-top {
  z-index: 1050 !important;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-section {
/*  background: radial-gradient(circle at 85% 30%, #f1ebff 0%, #fcfbfe 60%);*/
  padding-bottom: 0 !important;
}
.main-title {
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.25;
  color: var(--text-navy);
}
.gradient-text {
  background: linear-gradient(135deg, #3b22e0 30%, #7000ff 100%)!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
}

.gradient-text-2 {
  background: linear-gradient(135deg, #007eff 30%, #00ceff 100%)!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
}

.orbital-ring-1, .orbital-ring-2 {
  position: absolute;
  border: 1.5px dashed rgba(59, 34, 224, 0.06);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.orbital-ring-1 {
  width: 520px;
  height: 520px;
}
.hero-graphic-container {
  z-index: 2;
  display: inline-block;
}
.main-hero-img {
  max-width: 100%;
  height: auto;
}
.floating-badge {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(224 221 252);
  min-width: 320px;
  z-index: 3;
  box-shadow: 0 1.5rem 1rem rgb(224 221 252) !important;
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}
.features-grid {
  border-color: rgba(0, 0, 0, 0.06) !important;
}
.feature-icon i {
  opacity: 0.85;
}
.trusted-brands-bar {
  margin-top: 0rem;
}
.brand-item {
  font-size: 1.1rem;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
	background:white;
	padding:7px 10px;
	border-radius:5px;
}
.opacity-70 {
  opacity: 0.55;
}
@media (max-width: 991.98px) {
  .main-title {
    font-size: 2.68rem;
  }
  .floating-badge {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 2rem auto 0;
    display: inline-flex !important;
  }
  .hero-section {
    text-align: center;
  }
  .text-secondary-muted {
    padding-right: 0 !important;
  }
}
/* ==========================================
   SOLUTIONS AT EVERY STAGE SECTION
   ========================================== */
.solutions-stage-section {
  background-color: #ffffff;
}
.stage-overline {
  color: var(--primary-purple);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
}
.stage-card {
  background: #ffffff;
  border: 1px solid #edecf7 !important;
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.stage-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 1.5rem 3rem rgb(224 221 252);
  border-color: #fff;
}
.stage-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.icon-wrapper-purple {
  background-color: #f8f6ff;
  color: #6366f1;
  border: 1px solid #eeebff;
}
.icon-wrapper-green {
  background-color: #f0fdf4;
  color: #22c55e;
  border: 1px solid #dcfce7;
}
.icon-wrapper-blue {
  background-color: #eff6ff;
  color: #3b82f6;
  border: 1px solid #dbeafe;
}
.stage-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: .85rem;
  flex-grow: 1;
}
.stage-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
  color: #475569;
}
.stage-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: #0f172a;
  font-size: 1.25rem;
  line-height: 1.1;
}
.gov-trust-banner {
  background-color: #faf9ff;
  border-radius: 1rem;
}
.gov-logos-wrapper {
  opacity: 0.8;
}
.gov-logo-item { /* filter: grayscale(100%); */ opacity: 1;
  transition: all 0.3s ease;
  cursor: default;
}
.gov-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* ==========================================
   WHAT WE BUILD SECTION
   ========================================== */
.what-we-build-section {
  background-color: #ffffff;
}
.build-card {
  transition: all 0.3s ease;
  border-color: #edecf7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.build-card:hover {
  transform: translateY(-8px);
  border-color: #edecf7 !important;
  box-shadow: 0 1.5rem 3rem rgb(224 221 252);
}
.step-line {
  height: 3px;
  background-color: var(--primary-purple);
  opacity: 0.7;
  width: 45px;
  flex-grow: 0 !important;
}
.build-list {
  list-style: none;
  padding-left: 0;
  padding-top: 16px;
  border-top: 1px solid #edecf7;
}
.build-list li {
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
  color: #24262c;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.build-list li i {
  color: var(--primary-purple);
  font-size: 1.05rem;
}
.additional-services-banner {
  background-color: #f8f6ff;
  border: 1px solid #edecf7 !important;
  transition: all 0.3s ease;
}
.additional-services-banner:hover {
  transform: translateY(-8px) !important;
  border-color: #edecf7 !important;
}
.bullet-dot {
  width: 6px;
  height: 6px;
  background-color: var(--primary-purple);
  border-radius: 50%; 
  display: inline-block;
}
.banner-footer-link {
  border-top-color: rgba(99, 102, 241, 0.15) !important;
}
.bg-light-purple {
  background-color: #f8f6ff;
  position: relative;
  top: -16px;
}
/* Dividers styling */
@media (min-width: 768px) {
  .service-divider-col:not(:last-child) {
    border-right: 1px solid #d9d9ef;
  }
}
@media (max-width: 767.98px) {
  .service-divider-col:nth-child(odd) {
    border-right: 1px solid #d9d9ef;
  }
  .service-divider-col {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .service-divider-col:nth-child(1), .service-divider-col:nth-child(2) {
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  }
}
/* =====================
   OUR PROCESS SECTION
   ===================== */
.our-process-section {
  background-color: #ffffff;
}
/* Base setup for columns to handle the relative connector line */
.process-step-col {
  position: relative;
}
/* The connecting dashed line */
.process-connector {
  position: absolute;
  top: 48px; /* Perfectly centers the line vertically behind the 96px icon */
  left: 50%;
  width: 100%;
  height: 2px;
  border-top: 2px dashed #e2e8f0; /* Soft gray dashed line */
  z-index: 1;
}
/* Icon Container */
.process-icon-wrapper {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Soft white border to make it pop off the dashed line */
  border: 2px solid #ffffff;
  box-shadow: 0 .5rem .5rem rgb(181 189 203 / 38%) !important;
}
/* Subtle hover lift on the entire column to highlight the step */
.process-step-col:hover .process-icon-wrapper {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05) !important;
}
/* Colored underline for each step title */
.process-title-line {
  display: block;
  height: 3px;
  width: 30px;
  border-radius: 3px;
  /* Inherit background color from text utility class assigned in HTML */
  background-color: currentColor;
}
/* Step list items layout */
.process-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.process-list li {
  font-size: 1rem;
  color: #475569;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.process-list li i {
  font-size: .9rem;
  width: 26px;
  height: 26px;
  text-align: center;
  border-radius: 50%;
  padding-top: 7px;
}
/* CTA Bottom Banner */
.process-cta-banner {
  background-color: #f8f9fc; /* Very soft light gray/purple per design */
  border: 1px solid #f1f3f5;
}
.cta-icon-box {
  width: 80px;
  height: 80px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}
.process-cta-btn {
  transition: all 0.3s ease;
}
.process-cta-btn:hover i {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
.process-cta-banner {
  border-top: 2px solid #edecf7
}
.process-count {
  width: 28px;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  border-radius: 50px;
  border: 1px soild #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05) !important;
}
/* Ensure background color overrides apply to the specific text colors if needed */
.bg-blue {
  background-color: #3b82f6 !important;
}
.bg-green {
  background-color: #22c55e !important;
}
.bg-purple {
  background-color: #6366f1 !important;
}
.bg-orange {
  background-color: #f97316 !important;
}
/* ================================
   TRUSTED LOGOS RESPONSIVE SLIDER
   ================================ */
.gov-trust-slider-banner {
  background-color: #f8f9fc; /* Soft background match */
  border: 1px solid #f1f3f5;
}
.gov-trust-slider-title {
  color: #64748b;
  letter-spacing: 1px;
  font-size: 0.85rem;
}
.client-logo-slider {
  margin: 0 -15px; /* Compensate for slick item padding */
}
.client-logo-slider .slider-item {
  padding: 0 15px;
  outline: none !important; /* Removes focus ring when sliding */
}
/* Uniform constraints so random logo sizes display perfectly */
.client-logo-slider .slider-item img {
  max-width: 100%;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}
/* Ensure no slick buttons appear even on hover */
.client-logo-slider .slick-arrow {
  display: none !important;
}
/* ===================
   COMPARISON SECTION
   =================== */
/* Blue Marker highlight effect under "everything else" */
.highlight-marker::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 12px;
  /* An SVG representation of the blue marker stroke from the design */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q50,0 100,8 T200,4' fill='none' stroke='%233b23ed' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0.6;
}
/* Left List Fail Icons */
.fail-icon {
  width: 42px;
  height: 42px;
  font-size: 1.15rem;
}
.bg-red-light {
  background-color: #f5e6e6;
}
.text-red {
  color: #ef4444;
}
/* Right Table Aesthetics */
.comparison-table-wrapper {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.03);
  border-color: #d9d9ef !important;
}
.bg-primary-custom {
  background-color: var(--primary-purple) !important;
}
/* Very faint purple to tint the SupportSoft column cells */
.bg-white-purple {
  background-color: #fcfcff;
}
/* Icon specific colors for the table */
.text-light-purple {
  color: #c4c5f8;
}
/* Hover effect on comparison rows */
.comparison-row {
  transition: background-color 0.2s ease;
}
.comparison-row:hover .bg-white-purple {
  background-color: #f5f4ff;
}
/* ==========================================
  WHY CLIENTS STAY WITH US SECTION
   ========================================== */
/* Background specifically for this section */
.bg-light-gray {
  background-color: #f8f9fc;
}
/* Card Styling */
.stay-card {
  transition: all 0.3s ease;
  border-color: #edecf7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.stay-card:hover {
  transform: translateY(-8px);
  border-color: #fff !important;
  box-shadow: 0 1.5rem 3rem rgba(99, 102, 241, 0.15); /* Soft purple glow */
}
/* Icon Setup */
.stay-icon-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
/* Top Right Number Styling */
.stay-number {
  font-size: 0.85rem;
}
/* Bottom Short Color Line */
.stay-bottom-line {
  width: 30px;
  height: 3px;
  border-radius: 3px;
}
/* Additional Color Utilities (to match design specifically) */
.bg-yellow-light {
  background-color: #fef3c7;
}
.text-yellow {
  color: #eab308;
}
.bg-yellow {
  background-color: #eab308 !important;
}
.bg-red {
  background-color: #ef4444 !important;
}
.bg-purple {
  background-color: #7044ff  !important;
}
.bg-green {
  background-color: #22c55e !important;
}
.bg-blue {
  background-color: #3b82f6 !important;
}
/* Call To Action Banner */
.stay-cta-banner {
  border-color: #d9d9ef !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.stay-cta-banner:hover {
  box-shadow: 0 1.5rem 3rem rgba(99, 102, 241, 0.12);
}
.stay-cta-btn {
  transition: all 0.3s ease;
}
.stay-cta-btn:hover i {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
.stay-number {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px!important;
  border-radius: 7px;
}
/* ===================================
    CLIENT SUCCESS STORY SECTION
   ===================================*/
.success-story-section {
  background: radial-gradient(circle at top right, #f4f6ff 0%, #ffffff 40%);
}
/* Watermarks matching the design */
.success-bg-quote {
  top: 5%;
  left: 2%;
  font-size: 15rem;
  color: #f4f5fa; /* Very faint */
  z-index: 0;
  line-height: 1;
}
.success-bg-dots {
  top: 5%;
  right: 5%;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(#d9d9ef 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.5;
  z-index: 0;
}
/* Slider Overrides & Focus Fixes */
.success-slider {
  margin: 0 -15px; /* Pull out to allow padding on items */
}
.success-slider .success-slide-item {
  padding: 15px; /* Give room for shadow */
  outline: none !important;
}
.success-card {
  border-color: #f1f3f5 !important;
}
/* Video Layout Constraints */
.video-wrapper {
  min-height: 400px;
  background-color: #000; /* Black behind video */
}
.video-quote-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%; /* Takes up right side of video */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none; /* VERY IMPORTANT: Let's user click through overlay to pause/play video */
}
.video-quote-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 95%; /* Takes up right side of video */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none; /* VERY IMPORTANT: Let's user click through overlay to pause/play video */
}
.overlay-content {
	    bottom: 30px;
    position: absolute;
    right: 30px;
  /* Push content back to pointer events if they want to highlight text, but leaving it none is safer for video controls */
}
.stat-col {
  min-width: 30%; /* Ensure they wrap nicely on small screens */
}
@media (max-width: 767.98px) {
  .video-quote-overlay {
    width: 100%;
    
    justify-content: flex-start !important;
  }
  .video-stats-row {
    flex-direction: column;
  }
  .stat-col {
    border-end: none !important;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
  }
}
/* Custom Slick Controls Setup */
.slick-dots {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #e2e8f0;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.slick-dots li.slick-active button {
  background: var(--primary-purple);
  transform: scale(1.2);
}
.slick-custom-arrow {
  background: rgba(255, 255, 255, .3);
  border: 0;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slick-custom-arrow:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
  box-shadow: 0 4px 10px rgba(59, 34, 224, 0.2);
}
/* Absolute Floating Mockup styling */
.success-app-mockup {
  position: absolute;
  right: -1.8rem;
  top: 51%;
  transform: translateY(-50%);
  max-width: 280px;
  z-index: 5;
}
@media (max-width: 1399.98px) {
  .success-app-mockup {
    right: -5rem;
    opacity: 0.3; /* Fade out if screen gets tight */
  }
}
.custom-play-button button {
  width: 75px;
  height: 75px;
  font-size: 1.75rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Important so that it captures the click event before passing it to the video */
  pointer-events: auto;
}
.custom-play-button button:hover {
  transform: scale(1.1);
  box-shadow: 0 1rem 3rem rgba(59, 34, 224, 0.3) !important;
}
/* Offsets the FontAwesome play icon slightly to the right so it looks perfectly centered in a circle */
.custom-play-button button i {
  margin-left: 6px;
}
.video-stats-row {
  margin: -8px 10px 10px;
  background: #fff;
  z-index: 999;
  border-radius: 10px 10px 0 0;
}
/* Position controls exactly over the video */
.success-slider-nav-overlay {
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 9;
  pointer-events: none; /* Let clicks pass through to video */
}
/* Make buttons clickable again */
.btn-prev-custom, .btn-next-custom {
  pointer-events: auto;
}
/* Ensure controls are hidden in the old container */
.success-slider-controls {
  display: none !important;
}
/* ==========================================
 MULTI-FUNCTIONED PORTFOLIO SECTION
   ========================================== */
.portfolio-section {
  background-color: #ffffff;
}
.portfolio-tabs-container {
  height: 480px;
}
.custom-scrollbar {
  height: 100%;
  overflow-y: auto;
  padding-right: 15px;
}
@media (max-width: 991.98px) {
  .custom-scrollbar {
    height: auto !important
  }
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c4c5f8;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--primary-purple);
}
.portfolio-timeline-line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #d9d9ef 0, #d9d9ef 4px, transparent 4px, transparent 8px);
  z-index: 0;
}
.portfolio-tab {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .85rem 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0.6;
}
.portfolio-tab:hover {
  opacity: 0.85;
}
.portfolio-tab.active {
  opacity: 1;
}
.ptab-number {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.portfolio-tab.active .ptab-number {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 34, 224, 0.3);
}
.ptab-title {
  color: var(--text-navy);
  transition: color 0.3s ease;
  font-weight: 600;
}
.portfolio-tab.active .ptab-title {
  color: var(--primary-purple);
}
.ptab-subtitle {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
	
}
.ptab-dot {
  width: 6px;
  height: 6px;
  background-color: var(--primary-purple);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-tab.active .ptab-dot {
  opacity: 1;
}
.portfolio-view-all {
  transition: all 0.3s ease;
  border-color: #f1f3f5 !important;
}
.portfolio-view-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
  border-color: #fff !important;
}
.portfolio-view-all i.fa-arrow-right {
  transition: transform 0.2s ease;
}
.portfolio-view-all:hover i.fa-arrow-right {
  transform: translateX(4px);
  color: var(--primary-purple) !important;
}
.portfolio-display {
  background-color: #f8f9fc;
  min-height: 400px;
}
#portfolio-main-img {
  transition: opacity 0.4s ease-in-out;
}
.portfolio-controls-overlay {
  pointer-events: none;
}
.portfolio-nav-btn {
  width: 45px;
  height: 45px;
  font-size: 1.1rem;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  opacity: 0.8;
}
.portfolio-nav-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  color: #fff !important;
  background-color: var(--primary-purple) !important;
}
.portfolio-expand-btn {
  bottom: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.portfolio-expand-btn:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}
@media (max-width: 991.98px) {
  .portfolio-sidebar {
    margin-bottom: 2rem;
  }
  .portfolio-tabs-container {
    height: auto;
  }
  .custom-scrollbar {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    padding-right: 0;
  }
  .portfolio-tab {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: #f8f9fc;
    border-radius: 3rem;
    border: 1px solid #f1f3f5;
    gap: 0.75rem;
    opacity: 1;
  }
  .portfolio-tab.active {
    background: #fff;
    border-color: var(--primary-purple);
    box-shadow: 0 4px 12px rgba(59, 34, 224, 0.1);
  }
  .ptab-number {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
  .portfolio-all-btn-wrapper {
    margin-top: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
}
.portfolio-display-item {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-display-item.active {
  display: block;
  opacity: 1;
}
.portfolio-display-item img {
  border-radius: 26px
}
.portfolio-expand-btn {
  bottom: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}
.portfolio-expand-btn:hover {
  transform: scale(1.1);
  background-color: var(--primary-purple) !important;
  color: white !important;
}
.lg-container {
  z-index: 9999 !important;
}
.lg-data {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.portfolio-detail-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.portfolio-expand-btn {
  bottom: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  z-index: 20;
  cursor: pointer;
  transition: all 0.3s ease;
}
.portfolio-expand-btn:hover {
  transform: scale(1.1);
  background-color: var(--primary-purple) !important;
  color: white !important;
}
.project-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.portfolio-expand-btn {
  z-index: 10;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  cursor: pointer;
}
/* ==========================================
   NEW AI FEATURES & USE CASES
   ========================================== */
.ai-intro-illustration {
  flex-basis: 30%;
}
.use-case-card {
  border-color: #edecf7 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.use-case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05) !important;
  border-color: #fff !important;
}
.ai-cta-banner {
  background: linear-gradient(135deg, #18097b 0%, #3b23ed 100%);
  border: none;
}
.cta-glow-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-glow-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 1;
}
.cta-hover-btn {
  transition: all 0.3s ease;
}
.cta-hover-btn:hover i {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
.ai-wrapper {
  border-color: #edecf7 !important;
}
.eyebrow-pill {
  color: var(--bs-heading-color)!important;
  padding: 0.5rem 1.2rem;
  font-weight: 700;
  font-size: 0.7rem;
  display: inline-block;
}
.flow-step {
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}
.flow-step:hover {
  transform: translateY(-3px);
}
.flow-arrow {
  text-align: center;
  margin: 0.5rem 0;
  font-size: 1.25rem;
  opacity: 0.8;
}
.grid-card-ai {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}
.grid-card-ai:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2.5rem rgba(99, 102, 241, 0.1);
  border-color: #fff !important;
}
.grid-card-ai .icon-box {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ==========================================
   AWARDS & RECOGNITION SECTION (APPENDED)
   ========================================== */
.award-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
  min-height: 120px;
}
.award-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(99, 102, 241, 0.1) !important;
  border-color: var(--primary-purple) !important;
}
.award-card img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
}
/* Optional: Slight pop effect on hover */
.award-card:hover img {
  transform: scale(1.05);
}
/* ==========================================
   ABOUT US SECTION (APPENDED)
   ========================================== */
.about-main-img {
  object-fit: cover;
  min-height: 450px;
}
.about-decorative-blob {
  width: 320px;
  height: 320px;
  top: -25px;
  left: -25px;
  opacity: 0.5;
}
.about-floating-badge {
  top: 240px;
  right: -25px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #f1f3f5;
}
@media (max-width: 991.98px) {
  .about-floating-badge {
    right: auto;
    left: 20px;
    bottom: -20px;
  }
}
/* Custom properties for the horizontal wizard-sprint elements */
.process-step-col .icon-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.process-step-col:hover .icon-box {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 1rem 2rem rgba(99, 102, 241, 0.15) !important;
}
@media (min-width: 992px) {
  .process-step-col .translate-middle-y {
    top: 35px !important; /* Perfect middle alignments for the 70px icon box containers */
  }
}
/* ==========================================
   TRANSPARENT NAVIGATION OVERRIDES
   ========================================== */
@media (min-width: 992px) {
  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    transition: color 0.25s ease;
  }
  .navbar-dark .navbar-nav .nav-link:hover {
    color: #00f2fe !important; /* Premium Cyan focus pop */
  }
  /* Sticky State Triggered via JavaScript Scroll */
  .navbar.is-sticky {
    background-color: rgba(7, 28, 77, 0.95) !important; /* Sleek Navy Blur */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  }
}
/* White Clean Navigation Button Actions */
.btn-white-cta {
  background-color: #ffffff;
  color: #071c4d !important;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.btn-white-cta:hover {
  background-color: transparent;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
/* ==========================================
   IMMERSIVE HERO VIDEO SECTIONS
   ========================================== */
.hero-video-section {
  background-color: #050b24; /* Fallback tone */
  padding-top: 100px; /* Space accounts for navigation bars */
  padding-bottom: 80px;
}
/* Vignette and Darkness Multi-Layer Filter for Dynamic Contrast */
.video-overlay {
  background: radial-gradient(circle, rgb(3 8 28 / 29%) 0%, rgb(1 6 24 / 48%) 100%);
  background-color: rgb(2 7 26 / 56%); /* Base tinting grid */
  z-index: 1;
}
/* Modern Gradient Accents mimicking the blueprint design */
.text-gradient-cyan {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
  display: inline-block;
}
.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tracking-wider {
  letter-spacing: 1px;
}
/* Responsive Scaling Overrides */
@media (max-width: 767.98px) {
  .hero-video-section h1 {
    font-size: 2rem !important;
    line-height: 1.3;
  }
  .hero-video-section p {
    font-size: 1rem !important;
  }
}
/* Toggle controller styles */
.btn-video-toggle {
  transition: all 0.25s ease;
}
.btn-video-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
/* ==========================================================================
   PORTFOLIO INTERFACE SYSTEM
   ========================================================================== */
.portfolio-showcase-section {
  background-color: #ffffff;
}
/* 1. Main Display Panel Layouts */
.visual-showcase-panel {
  background: radial-gradient(circle at 50% 50%, #f3f0ff 0%, #fcfbfe 100%);
  min-height: 520px;
}
.presentation-img {
  max-height: 440px;
  width: auto !important;
  object-fit: contain;
  filter: drop-shadow(0px 20px 40px rgba(13, 15, 63, 0.08));
}
.bg-teal-light {
  background-color: #e0f2f1;
}
.text-teal {
  color: #009688;
}
.bg-light-purple-grid {
  background-color: #fcfbfe;
}
/* 2. Absolute Display Controller Controls Overlay */
.master-nav-btn {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--text-navy);
  font-size: 1.15rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.master-nav-btn:hover {
  background-color: var(--primary-purple);
  color: #ffffff;
  transform: translateY(-50%) scale(1.08) !important;
}
.portfolio-zoom-trigger {
  width: 54px;
  height: 54px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-navy);
  font-size: 1.1rem;
  transition: all 0.2s ease;
}
.portfolio-zoom-trigger:hover {
  background-color: #ffffff;
  color: var(--primary-purple);
  transform: scale(1.1);
}
.feature-icon-box {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}
/* 3. Bottom Navigation Cards Dock styling */
.thumbnail-nav-card-item {
  outline: none !important;
}
.thumb-card {
  cursor: pointer;
  border-color: #edecf7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}
.thumb-card .thumb-logo-box {
  width: 44px;
  height: 44px;
}
/* Active Highlight Styling Matrix matching reference graphic design specs */
.thumbnail-nav-card-item.is-current .thumb-card {
  border-color: var(--primary-purple) !important;
  background-color: #f7f5ff !important;
  box-shadow: 0 8px 20px rgba(94, 49, 225, 0.08) !important;
}
.thumbnail-nav-card-item.is-current .card-title-text {
  color: var(--primary-purple) !important;
}
/* Strip Navigation Arrow Components */
.strip-nav-arrow {
  width: 36px;
  height: 36px;
  color: var(--text-navy);
  border-color: #edecf7 !important;
  transition: all 0.2s ease;
}
.strip-nav-arrow:hover {
  border-color: var(--primary-purple) !important;
  color: var(--primary-purple);
  background-color: #f7f5ff !important;
}
.unified-view-all-btn {
  font-size: 0.85rem;
  border-color: #edecf7 !important;
  color: var(--text-navy);
}
.unified-view-all-btn:hover {
  background-color: var(--text-navy)!important;
  color: #ffffff !important;
}
/* 4. Column border helpers metrics matrix components */
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid #edecf7 !important;
  }
}
@media (max-width: 991.98px) {
  .visual-showcase-panel {
    min-height: 380px;
  }
  .full-cover-mockup-img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }
  .visual-showcase-panel {
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    background-color: #050b24;
  }
  .master-nav-btn {
    display: none !important; /* Hide floating absolute buttons on smaller layouts */
  }
}
/* ==========================================================================
   UPDATED MOCKUP PANEL SPECIFICATIONS
   ========================================================================== */
.visual-showcase-panel {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 550px;
  background-color: #050b24; /* Prevents visual flash when content changes */
}
/* Forces image asset layer to perfectly match container boundaries */
.full-cover-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
/* Navigation Controls - Constrained exclusively to the left mockup column */
.mockup-nav-btn {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.85);
  color: #2a2a2a ;
  font-size: 1.1rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.mockup-nav-btn:hover {
  background-color: #015cc0; /* Changes to theme color on hover */
  color: #ffffff;
  transform: translateY(-50%) scale(1.06) !important;
}
/* Adjust zoom button alignment on edge */
.portfolio-zoom-trigger {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.portfolio-zoom-trigger:hover {
  background-color: #ffffff;
  color: #015cc0;
}
/* Meta spec block spacing cleanups */
.meta-specs-matrix .fa-solid {
  font-size: 0.85rem;
  opacity: 0.85;
}
/* ==========================================================================
   INDUSTRY SOLUTIONS GRID
   ========================================================================== */
/* Main Card Container */
.industry-card-wrap {
  background-color: #ffffff;
  border: 1px solid #edecf7;
  border-radius: 1.25rem;
  padding: 1.05rem .75rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.industry-card-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(13, 15, 63, 0.08);
  border-color: #ffffff;
}
/* Background Image Layer (Anchored Bottom Right) */
.industry-bg-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 180px; /* Adjust this to match the height of your actual cut-out illustrations */
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0.95;
}
/* Content Layer Floating Above Background */
.industry-content-layer {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  /* Adds a slight white glow behind the text to ensure the feature list remains 100% readable if it overlaps dark parts of your image */
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9), 0px 0px 15px rgba(255, 255, 255, 1);
}
/* Larger Icon Box for Headers */
.icon-box-lg {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 2-Column Features List */
.industry-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem 0.5rem;
  margin-bottom: 2rem; /* Keep text safely above the busiest parts of the background image */
  background: rgba(255, 255, 255, .5);
  padding: 0px 0px 10px;
  border-radius: 10px;
}
.industry-features-grid .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-navy);
  font-weight: 500;
  line-height: 1.3;
}
.industry-features-grid .feature-item i {
  margin-top: 0.15rem; /* Perfectly aligns the check circle with the first line of text */
}
/* Additional Color Utilities (to match the design) */
.text-yellow {
  color: #d97706 !important;
}
.bg-yellow-light {
  background-color: #fef3c7 !important;
}
.text-red {
  color: #dc2626 !important;
}
.bg-red-light {
  background-color: #fee2e2 !important;
}
/* Existing utilities override to ensure alignment */
.text-orange {
  color: #ea580c !important;
}
.bg-orange-light {
  background-color: #ffedd5 !important;
}
/* ==========================================================================
   FLOATING SCROLL TO TOP UTILITY
   ========================================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background-color: var(--primary-purple); /* Reusing your main purple theme variable */
  color: #ffffff !important;
  border: none;
  z-index: 1080; /* Ensures it floats above footers and offcanvas elements */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
/* Hover lift effect consistent with your card patterns */
.scroll-to-top:hover {
  background-color: #2b17bc;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(59, 34, 224, 0.3) !important;
  color: #ffffff !important;
}
/* Active reveal class triggered by scroll positioning */
.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Adjust layout positioning slightly for tight mobile screen states */
@media (max-width: 576px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   WHAT WE BUILD: MATRIX GRID ANCHOR MUTATIONS
   ========================================================================== */
.matrix-interactive-item {
  border-color: #edecf7 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover lift state matching existing card mechanics */
.matrix-interactive-item:hover {
  transform: translateY(-4px);
  border-color: #fff !important;
  box-shadow: 0 1rem 2.5rem rgba(59, 34, 224, 0.12) !important;
}

/* Micro-interaction setup for the secondary arrow symbol indicator */
.matrix-arrow-transition {
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.7;
}

.matrix-interactive-item:hover .matrix-arrow-transition {
  transform: translateX(4px);
  opacity: 1;
  color: var(--primary-purple) !important;
}

/* Smooth mobile and tablet vertical line balancing adjustments */
@media (max-width: 991.98px) {
  .what-we-build-matrix .main-title {
    font-size: 2.4rem !important;
  }
}


/* ==========================================================================
   WHAT WE BUILD: DARK MATRIX SYSTEM RULES
   ========================================================================== */


.text-light-slate {
  color: #f9f9ff !important;
}




/* ==========================================================================
   WHY SUPPORTSOFT IMAGE BLUEPRINT SYSTEM
   ========================================================================== */
.border-bottom-faint {
  border-bottom: 1px solid rgba(237, 236, 247, 0.85) !important;
}

.orbital-list-item {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.orbital-list-item:hover {
  transform: translateX(4px);
}

/* Simplified Image Graphic Wrapper */
.why-supportsoft-image-wrapper {
  max-width: 340px;
  display: inline-block;
  vertical-align: middle;
}

.why-supportsoft-image-wrapper img {
  width: 100%;
  height: auto;
}

@media (max-width: 991.98px) {
  .why-supportsoft-image-wrapper {
    max-width: 280px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   DARK THEMING OVERRIDES FOR THE 2X2 PAYMENT BLOCK LAYOUT
   ========================================================================== */

/* Dark structural context card base rules */
.dark-matrix-card {
  background-color: rgba(255, 255, 255, 0) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Base custom interactive states */
.dark-matrix-card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 1.5rem 3rem rgba(99, 102, 241, 0.1) !important;
}

/* Card 1 Variant: Explicit Active Glowing Border Layer */
.dark-matrix-card.card-accent-active {
  border-color: rgba(99, 102, 241, 0.65) !important;
  box-shadow: 0 0.5rem 2.5rem rgba(59, 34, 224, 0.15) !important;
}

/* Custom interactive button wrapper outline style overrides */
.dark-cta-outline-btn {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: transparent !important;
}

.dark-cta-outline-btn:hover {
  background-color: #ffffff !important;
  color: var(--text-navy) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0.5rem 2rem rgba(255, 255, 255, 0.2) !important;
}

/* Global internal step arrows transition handler mechanics */
.payment-pace-section .transition-arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-pace-section .dark-matrix-card:hover .transition-arrow,
.payment-pace-section .dark-cta-outline-btn:hover .transition-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   TECHNOLOGY TRUST MATRIX HOVER RULES
   ========================================================================== */
.tech-item {
  padding: .5rem .3rem;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  border: 1px solid transparent;
}

.tech-item:hover {
  background-color: #fcfbfe;
  border-color: #edecf7;
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
}

.tech-item span {
  font-size: 0.85rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
	line-height: 1.4;
	text-align: left
}



/* ==========================================================================
   FINAL CTA DARK MODULE RULES
   ========================================================================== */
.startup-journey-cta .btn {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.startup-journey-cta .btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* Ensure mobile responsiveness for the text-heavy left block */
@media (max-width: 991px) {
  .startup-journey-cta .d-sm-flex {
    display: none !important; /* Hide the orbital graphic on smaller mobile screens for layout clarity */
  }

}

/* Custom CSS for layout refinements */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.use-case-card {
  transition: transform 0.3s ease;
  border: 1px solid #edecf7 !important;
}

.use-case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(99, 102, 241, 0.1) !important;
}

.eyebrow-pill {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple);
  letter-spacing: 1.5px;
}


/* New modular scope for AI section to prevent class repetition */
.ai-business-hub-section .ai-feature-box {
  background: #ffffff;
  padding: 1.5rem 0;
  border-radius: 1rem;
  border: 1px solid #f1f3f5;
  transition: all 0.3s ease;
}

.ai-business-hub-section .ai-feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: #e2e8f0;
}

.ai-icon-img-wrapper {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-icon-img-wrapper img {
  width: 100%;
  height: auto;
}

.ai-hub-center-visual img {
  max-width: 100%;
  height: auto;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Scoped styles for the growth section */
.growth-bus-sec .growth-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: #6366f1;
  letter-spacing: 2px;
}

.growth-bus-sec .sol-icon-box {
  width: 50px;
  height: 50px;
  background-color: #f3f0fd;
}

.growth-bus-sec .sol-icon-box img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.growth-bus-sec .sol-item {
  transition: transform 0.3s ease;
}

.growth-bus-sec .sol-item:hover {
  transform: translateX(5px);
}

/* Styling for Scale Smarter Hub */
.scale-smarter-hub .scale-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-purple);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.scale-smarter-hub .scale-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.scale-smarter-hub .scale-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.scale-smarter-hub .scale-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #a48dff;
}

.scale-smarter-hub .scale-icon-placeholder {
  width: 70px;
  height: 70px;
	margin-top: -15px;
}


/* Scoped styles for the growth CTA bar */
.cta-growth-wrapper {
  background: linear-gradient(90deg, #4f46e5 0%, #3b23ed 100%);
  position: relative;
  overflow: hidden;
}

/* Add a subtle graphic indicator overlay if needed */
.cta-growth-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 150px;
  background-image: url('image_19a378.jpg');
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.2;
}

.cta-icon-holder {
  width: 50px;
  height: 50px;
}
.cta-icon-holder-2 {
  min-width: 80px!important;
  height: 80px!important;
}

.cta-growth-section .btn {
  transition: transform 0.3s ease;
}

.cta-growth-section .btn:hover {
  transform: translateY(-2px);
}



/* New dark theme modular scope */
.growth-bus-dark-sec .sol-icon-box-dark {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1); /* Subtle dark background */
}

.growth-bus-dark-sec .text-light-slate {
  color: #d5dae3 !important; /* Soft text color for dark mode */
}

.growth-bus-dark-sec .sol-item-dark {
  transition: transform 0.3s ease;
}

.growth-bus-dark-sec .sol-item-dark:hover {
  transform: translateX(5px);
}

 .growth-bus-dark-sec  .sol-icon-box-dark {
    width: 72px;
    height: 72px;
    background-color: #f3f0fd;
	 margin-right: 15px;

}


.sol-icon-box-dark img {
    width: 50px!important;
    height: 50px!important;
    object-fit: contain;

}


/* Custom scope for Enterprise Section */
.enterprise-hero-sec .stat-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
  border-color: #edecf7 !important;
}

.enterprise-hero-sec .stat-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 1rem 2rem rgba(59, 34, 224, 0.08) !important;
}

/* Button override for View Reviews */
.btn-outline-dark {
  border: 1px solid #e2e8f0;
  background: white;
  color: var(--text-navy);
}

.btn-outline-dark:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Ensure the icon wrapper maintains the exact alignment from the design */
.stat-icon-wrapper {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f0fd;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Maintain the hover interaction established previously */
.stat-card {
  transition: all 0.3s ease;
 
}

.stat-card:hover {
  transform: translateY(-5px);
 
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Scoped styles for Enterprise Challenges Section */
.ent-challenges-sec .ent-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple);
  letter-spacing: 2px;
}

.ent-challenges-sec .ent-challenge-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ent-challenges-sec .ent-challenge-card:hover {
  transform: translateY(-4px);
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ent-challenges-sec .ent-icon-box {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ent-challenges-sec .ent-icon-box img {
  width: 100%;
  height: auto;
}


/* Scoped Styles for Enterprise Solutions Section */
.ent-sol-sec .ent-sol-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
  border-color: #edecf7 !important;
  background: white;
}

.ent-sol-sec .ent-sol-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ent-sol-sec .ent-sol-icon {
  width: 40px;
  height: 40px;
}

.ent-sol-sec .ent-sol-icon img {
  width: 100%;
  height: auto;
}


/* Scoped styles for Enterprise AI Solutions */
.ent-ai-sec .ent-ai-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ent-ai-sec .ent-ai-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ent-ai-sec .ent-ai-card:hover {
  transform: translateX(5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ent-ai-sec .ent-ai-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.ent-ai-sec .ent-ai-icon img {
  width: 100%;
  height: auto;
}



/* Scoped styles for Industries We Serve Section */
.ind-serve-sec .ind-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ind-serve-sec .ind-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ind-serve-sec .ind-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ind-serve-sec .ind-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #c7d2fe;
}

.ind-serve-sec .ind-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto;
}

.ind-serve-sec .ind-icon img {
  width: 100%;
  height: auto;
}


/* Scoped styles for Enterprise Transformation Section */
.ent-transform-cta {
    background: radial-gradient(circle at top right, #000230, #13213a) !important;
}

.ent-transform-cta .text-light-slate {
    color: #94a3b8 !important;
}

.ent-transform-cta .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.ent-transform-cta .btn-outline-light:hover {
   background: rgb(94 49 225) !important;
    border-color:none !important;
    color: #fff;
}



/* ==========================================================================
   HERO INTELLIGENT SECTION STYLES
   ========================================================================== */
.hero-intelligent-sec .hero-badge {
  background: rgba(99, 102, 241, 0);
  color: #818cf8;
  padding: 0;
  border-radius: 50px;
  font-size: 1.15rem;
  font-weight: 500;
}

.hero-intelligent-sec .stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
	padding-bottom: 10px!important
}

.hero-intelligent-sec .stat-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}

.hero-intelligent-sec .grayscale-img {
  filter: grayscale(1) brightness(2);
}

.hero-intelligent-sec .text-light-slate {
  color: #94a3b8;
}


/* Scoped styles for AI Solutions Impact Section */

.ai-impact-sec .ai-impact-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ai-impact-sec .ai-impact-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 25px rgba(59, 35, 237, 0.08) !important;
}

/* Main Grid Icons */
.ai-impact-sec .ai-impact-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.ai-impact-sec .ai-impact-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Small decorative line under titles */
.ai-impact-sec .ai-title-line {
  width: 25px;
  height: 3px;
  background: var(--primary-purple, #4f46e5); /* Fallback to solid blue/purple */
  border-radius: 2px;
}

/* Circular Arrow Button */
.ai-impact-sec .ai-impact-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  color: var(--primary-purple, #4f46e5);
  transition: all 0.3s ease;
}

.serv-card h6{font-size: 20px!important;}

.ai-impact-sec .ai-impact-card:hover .ai-impact-arrow {
  background-color: var(--primary-purple, #4f46e5);
  border-color: var(--primary-purple, #4f46e5);
  color: white;
}

/* Bottom Bar Icons */
.ai-impact-sec .ai-feat-icon {
  width: 70px;
  height: 70px;
  background-color: #f8fafc; /* Very subtle background placeholder if image is transparent */
}

.ai-impact-sec .ai-feat-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}


.ai-services-sec .serv-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
  border-color: #edecf7 !important;
}

.ai-services-sec .serv-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ai-services-sec .serv-icon {
  width: 40px;
  height: 40px;
}

.ai-services-sec .stat-icon {
  width: 30px;
  height: 30px;
}

/* Accordion Customization */
.ai-accordion .accordion-button {
    background: #020d2d !important;
    box-shadow: none !important;
}

.ai-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.ai-accordion .accordion-item{border: 1px solid #0e1f4b!important}

.ai-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}



.ai-accordion .accordion-body {background: #01081e!important; padding-top: 15px!important; color: #fff!important}

.ai-accordion .icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
}

.ai-accordion .icon-box img {
    width: 58px;
    height: 58px;
}

.stat-icon {
    width: 50px;
    height: 50px;
  margin-top:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ai-stats img{  width: 60px;
  height: 60px;
  object-fit: contain; margin-top: -10px}

/* Scoped styles for Why AI Section */
.why-ai-invest-sec .why-ai-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.why-ai-invest-sec .why-ai-badge-icon {
  width: 75px;
  height: 75px;
}

.why-ai-invest-sec .why-ai-badge-icon img {
  width: 100%;
  height: auto;
}

.why-ai-invest-sec .why-grid-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.why-ai-invest-sec .why-grid-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.04) !important;
}

.why-ai-invest-sec .why-grid-icon {
  width: 50px;
  height: 50px;
}

.why-ai-invest-sec .why-grid-icon img {
  width: 100%;
  height: auto;
}

.why-ai-invest-sec .why-stat-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
	
}

.why-ai-invest-sec .why-stat-icon img {
  width: 100%;
  height: auto;
	border-radius: 12px;
	
}

/* Scoped styles for AI Development Process Section */
.ai-process-sec .ai-card-dark {
  background: #010922;
  transition: all 0.3s ease;
}

.ai-process-sec .ai-card-dark:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Timeline Vertical Line & Badge */
.ai-timeline-wrapper::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 15px;
  left: 28px;
  width: 3px;
  background: linear-gradient(to bottom, #6366f1, rgba(99, 102, 241, 0.1));
}

.ai-process-sec .step-number-badge {
  position: absolute;
  left: -32px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #0f172a;
  border: 2px solid #6366f1;
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ai-process-sec .step-icon-box {
  width: 70px;
  height: 70px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-process-sec .step-icon-box img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.ai-process-sec .outcome-trophy-icon{
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-process-sec .outcome-trophy-icon img,
.ai-process-sec .outcome-stat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-process-sec .outcome-stat-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-process-sec .outcome-stat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {

	.ai-timeline-wrapper::before {

  left: 7px!important;
 
}
}

.ai-step-item h4{font-size: 18px!important}

.ai-step-item .small{font-size: 1.1rem!important}

.ai-step-item .text-secondary{color: #dfdfdf!important}

.ms-text_1{color: #dfdfdf!important}


/* Scoped styles for AI Capabilities Tabbed Section */
.ai-capabilities-sec .ai-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ai-capabilities-sec .custom-ai-pills .nav-link {
  background-color: #f8fafc;
  color: #4f46e5!important;
  border: 1px solid #d5c7ff;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.ai-capabilities-sec .custom-ai-pills .nav-link.active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  /* border-color: var(--primary-purple, #4f46e5) !important; */
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.ai-capabilities-sec .ai-cap-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ai-capabilities-sec .ai-cap-card:hover {
  transform: translateY(-3px);
  border-color: #4f46e5 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.ai-capabilities-sec .ai-widget-icon {
  width: 42px;
  height: 42px;
}

/* Scoped styles for Enterprise Architecture Section */
.ent-arch-sec .arch-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: #818cf8;
  letter-spacing: 2px;
  background: rgba(99, 102, 241, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ent-arch-sec .arch-node-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.ent-arch-sec .arch-node-card:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateX(5px);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
}

.ent-arch-sec .arch-node-badge {
  width: 28px;
  height: 28px;
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ent-arch-sec .arch-arrow-down {
  color: #6366f1;
  font-size: 0.8rem;
  opacity: 0.7;
  animation: pulse-down 2s infinite ease-in-out;
}

.ent-arch-sec .arch-check-icon {
  width: 32px;
  height: 32px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@keyframes pulse-down {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(4px); opacity: 1; }
}


/* Scoped styles for Integrations Section */
.integrations-sec .int-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.integrations-sec .int-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.integrations-sec .int-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08) !important;
}

.integrations-sec .int-icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
  border-radius: 10px;
}

.integrations-sec .int-visual-box {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.integrations-sec .int-center-hub {
  box-shadow: 0 0 25px rgba(79, 70, 229, 0.5);
  animation: pulse-hub 3s infinite ease-in-out;
}

@keyframes pulse-hub {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(79, 70, 229, 0.5); }
  50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(79, 70, 229, 0.8); }
}

/* Scoped styles for FAQ Section */
.faq-sec .faq-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.faq-sec .custom-faq-accordion .accordion-item {
  border-color: #edecf7 !important;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.faq-sec .custom-faq-accordion .accordion-item:hover {
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.05) !important;
}

.faq-sec .custom-faq-accordion .accordion-button {
  background-color: transparent;
  box-shadow: none !important;
}

.faq-sec .custom-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-purple, #4f46e5) !important;
  background-color: #faf8ff;
}

.faq-sec .custom-faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f46e5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Scoped styles for Final CTA Section */
.final-cta-sec .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s ease;
}

.final-cta-sec .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  border-color: #ffffff !important;
}

.final-cta-sec .btn-light {
  transition: all 0.3s ease;
}

.final-cta-sec .btn-light:hover {
  background-color: #f8fafc !important;
  transform: translateY(-2px);
}

/* Scoped styles for Why Supportsoft Section */
.why-supportsoft-sec .why-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.why-supportsoft-sec .why-feat-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.why-supportsoft-sec .why-feat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08) !important;
}

.why-supportsoft-sec .why-card-icon {
  width: 45px;
  height: 45px;
}

.why-supportsoft-sec .why-card-icon img {
  width: 100%;
  height: auto;
}

.why-supportsoft-sec .why-title-line {
  width: 25px;
  height: 3px;
  background: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

.why-supportsoft-sec .why-stat-icon {
  width: 40px;
  height: 40px;
}

.why-supportsoft-sec .why-stat-icon img {
  width: 100%;
  height: auto;
}


/* Scoped styles for Services CTA Section */
.services-cta-sec .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s ease;
}

.services-cta-sec .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
}

.services-cta-sec .btn-light {
  transition: all 0.3s ease;
}

.services-cta-sec .btn-light:hover {
  background-color: #f8fafc !important;
  transform: translateY(-2px);
}


/* Scoped styles for Ready To Build / Contact Section */
.ready-to-build-sec .rtb-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ready-to-build-sec .rtb-video-card img {
  height: 280px;
  object-fit: cover;
}

/* What to Expect Timeline */
/*
.ready-to-build-sec .rtb-timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 11px;
  width: 2px;
  background: #e2e8f0;
  border-dash: 2px;
}
*/

.ready-to-build-sec .rtb-step-icon {

  top: 0;
  width: 44px;
  height: 44px;
min-width: 44px;
	margin-right:20px;
 min-height: 44px;
  background: #f3f0fd;
  color: var(--primary-purple, #4f46e5);
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

/* Form Input Groups Styling */
.ready-to-build-sec .input-group {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.ready-to-build-sec .input-group:focus-within {
  border-color: var(--primary-purple, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.ready-to-build-sec .form-control {
  font-size: 0.9rem;
}

/* Radio Cards Customization */
.ready-to-build-sec .rtb-radio-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition: all 0.3s ease;
}

.ready-to-build-sec .rtb-radio-card:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.ready-to-build-sec .btn-check:checked + .rtb-radio-card {
  background-color: #ffffff !important;
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

/* Checkbox Pill Buttons */
.ready-to-build-sec .rtb-pill-checkbox {
  background-color: #f8fafc;
  border: 1px solid #d6d5e1;
  color: #1a1d22;
  font-size: 0.99rem;
  transition: all 0.3s ease;
}

.ready-to-build-sec .rtb-pill-checkbox:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.ready-to-build-sec .btn-check:checked + .rtb-pill-checkbox {
  background-color: var(--primary-purple, #4f46e5) !important;
  border-color: var(--primary-purple, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

/* Footer Step Badges */
.ready-to-build-sec .rtb-footer-step-badge {
  width: 60px;
  height: 60px;
  background: #f3f0fd;
  color: var(--primary-purple, #4f46e5);
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.85rem;
}
/* Scoped styles for AI Asset Section */
.ai-asset-sec .ai-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: #818cf8;
  letter-spacing: 2px;
  background: rgba(99, 102, 241, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ai-asset-sec .ai-pipe-card {
  background: rgba(15, 23, 42, 0.8);
  transition: all 0.3s ease;
}

.ai-asset-sec .ai-pipe-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.ai-asset-sec .bg-dark-card {
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.3s ease;
}

.ai-asset-sec .bg-dark-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}

/* Scoped styles for AI Asset Section (Light Theme) */
.ai-asset-sec .ai-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-purple, #4f46e5);
  letter-spacing: 2px;
  background: #f3f0fd;
  padding: 0.5rem 1rem;
  border-radius: 50px;
}

.ai-asset-sec .ai-pipe-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ai-asset-sec .ai-pipe-card:hover {
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08) !important;
}

.ai-asset-sec .light-card,
.ai-asset-sec .bg-light-card {
  background-color: #ffffff;
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ai-asset-sec .bg-light-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08) !important;
}



/* Navbar Base Styling */
.ms-navbar-section {
/*  border-bottom: 1px solid rgba(255, 255, 255, 0.08);*/
}

.ms-navbar-section .navbar-nav .nav-link {
  font-size: 1rem;
  transition: color 0.3s ease;
}

.ms-navbar-section .navbar-nav .nav-link:hover,
.ms-navbar-section .navbar-nav .nav-link.active {
  color: var(--primary-purple, #4f46e5) !important;
}

/* Desktop Full-Width Mega Menu Positioning & Styling */
.ms-navbar-section .dropdown.position-static .dropdown-menu.ms-mega-menu {
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  width: 90vw !important;
  max-width: 1200px !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
  animation: ms-fadeIn 0.25s ease-in-out forwards;
}

@keyframes ms-fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(10px); }
}

/* Service Card Hover Effect inside Mega Menu */
.ms-service-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ms-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08) !important;
}

/* Mobile Offcanvas Drawer Customization */
.ms-mobile-drawer .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
  transform: scale(0.75);
}

.ms-mobile-drawer .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: var(--primary-purple, #818cf8) !important;
  box-shadow: none !important;
}


/* ==========================================
   SMOOTH HOVER DROPDOWN TRANSITIONS
   ========================================== */
@media (min-width: 992px) {
  /* Enable hover trigger for desktop dropdowns */
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Set initial hidden state for smooth transition */
  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    margin-top: 0 !important;
  }

  /* Keep dropdown open when cursor moves into the menu */
  .navbar .dropdown:hover .dropdown-menu {
    pointer-events: auto;
  }
  
  .navbar .dropdown-menu {
    pointer-events: none;
  }
}

.dropdown-toggle::after {
    display: none;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}


/* ==========================================
   UPDATED FOOTER STYLING & 30% WIDTH BORDERS
   ========================================== */
.ms-footer-sec {
  background-color: #050b16 !important;

}

.ms-footer-banner {
  background: linear-gradient(135deg, #0d1424 0%, #161e38 100%);
}

.ms-banner-icon-box {
  width: 50px;
  height: 50px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.bg-dark-card {
  background-color: #0b1326 !important;
}

/* 30% Width Bottom Border for Headings */
.ms-heading-border {
  position: relative;
  display: inline-block;
}

.ms-heading-border::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 2px;
  background-color: var(--primary-purple, #4f46e5);
}

.ms-footer-link {
  transition: all 0.2s ease;
  display: inline-block;
}

.ms-footer-link:hover {
  color: #818cf8 !important;
  transform: translateX(3Link px);
}

.ms-social-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.ms-social-icon:hover {
  background-color: var(--primary-purple, #4f46e5);
  border-color: var(--primary-purple, #4f46e5);
  transform: translateY(-2px);
}

/* Mobile Accordion Customization */
.ms-mobile-accordion .accordion-button {
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.ms-mobile-accordion .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.ms-mobile-accordion .accordion-button:not(.collapsed) {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

/* ==========================================
   SMOOTH MARQUEE SLIDER STYLING
   ========================================== */
.trusted-brands-bar .brands-slider-container {
  mask-image: linear-gradient(to right, transparent, black 5%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 90%, transparent);
}
.gov-trust-banner .brands-slider-container {
  mask-image: linear-gradient(to right, transparent, black 5%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 90%, transparent);
}

.trusted-brands-bar .brands-slider-track {
  display: flex;
  width: max-content;
}

.trusted-brands-bar .brands-slider-track:hover {
  animation-play-state: paused;
}

.trusted-brands-bar .brand-ms-image img {
  height: 55px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.trusted-brands-bar .brand-ms-image img:hover {
  opacity: 1;
}


/* ==========================================
   SWIPER REVIEWS SLIDER STYLING
   ========================================== */
.ms-reviews-section .swiper {
  mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
  padding: 10px 0;
}

.ms-reviews-section .ms-review-card {
  min-height: 220px;
  border-color: #edecf7 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ms-reviews-section .ms-review-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.1) !important;
}

.ms-slide-btn {
  transition: all 0.2s ease;
  border-color: #e2e8f0 !important;
}

.ms-slide-btn:hover {
  background-color: var(--primary-purple, #4f46e5) !important;
  border-color: var(--primary-purple, #4f46e5) !important;
}

.ms-slide-btn:hover i {
  color: #ffffff !important;
}

/* ==========================================
   DARK TRANSPARENT HEADER (Responsive)
   ========================================== */

/* 1. DESKTOP: Transparent & Absolute */
@media (min-width: 992px) {
  .ms-dark-header {
    background: transparent !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    border: none !important;
    box-shadow: none !important;
  }
  .ms-dark-header .nav-link, 
  .ms-dark-header .ms-phone-link { 
    color: #ffffff !important; 
    transition: all 0.3s ease; 
  }
  .ms-dark-header .nav-link:hover { 
    color: #c4c5f8 !important; 
  }
  .ms-dark-header .dark-theme-logo { 
    filter: brightness(0) invert(1); 
  }
}

/* 2. MOBILE: Fixed Header with Scroll-to-White Effect */
@media (max-width: 991.98px) {
  .ms-dark-header {
    position: fixed !important; /* Forces it to stay on top securely */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050 !important;
    background-color: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Scrolled State */
  .ms-dark-header.is-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  }

  .ms-dark-header .dark-theme-logo,
  .ms-dark-header .menu-toggle-icon {
    transition: all 0.3s ease;
  }

  .ms-dark-header .menu-toggle-icon {
    font-size: 1.8rem;
  }

  /* Top State (Transparent bg, White items) */
  .ms-dark-header:not(.is-scrolled) .dark-theme-logo { filter: brightness(0) invert(1); }
  .ms-dark-header:not(.is-scrolled) .menu-toggle-icon { color: #ffffff !important; }

  /* Scrolled State (White bg, Dark items) */
  .ms-dark-header.is-scrolled .dark-theme-logo { filter: none !important; }
  .ms-dark-header.is-scrolled .menu-toggle-icon { color: #090a14 !important; }
}

/* Common Offcanvas Reset */
.ms-dark-header .offcanvas { background-color: #ffffff !important; }
.ms-dark-header .offcanvas .mobile-logo-colored { filter: none !important; }
/* 3. HERO PADDING OFFSET */
.ms-app-hero-sec {
  padding-top: 130px !important;
}


/* ==========================================
   APP HERO SECTION STYLING & GLOW EFFECTS
   ========================================== */
.ms-app-hero-sec {
  background-color: #040814;
  min-height: 90vh;
  position: relative;
}

/* Ambient Glowing Background Orbs */
.ms-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}





/* Subtitle & Badge Accent Bar */
.ms-hero-badge-bar {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #38bdf8;
}

.ms-hero-subtitle {
  color: #38bdf8;
}

/* Gradient Text Effect */
.ms-gradient-text {
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
  display: inline-block;
}

.text-light-muted {
  color: #94a3b8 !important;
}

/* Action Buttons */
.ms-hero-btn-primary {
  background-color: #4f46e5;
  border: 1px solid #4f46e5;
  transition: all 0.3s ease;
}

.ms-hero-btn-primary:hover {
  background-color: #4338ca;
  border-color: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.ms-hero-btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.ms-hero-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Platform Pills */
.ms-platform-card {
  background: rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

.ms-platform-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
}

/* ==========================================
   PHONE MOCKUP 3D LAYERED COMPOSITION
   ========================================== */
.ms-mockup-wrapper {
  perspective: 1200px;
  min-height: 520px;
}

.ms-mockup-aura {
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(99, 102, 241, 0.35) 60%, transparent 80%);
  border-radius: 50%;
  filter: blur(50px);
  z-index: 1;
}

.ms-mockup-item {
  position: absolute;
  transition: all 0.4s ease;
  max-width: 250px;
}

.ms-mockup-item img {
  border: 4px solid #1e293b;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Left Phone (Behind Center) */
.ms-mockup-left {
  left: 0%;
  transform: rotate(-8deg) scale(0.9);
  z-index: 2;
  opacity: 0.85;
}

/* Center Main Phone */
.ms-mockup-center {
  z-index: 4;
  transform: scale(1.05);
}

/* Right Phone (Behind Center) */
.ms-mockup-right {
  right: 0%;
  transform: rotate(8deg) scale(0.9);
  z-index: 3;
  opacity: 0.85;
}

.ms-mockup-wrapper:hover .ms-mockup-left {
  transform: rotate(-12deg) translateX(-15px) scale(0.92);
}

.ms-mockup-wrapper:hover .ms-mockup-right {
  transform: rotate(12deg) translateX(15px) scale(0.92);
}

/* ==========================================
   BOTTOM STATS STRIP
   ========================================== */
.ms-hero-stats-bar {
  background: rgba(11, 19, 38, 0.65);
  backdrop-filter: blur(12px);
}

.ms-stat-icon-box {
  width: 54px;
  height: 54px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Responsive Tweaks */
@media (max-width: 991px) {
  .ms-mockup-wrapper {
    min-height: 400px;
    margin-top: 2rem;
  }
  .ms-mockup-item {
    max-width: 180px;
  }
}

@media (max-width: 576px) {
  .ms-mockup-left,
  .ms-mockup-right {
    display: none; /* Shows single center screen on small phones */
  }
  .ms-mockup-center {
    position: relative;
  }
}


/* ==========================================
   AUSTRALIA WIDE SECTION STYLING
   ========================================== */
.ms-aus-map-section {
  background-color: #ffffff;
}

.ms-aus-badge-bar {
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--primary-purple, #4f46e5);
}

.ms-aus-notice-box {
  border-color: #edecf7 !important;
  background-color: #f8fafc !important;
}

.ms-city-pill {
  border-color: #edecf7 !important;
  transition: all 0.25s ease;
}

.ms-city-pill:hover {
  border-color: var(--primary-purple, #4f46e5) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}

.ms-feature-icon-box {
  border: 1px solid #edecf7;
}

/* Avatar overlap fix */
.col .d-flex img:not(:first-child) {
  margin-left: -12px !important;
}


/* ==========================================
   SHARED & SECTION-SPECIFIC STYLING
   ========================================== */
.ms-badge-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(79, 70, 229, 0.1);
  color: var(--primary-purple, #4f46e5);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 50%;
}

.ms-build-card,
.ms-capability-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ms-build-card:hover,
.ms-capability-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08) !important;
}

.ms-arrow-icon {
  transition: transform 0.2s ease;
}

.ms-build-card:hover .ms-arrow-icon {
  transform: translateX(4px);
}

.ms-dashboard-mockup {
  background: #0b1326 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}


/* ==========================================
   AI HERO SECTION STYLING & GLOW EFFECTS
   ========================================== */
.ms-main-hero-sec {
  background-color: #040814;
  min-height: 90vh;
  position: relative;
  /* Top padding accounts for the fixed header */
  padding-top: 130px !important; 
}

/* Ambient Glowing Background Orbs */
.ms-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 1;
}

.ms-hero-glow-right {
  width: 550px;
  height: 550px;
  top: 5%;
  right: -5%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(79, 70, 229, 0.2) 50%, transparent 80%);
}

.ms-hero-glow-left {
  width: 450px;
  height: 450px;
  bottom: 10%;
  left: -5%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
}
.ms-hero-glow-left-top {
  width: 450px;
  height: 450px;
  top: -2%;
  left: -5%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%);
}

/* AI Gradient Text Effect */
.ms-gradient-text-ai {
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-light-muted {
  color: #94a3b8 !important;
}

/* Action Buttons */
.ms-hero-btn-primary {
  background-color: #4f46e5;
  border: 1px solid #4f46e5;
  transition: all 0.3s ease;
}

.ms-hero-btn-primary:hover {
  background-color: #4338ca;
  border-color: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.ms-hero-btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.ms-hero-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 3D Graphic Aura */
.ms-main-graphic-wrapper {
  position: relative;
}

.ms-main-aura {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(79, 70, 229, 0.2) 60%, transparent 80%);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 1;
}

/* Feature Icon Boxes */
.ms-feature-icon-box {
  width: 44px;
  height: 44px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
}



/* ==========================================
   ABOUT SECTION STYLING
   ========================================== */
.ms-about-sec {
  background-color: #ffffff;
}

.ms-about-badge {
  background-color: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.15);
}

.ms-about-floating-card {
  background: rgba(11, 19, 38, 0.85) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 90%;
	bottom:0
}

.ms-about-sec .border {
  border-color: #edecf7 !important;
}

.ms-about-sec .bg-light {
  background-color: #f8fafc !important;
}

.ms-about-sec .col.text-center {
  transition: all 0.25s ease;
}

.ms-about-sec .col.text-center:hover {
  transform: translateY(-3px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08) !important;
}

.list-unstyled li {
    margin-bottom: 5px;
}



/* ==========================================
   CYBERSECURITY HERO CUSTOM STYLES
   ========================================== */

/* Button overrides specific to this section */
.w-sm-auto {
    width: auto !important;
}

/* Animations for the right side diagram */
.cyber-node {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.cyber-node:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 92, 230, 0.15) !important;
    border-color: #005ce6 !important;
}

/* Keep the X-axis transform for nodes that use it to center */
.cyber-node[style*="translateX(-50%)"]:hover {
    transform: translateX(-50%) translateY(-5px) !important;
}
.cyber-node[style*="translateY(-50%)"]:hover {
    transform: translateY(calc(-50% - 5px)) !important;
}

/* Center shield subtle pulse */
.shield-icon-wrapper {
    animation: shieldPulse 3s infinite ease-in-out;
}

@keyframes shieldPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 92, 230, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 92, 230, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 92, 230, 0); }
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .cyber-hero-section {
        padding-top: 60px !important;
        text-align: center;
    }
    
    .cyber-hero-section .d-flex.align-items-center.gap-3 {
        justify-content: center;
    }
    
    .cyber-hero-section .d-flex.flex-wrap.align-items-center {
        justify-content: center;
    }
    
    /* Scale down diagram for mobile */
    .cyber-diagram-wrapper {
        transform: scale(0.85);
        margin-top: 2rem;
    }
    
    .cyber-hero-section .w-100 {
        width: 100% !important; /* Forces buttons to be full width on mobile */
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .cyber-hero-section .w-100 {
        width: auto !important; /* Returns buttons to normal size on tablets */
    }
}

/* ==========================================
   CYBERSECURITY MATTERS SECTION
   ========================================== */

.cyber-alert-box {
    background-color: #f8fbff;
    border-left: 4px solid #015cc0 !important; /* Left vertical thick line */
    transition: all 0.3s ease;
}

.cyber-alert-box:hover {
    background-color: #f0f7ff;
    box-shadow: 0 8px 20px rgba(1, 92, 192, 0.08) !important;
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .cyber-matters-section {
        text-align: left;
    }
    
    .cyber-alert-box {
        padding: 1.25rem !important;
    }
}


/* ==========================================
   CYBERSECURITY SERVICES (01, 02, 03) CSS
   ========================================== */

/* Hover transition for the 5-column timeline */
.transition-hover {
    transition: all 0.3s ease;
}
.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(1, 92, 192, 0.1) !important;
}

/* Large Card Setup */
.cyber-large-card {
    transition: all 0.3s ease;
    border-color: #e2e8f0 !important;
}
.cyber-large-card:hover {
    box-shadow: 0 15px 35px rgba(1, 92, 192, 0.08) !important;
}

/* Floating Badges Animation (Up & Down smooth float) */
.cyber-float-badge {
    animation: floatBadge 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes floatBadge {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Central Shield Pulsing */
.shield-icon-wrapper {
    animation: shieldPulse 3s infinite ease-in-out;
}

@keyframes shieldPulse {
    0% { box-shadow: 0 0 0 0 rgba(1, 92, 192, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(1, 92, 192, 0); }
    100% { box-shadow: 0 0 0 0 rgba(1, 92, 192, 0); }
}

/* Drop shadow utility for icons over images */
.drop-shadow-lg {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Hide floating badges on mobile to keep the layout clean and readable */
    .cyber-float-badge {
        display: none !important;
    }
    .cyber-services-detailed h3.display-6 {
        font-size: 2rem;
    }
}

/* ==========================================
   CYBERSECURITY REMAINING SECTIONS CSS
   ========================================== */

/* Transition utilities */
.transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.transition-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(1, 92, 192, 0.08) !important;
}

/* Custom Alert Boxes / Flow Arrows */
.cyber-assessment-section .fa-arrow-right {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* Custom FAQ Accordion */
.custom-faq-accordion .accordion-button {
    background-color: transparent;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.custom-faq-accordion .accordion-button:not(.collapsed) {
    background-color: #f8fbff;
    color: #015cc0 !important;
}

/* Modify FAQ numbering badges on expand */
.custom-faq-accordion .accordion-button:not(.collapsed) .badge {
    background-color: #015cc0 !important;
    color: #ffffff !important;
}

.custom-faq-accordion .accordion-button::after {
    /* Make Bootstrap accordion icon blue */
    filter: invert(20%) sepia(90%) saturate(3000%) hue-rotate(200deg) brightness(95%) contrast(100%);
}

/* Drop shadow for icons */
.drop-shadow-lg {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .cyber-assessment-section .d-flex.flex-wrap {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .cyber-assessment-section .fa-arrow-right {
        transform: rotate(90deg);
        margin-left: 1rem !important;
    }
    
    .cyber-problems-section .display-6 {
        font-size: 2rem;
    }
}


/* ==========================================
   CYBER SERVICES DASHBOARD CSS
   ========================================== */

/* 1. Mobile Horizontal Scroll Tabs (Crucial Fixes) */
.custom-dashboard-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e2e8f0;
    scrollbar-width: none; /* Firefox */
}

.custom-dashboard-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.custom-dashboard-tabs .nav-item {
    flex: 0 0 auto; /* Prevents shrinking on mobile */
}

/* 2. Tab Link Styling */
.custom-dashboard-tabs .nav-link {
    color: #24262c;
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    background-color: transparent;
    border-bottom: 3px solid transparent; /* Mobile default */
    transition: all 0.3s ease;
    white-space: nowrap;
}

.custom-dashboard-tabs .nav-link .tab-icon {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Active State */
.custom-dashboard-tabs .nav-link.active {
    background-color: #f0f7ff !important;
    color: #015cc0 !important;
    border-bottom-color: #015cc0;
}

.custom-dashboard-tabs .nav-link.active .tab-icon {
    opacity: 1;
}

/* Desktop Overrides for Tabs */
@media (min-width: 992px) {
    .custom-dashboard-tabs {
        border-bottom: none;
        flex-wrap: wrap !important;
        overflow: visible;
    }
    .custom-dashboard-tabs .nav-item {
        width: 100%;
        margin-bottom: 0.25rem;
    }
    .custom-dashboard-tabs .nav-link {
        border-radius: 8px;
        border-bottom: none;
        border-left: 4px solid transparent;
        white-space: normal;
    }
    .custom-dashboard-tabs .nav-link.active {
        border-left-color: #015cc0;
    }
    .custom-dashboard-tabs .nav-link:hover:not(.active) {
        background-color: #f8fafc;
    }
}

/* 3. Graphic Composition (Right Side) */
.dash-graphic-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Concentric Rings */
.dash-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed #cbd5e1;
    z-index: 1;
}
.dash-ring.ring-1 { width: 280px; height: 280px; }
.dash-ring.ring-2 { width: 380px; height: 380px; border-color: #e2e8f0; }

/* 3D Pedestal Base */
.dash-pedestal {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 
        0 15px 35px rgba(1, 92, 192, 0.15),
        inset 0 -10px 20px rgba(1, 92, 192, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.dash-pedestal::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(1, 92, 192, 0.15) 0%, transparent 70%);
    z-index: -1;
}

/* Glowing Shield Center */
.dash-shield-glow {
    width: 120px;
    height: 140px;
    background: linear-gradient(135deg, #3b82f6 0%, #015cc0 100%);
    clip-path: polygon(50% 0%, 100% 15%, 100% 60%, 50% 100%, 0% 60%, 0% 15%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(1, 92, 192, 0.4);
    animation: pulseShield 3s infinite ease-in-out;
}

@keyframes pulseShield {
    0% { filter: drop-shadow(0 0 10px rgba(1, 92, 192, 0.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 25px rgba(1, 92, 192, 0.7)); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 10px rgba(1, 92, 192, 0.4)); transform: scale(1); }
}

/* Floating Badges */
.dash-float-node {
    position: absolute;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 4;
    animation: floatNode 4s ease-in-out infinite;
}
.dash-float-node span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #24262c;
}

/* Specific Badge Positions */
.node-tl { top: 15%; left: 5%; animation-delay: 0s; }
.node-tr { top: 20%; right: 5%; animation-delay: 1s; }
.node-br { bottom: 25%; right: 0%; animation-delay: 2s; }

@keyframes floatNode {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}


/* ==========================================
   FINAL CTA FLOATING STRIP MOBILE FIX
   ========================================== */
@media (max-width: 991.98px) {
    .cyber-final-cta-section .rounded-pill {
        border-radius: 1rem !important; 
    }
    .cyber-final-cta-section .bg-white.shadow-lg {
        padding: 1.5rem !important;
        justify-content: flex-start !important;
    }
    .cyber-final-cta-section .d-flex.align-items-center.gap-2 {
        width: 45%; 
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

@media (max-width: 991.98px) {
    .pt-hero-section {
        padding-top: 130px !important; /* Mobile header spacing */
        text-align: center;
    }
    .pt-hero-section .d-flex.align-items-center.gap-3 {
        justify-content: center;
    }
    .pt-hero-section .d-flex.flex-wrap {
        justify-content: center;
    }
}

/* ==========================================
   PENETRATION TESTING CARDS CSS
   ========================================== */

.pt-service-card {
    border-color: #f1f5f9 !important;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.pt-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(1, 92, 192, 0.08);
    border-color: #e2e8f0 !important;
}

/* Learn More Link Hover Effect */
.pt-learn-more {
    transition: all 0.3s ease;
}

.pt-learn-more .arrow-wrapper {
    transition: all 0.3s ease;
}

.pt-service-card:hover .pt-learn-more .arrow-wrapper {
    background-color: #015cc0 !important;
    color: #ffffff !important;
}

.pt-service-card:hover .pt-learn-more {
    color: #004ba0 !important;
}

/* ==========================================
   PTAAS SECTION CSS
   ========================================== */

.ptaas-wrapper {
    background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
    border: 1px solid #eef2f9;
}

/* Optional: Slight hover lift for the highlight box inside PTaaS */
.ptaas-wrapper .d-inline-flex.bg-white {
    transition: all 0.3s ease;
}

.ptaas-wrapper .d-inline-flex.bg-white:hover {
    box-shadow: 0 8px 20px rgba(1, 92, 192, 0.08) !important;
    transform: translateY(-2px);
}

/* ==========================================
   PENETRATION RELEVANT DIAGRAM CSS
   ========================================== */

/* Card Setup */
.relevant-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-color: #f1f5f9 !important;
}

.relevant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(1, 92, 192, 0.08) !important;
    border-color: #e2e8f0 !important;
    z-index: 10 !important;
}

/* Floating Icon Badge */
.relevant-icon-badge {
    position: absolute;
    top: -24px;
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #015cc0;
    font-size: 1.3rem;
    border: 1px solid #eef2f9;
}

/* Connector Lines (Desktop Only) */
.conn-line {
    position: absolute;
    background-color: #b3d4ff;
    z-index: -1;
}

/* Dots at the end of the line */
.conn-line::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #015cc0;
}

/* Specific Line Positions & Angles */
/* Top Center */
.conn-tc { bottom: -40px; left: 50%; width: 2px; height: 40px; }
.conn-tc::after { bottom: -4px; left: -3px; }

/* Bottom Center */
.conn-bc { top: -40px; left: 50%; width: 2px; height: 40px; }
.conn-bc::after { top: -4px; left: -3px; }

/* Top Left */
.conn-tl { right: -60px; top: 60%; width: 60px; height: 2px; transform: rotate(18deg); transform-origin: left center; }
.conn-tl::after { right: -4px; top: -3px; }

/* Bottom Left */
.conn-bl { right: -60px; top: 30%; width: 60px; height: 2px; transform: rotate(-18deg); transform-origin: left center; }
.conn-bl::after { right: -4px; top: -3px; }

/* Top Right */
.conn-tr { left: -60px; top: 60%; width: 60px; height: 2px; transform: rotate(-18deg); transform-origin: right center; }
.conn-tr::after { left: -4px; top: -3px; }

/* Bottom Right */
.conn-br { left: -60px; top: 30%; width: 60px; height: 2px; transform: rotate(18deg); transform-origin: right center; }
.conn-br::after { left: -4px; top: -3px; }

/* Keep X-axis translation for center cards on hover */
.relevant-card[style*="translateX(-50%)"]:hover {
    transform: translateX(-50%) translateY(-5px) !important;
}

/* Drop shadow for center image */
.drop-shadow-lg {
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}


/* ==========================================
   PROCESS S-CURVE DASHBOARD CSS
   ========================================== */

/* Card Styling */
.process-card {
    border-color: #f1f5f9 !important;
    min-height: 180px;
    z-index: 5;
}

.process-card.transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(1, 92, 192, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Floating Icon & Number Header */
.process-header {
    top: -30px;
    left: 20px;
    z-index: 10;
}

.process-icon-circle {
    width: 60px;
    height: 60px;
    border-color: #eef2f9 !important;
    color: #015cc0;
}

/* The S-Curve Dashed Track (Desktop Only) */
.process-dashed-track {
    border: 2px dashed #b3d4ff;
    border-radius: 60px;
    /* Aligns perfectly with the center of the icons */
    top: 0px; 
    bottom: 0px;
    left: 16.66%;
    right: 16.66%;
    z-index: 0;
}

/* Track Arrow Badges */
.track-arrow {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #015cc0;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .process-card {
        margin-top: 30px; /* Gives space for the overlapping icon on mobile */
    }
}


/* ==========================================
   DELIVERABLES SECTION & DASHED CONNECTORS
   ========================================== */

/* Card Styling */
.deliverable-card {
    border-color: #f1f5f9 !important;
}

.deliverable-card.transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deliverable-card.transition-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(1, 92, 192, 0.08) !important;
    border-color: #e2e8f0 !important;
}

.drop-shadow-lg {
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.12));
}

/* Base style for all connector paths */
.conn-path {
    position: absolute;
    z-index: -1;
    border-style: dashed;
    border-color: #015cc0; /* Theme blue color */
    border-width: 0;
    opacity: 0.5;
}

/* ================== LEFT SIDE CONNECTORS ================== */

/* Left Top (01) -> Goes right, curves down */
.conn-lt {
    top: 50%; 
    right: -40px; 
    width: 40px; 
    height: 70px;
    border-top-width: 2px; 
    border-right-width: 2px; 
    border-top-right-radius: 12px;
}
/* Dot */
.conn-lt::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; top:-4px; left:0; }
/* Arrow Pointing Down */
.conn-lt::after { content:'\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; bottom:-9px; right:-5.5px; color:#015cc0; font-size:12px; }

/* Left Center (02) -> Goes straight right */
.conn-lc {
    top: 50%; 
    right: -40px; 
    width: 40px;
    border-top-width: 2px;
}
/* Dot */
.conn-lc::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; top:-4px; left:0; }
/* Arrow Pointing Right */
.conn-lc::after { content:'\f0da'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; top:-8.5px; right:-6px; color:#015cc0; font-size:12px; }

/* Left Bottom (03) -> Goes right, curves up */
.conn-lb {
    bottom: 50%; 
    right: -40px; 
    width: 40px; 
    height: 70px;
    border-bottom-width: 2px; 
    border-right-width: 2px; 
    border-bottom-right-radius: 12px;
}
/* Dot */
.conn-lb::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; bottom:-4px; left:0; }
/* Arrow Pointing Up */
.conn-lb::after { content:'\f0d8'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; top:-9px; right:-5.5px; color:#015cc0; font-size:12px; }


/* ================== RIGHT SIDE CONNECTORS ================== */

/* Right Top (04) -> Goes left, curves down */
.conn-rt {
    top: 50%; 
    left: -40px; 
    width: 40px; 
    height: 70px;
    border-top-width: 2px; 
    border-left-width: 2px; 
    border-top-left-radius: 12px;
}
/* Dot */
.conn-rt::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; top:-4px; right:0; }
/* Arrow Pointing Down */
.conn-rt::after { content:'\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; bottom:-9px; left:-5.5px; color:#015cc0; font-size:12px; }

/* Right Center (05) -> Goes straight left */
.conn-rc {
    top: 50%; 
    left: -40px; 
    width: 40px;
    border-top-width: 2px;
}
/* Dot */
.conn-rc::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; top:-4px; right:0; }
/* Arrow Pointing Left */
.conn-rc::after { content:'\f0d9'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; top:-8.5px; left:-6px; color:#015cc0; font-size:12px; }

/* Right Bottom (06) -> Goes left, curves up */
.conn-rb {
    bottom: 50%; 
    left: -40px; 
    width: 40px; 
    height: 70px;
    border-bottom-width: 2px; 
    border-left-width: 2px; 
    border-bottom-left-radius: 12px;
}
/* Dot */
.conn-rb::before { content:''; position:absolute; width:6px; height:6px; background:#015cc0; border-radius:50%; bottom:-4px; right:0; }
/* Arrow Pointing Up */
.conn-rb::after { content:'\f0d8'; font-family: 'Font Awesome 6 Free'; font-weight:900; position:absolute; top:-9px; left:-5.5px; color:#015cc0; font-size:12px; }


/* ==========================================
   TESTING APPROACH CSS
   ========================================== */

.approach-card {
    border-color: #f1f5f9 !important;
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach-card.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(1, 92, 192, 0.08) !important;
    border-color: #e2e8f0 !important;
}

.drop-shadow-sm {
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));
}

@media (max-width: 575.98px) {
    .approach-card {
        padding-top: 3rem !important; /* Extra space for absolute badge on mobile */
    }
}


/* ==========================================
   GET STARTED / CONTACT FORM CSS
   ========================================== */

/* Left Side Feature Icons */
.feature-icon-box {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
        border: 1px solid rgb(187 213 241);
    background-color: rgba(255, 255, 255, 0.03);
    color: #3b82f6; /* Blue icon color */
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.feature-icon-box:hover {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

/* Custom Form Input Styling */
.custom-pt-input {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    color: #475569;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.custom-pt-input::placeholder {
    color: #94a3b8;
}

.custom-pt-input:focus {
    border-color: #015cc0;
    box-shadow: 0 0 0 4px rgba(1, 92, 192, 0.1) !important;
    outline: none;
}

/* Fix for Select arrow padding */
select.custom-pt-input {
    padding-right: 2.5rem;
}

/* Mobile Adjustments */
@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}
@media (max-width: 991.98px) {
    .pt-contact-section {
        background-position: left center !important;
    }
}


/* ==========================================
   WHICH COMPLIANCE FRAMEWORK CSS
   ========================================== */

/* Column Backgrounds matching the UI */
.framework-col {
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.bg-col-blue { background-color: #f6f9fc; }
.bg-col-green { background-color: #f4fcf7; }
.bg-col-orange { background-color: #fff9f5; }
.bg-col-purple { background-color: #f9f6fc; }

/* Specific border color for these cards to blend nicely */
.framework-link {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Hover Animation on Links */
.framework-link i.fa-chevron-right {
    transition: transform 0.25s ease, color 0.25s ease;
}

.framework-link h6 {
    transition: color 0.25s ease;
}

.framework-link:hover h6 {
    color: #015cc0 !important; /* Theme blue */
}

.framework-link:hover i.fa-chevron-right {
    color: #015cc0 !important;
    transform: translateX(4px); /* Moves arrow slightly right */
}

/* ==========================================
   FRAMEWORKS VERTICAL TABS CSS
   ========================================== */

/* Left Sidebar Scroll limit */
.custom-tab-sidebar {
    max-height: 800px;
    overflow-y: auto;
}

/* Custom Scrollbar for sidebar */
.custom-tab-sidebar::-webkit-scrollbar {
    width: 6px;
}
.custom-tab-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.custom-tab-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Nav Link Styling */
.custom-fw-tabs .nav-link {
    background-color: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.custom-fw-tabs .nav-link:last-child {
    border-bottom: none;
}

.custom-fw-tabs .nav-link:hover {
    background-color: #f8faff !important;
}

/* Titles inside tabs */
.custom-fw-tabs .tab-title {
    color: #1e293b;
    transition: color 0.3s ease;
}

.custom-fw-tabs .tab-subtitle {
    color: #64748b; line-height:12px!important;
}

/* Active Tab State */
.custom-fw-tabs .nav-link.active {
    background-color: #f4f8ff !important;
    border-left: 4px solid #005ce6 !important;
}

.custom-fw-tabs .nav-link.active .tab-title {
    color: #005ce6 !important;
}

/* Plus/Minus Toggle Logic */
.custom-fw-tabs .icon-minus {
    display: none;
    color: #005ce6;
}

.custom-fw-tabs .icon-plus {
    display: block;
    color: #94a3b8;
}

.custom-fw-tabs .nav-link.active .icon-plus {
    display: none;
}

.custom-fw-tabs .nav-link.active .icon-minus {
    display: block;
}

/* ==========================================
   COMPLIANCE GAPS FLOW CSS
   ========================================== */

/* Main Card on Left */
.gap-main-card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    z-index: 2;
}

/* Icon Containers */
.gap-icon {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    position: relative;
    background-color: #ffffff;
}

.col:hover .gap-icon {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* Background Connecting Line (Desktop) */
.gap-track-line {
    position: absolute;
    top: 55px; /* Aligns with the center of the icons */
    left: -20px; /* Extends slightly towards the main card */
    right: 10%; /* Doesn't go past the last icon */
    height: 2px;
    z-index: 0;
}

/* Dots on the line to match design */
.gap-track-line::before, 
.gap-track-line::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: -2px;
}

/* Theme Colors for Lines */
.gap-track-line.theme-blue {
    background: repeating-linear-gradient(to right, #b3d4ff 0, #b3d4ff 8px, transparent 8px, transparent 16px);
}
.gap-track-line.theme-blue::before { background-color: #005ce6; left: 0; }
.gap-track-line.theme-blue::after { background-color: #005ce6; right: 0; }

.gap-track-line.theme-green {
    background: repeating-linear-gradient(to right, #bbf7d0 0, #bbf7d0 8px, transparent 8px, transparent 16px);
}
.gap-track-line.theme-green::before { background-color: #16a34a; left: 0; }
.gap-track-line.theme-green::after { background-color: #16a34a; right: 0; }

.gap-track-line.theme-orange {
    background: repeating-linear-gradient(to right, #fed7aa 0, #fed7aa 8px, transparent 8px, transparent 16px);
}
.gap-track-line.theme-orange::before { background-color: #ea580c; left: 0; }
.gap-track-line.theme-orange::after { background-color: #ea580c; right: 0; }

/* Mobile Adjustments */
@media (max-width: 1199.98px) {
    .gap-main-card {
        width: 100% !important;
    }
}


/* ==========================================
   COMPLIANCE WORKFLOW CARDS CSS
   ========================================== */

/* Card hover effect */
.workflow-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workflow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
}

/* Horizontal Connector Line */
.workflow-connector {
    position: absolute;
    left: 80px; /* Starts right after the circular icon */
    right: 0;   /* Stretches exactly to the right edge of the card */
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    z-index: 1;
}

/* Circled Arrow on the border */
.arrow-circle {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translate(50%, -50%); /* Places the center of the circle exactly on the border edge */
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #015cc0;
    font-size: 1.2rem;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* ==========================================
   READINESS ASCENDING TRAIL CSS
   ========================================== */

.trail-card-wrapper {
    z-index: 10;
    transition: transform 0.3s ease;
}

.trail-card-wrapper:hover {
    transform: translateY(-10px);
    z-index: 20;
}

.trail-icon-badge {
    position: relative;
    z-index: 2;
}

/* Optional: Connect line between Icon and Card */
.trail-card-wrapper::before {
    content: '';
    position: absolute;
    top: 60px; /* From icon */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background-color: #cbd5e1;
    z-index: 1;
}

/* Base Card Styling */
.trail-card {
    border-width: 2px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px);
}




/* ==========================================
   READINESS ACCORDION STYLING
   ========================================== */

.custom-readiness-accordion .accordion-button {
    box-shadow: none !important;
    background-color: #ffffff !important;
}

.custom-readiness-accordion .accordion-button:not(.collapsed) {
    background-color: #f8fafc !important;
}

.custom-readiness-accordion .accordion-item {
    transition: all 0.3s ease;
}

.custom-readiness-accordion .accordion-item:hover {
    border-color: #cbd5e1 !important;
}


/* ==========================================
   COMPLIANCE DELIVERABLES CSS
   ========================================== */

.deliv-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deliv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   WHY SUPPORTSOFT SECTION CSS
   ========================================== */

.why-supportsoft-section .transition-hover {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.why-supportsoft-section .transition-hover:hover {
    transform: translateY(-3px);
    background-color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
}

.backdrop-blur {
    backdrop-filter: blur(8px);
}


/* ==========================================
   COMPLIANCE RELEVANCE SECTION CSS
   ========================================== */

.relevance-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.relevance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

.transition-arrow {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.relevance-card:hover .transition-arrow {
    background-color: #005ce6 !important;
    color: #ffffff !important;
    border-color: #005ce6 !important;
    transform: translateX(4px);
}

/* ==========================================
   COMPLIANCE FAQ SECTION CSS
   ========================================== */

.custom-compliance-faq .accordion-button {
    box-shadow: none !important;
    background-color: #ffffff !important;
}

.custom-compliance-faq .accordion-button:not(.collapsed) {
    background-color: #f8fafc !important;
}

.custom-compliance-faq .accordion-item {
    transition: border-color 0.2s ease;
}

.custom-compliance-faq .accordion-item:hover {
    border-color: #cbd5e1 !important;
}

/* ==========================================
   WHAT MANAGED IT ACTUALLY MEANS CSS
   ========================================== */

.managed-it-means-section .transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.managed-it-means-section .transition-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: #93c5fd !important;
}


/* ==========================================
   ONE MANAGED IT SERVICE SECTION CSS
   ========================================== */

.managed-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.managed-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: #93c5fd !important;
}


/* ==========================================
   SMALL IT PROBLEMS SECTION CSS
   ========================================== */

.floating-problem-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Responsive fallback for mobile stacked view */
@media (max-width: 991.98px) {
    .small-it-problems-section .position-absolute {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 15px;
    }
}



/* ==========================================
   IT ENVIRONMENT RADIAL SECTION CSS
   ========================================== */

.radial-node .transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.radial-node .transition-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-color: #93c5fd !important;
}

/* ==========================================
   PRACTICAL APPROACH TO IT MANAGEMENT CSS
   ========================================== */

.step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: #93c5fd !important;
}

/* Background connecting dashed line between cards */
/*
@media (min-width: 992px) {
    .practical-approach-section .row::before {
        content: '';
        position: absolute;
        top: 95px;
        left: 80px;
        right: 80px;
        height: 2px;
        background: repeating-linear-gradient(to right, #cbd5e1 0, #cbd5e1 6px, transparent 6px, transparent 12px);
        z-index: 1;
    }
	

}
*/

.step-card {
	position: relative;
    z-index: 2;
    background-color: #ffffff !important;
}

.step-arrow-badge {
    transition: transform 0.2s ease;
}

.step-card:hover .step-arrow-badge {
    transform: scale(1.1);
    background-color: #005ce6 !important;
    color: #ffffff !important;
    border-color: #005ce6 !important;
}