:root {
    --primary-purple: #015cc0;
    --primary-light: #ece9ff;
    --text-navy: #24262c;
    --text-muted: #353a4e;
}

.sst-hero-section {
  background-color: #03011e;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 120px 0 0 0;
  position: relative;
  overflow: visible !important;
  z-index: 2;
}
.sst-overlap-container {
  position: relative;
  z-index: 10;
}
.sst-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sst-badge img {
  height: 12px;
}
.sst-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 25px;
  margin-bottom: 25px;
}
.sst-title span {
  color: #3b82f6; /* Accent blue for 'People Love' */
}
.sst-description {
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
  max-width: 540px;
  margin-bottom: 40px;
}
.sst-btn-primary {
  background-color: #2563eb;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  transition: background 0.3s ease;
}
.sst-btn-primary:hover {
  background-color: #1d4ed8;
  color: #fff;
}
.sst-btn-outline {
  background-color: transparent;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}
.sst-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* Trust Badges Styling */
.sst-trust-container {
  margin-top: 60px;
  margin-bottom: 50px;
  gap: 30px;
}
.sst-trust-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sst-trust-brand {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.sst-stars {
  color: #ffb800;
  font-size: 0.85rem;
}
.sst-stars-text {
  font-size: 0.8rem;
  color: #a0aec0;
  margin-left: 5px;
}
.sst-trust-sub {
  font-size: 0.8rem;
  color: #a0aec0;
  margin-top: 2px;
}
.sst-nsw-gov {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 20px;
}
.sst-nsw-text {
  font-size: 0.75rem;
  line-height: 1.2;
  color: #a0aec0;
}
.sst-nsw-text strong {
  color: #fff;
  display: block;
}
/* Mockup Placeholder */
.sst-mockup-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sst-mockup-img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Bottom Counter Section */
.sst-counter-card {
  background-color: #ffffff;
  color: #000000;
  border-radius: 18px;
  padding: 40px 20px;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: -150px
}
.sst-counter-item {
  text-align: center;
  position: relative;
}
/* Vertical dividers between counters except the last one */
.sst-counter-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #e2e8f0;
}
.sst-icon-shape {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 1.25rem;
}
/* Specifc Icon Colors based on Design */
.sst-ico-blue {
  background-color: #eff6ff;
  color: #2563eb;
}
.sst-ico-green {
  background-color: #f0fdf4;
  color: #16a34a;
}
.sst-ico-purple {
  background-color: #faf5ff;
  color: #7c3aed;
}
.sst-ico-orange {
  background-color: #fff7ed;
  color: #ea580c;
}
.sst-ico-pink {
  background-color: #fff1f2;
  color: #e11d48;
}
.sst-counter-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 10px;
}
.sst-counter-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1d2345;
  margin-bottom: 4px;
}
.sst-counter-subtext {
  font-size: 0.95rem;
  color: #1d2345 !important;
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .sst-title {
    font-size: 2.5rem;
  }
  .sst-counter-item:not(:last-child)::after {
    display: none;
  }
  .sst-counter-item {
    padding-bottom: 30px;
  }
  .sst-nsw-gov {
    border-left: none;
    padding-left: 0;
  }
}
/* Side Floating Tech Badges */
.sst-floating-icon {
  position: absolute;
  width: 62px;
  height: 62px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.sst-icon-flutter {
  right: 0px;
  top: 100px;
}
.sst-icon-apple {
  right: 0px;
  top: 200px;
}
.sst-icon-android {
  right: 0px;
  top: 300px;
}
.sst-build-section {
  position: relative;
  z-index: 1;
  /* Extra top padding so the section content isn't covered by the card */

}
/* Top Header Styles */
.sst-pre-title {
  background-color: #eff6ff;
  color: #2563eb;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}
.sst-main-title {
  font-size: 2.5rem;
  font-weight: 600;
	line-height: 1.2 !important;
  color: #24262c;
  margin-bottom: 15px;
}
.sst-main-title span {
  color: #2563eb;
}
.sst-subtitle {
  color: #3e3f4b;
  max-width: 750px;
  margin: 0 auto 60px auto;
  line-height: 1.6;
  font-weight: 400px!important;
  font-size: 1.25rem!important;
}
/* Card Container Styles */
.sst-feature-card {
  background: #ffffff;

  border-radius: 16px;
  padding: 28px 10px;
  height: 100%;
  display: flex;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
/*  cursor: pointer;*/
}
.sst-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
/* Color Matched Icon Wrappers */
.sst-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
}
/* Individual background colors matched to design graphics */
.sst-bg-startup {
  background-color: #eef2ff;
}
.sst-bg-business {
  background-color: #e8f5e9;
}
.sst-bg-enterprise {
  background-color: #e8eaf6;
}
.sst-bg-marketplace {
  background-color: #fce4ec;
}
.sst-bg-healthcare {
  background-color: #ffebee;
}
.sst-bg-education {
  background-color: #fff3e0;
}
.sst-bg-ai {
  background-color: #ede7f6;
}
.sst-bg-ondemand {
  background-color: #e0f2f1;
}
.sst-icon-box img {
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}
/* Text Custom Styles */
.sst-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  padding-right: 25px;
}
.sst-card-text {
  font-size: 1.125rem !important;
  color: #3e3f4b !important;
  line-height: 1.5;
  margin-bottom: 0;
  padding-right: 25px;
}
/* Action Arrow Link */
.sst-arrow-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}
.sst-feature-card:hover .sst-arrow-btn {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
/* Base Container & Section Elements */
.sst-partner-section {
  background-color: #ffffff;
  padding: 80px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  overflow: hidden;
}
/* Badge/Pre-title */
.sst-badge-about {
  border: 1px solid #c7d2fe;
  background-color: #f5f3ff;
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 16px;

  border-radius: 50px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}
/* Main Typography */
.sst-main-heading {
  font-size: 2.5rem;
  font-weight: 600;
  color: #24262c!important;
  line-height: 1.15;
  margin-bottom: 30px;
}
.sst-main-heading span {
  color: #2563eb;
  position: relative;
  display: inline-block;
}
.sst-heading-arrow {
  position: absolute;
  right: 0;
  bottom: -25px; /* Adjust this value depending on the height of your arrow image */
  width: 80%;
  height: auto;
  pointer-events: none; /* Prevents text selection blocking */
}
.sst-body-text {
  color: #3e3f4b;
  font-size: 1.25rem!important;
  line-height: 1.6;
  margin-bottom: 20px;
}
/* Core Checkbox Checklist */
.sst-checklist {
  margin-top: 25px;
  margin-bottom: 35px;
}
.sst-check-item {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sst-check-item i {
  color: #2563eb;
  font-size: 1.1rem;
}
/* Grid Matrix Counters Block */
.sst-counter-grid-box {
  background-color: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 10px 0px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}
.sst-counter-col {
  text-align: center;
  position: relative;
}
.sst-counter-col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: #e2e8f0;
}
.sst-grid-icon {
  font-size: 1.35rem;
  margin-bottom: 10px;
  display: inline-block;
}
.sst-grid-icon-blue {
  color: #2563eb;
}
.sst-grid-icon-green {
  color: #16a34a;
}
.sst-grid-icon-purple {
  color: #7c3aed;
}
.sst-grid-icon-orange {
  color: #ea580c;
}
.sst-counter-val {
  font-size: 1.65rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.sst-counter-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-top: 2px;
  line-height: 1.3;
}
/* Bottom Corporate Badge */
.sst-gov-footer-card {
  padding: 16px 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sst-gov-shield {
  width: 60px;
  height: 60px;
  background-color: #deecff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: 15px
}
.sst-gov-meta {
  margin-left: 16px;
  flex-grow: 1;
  max-width: 390px;
}
.sst-gov-meta h5 {
  font-size: 1rem !important;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.sst-gov-meta p {
  font-size: 0.99rem !important;
  margin: 0;
}
.sst-gov-divider {
  width: 1px;
  height: 40px;
  background-color: #cbd5e1;
  margin: 0 24px;
}
.sst-gov-logo img {
  height: 65px;
  object-fit: contain;
}
/* Right Column: Interactive Mockups & Callouts Dynamic Layout */
.sst-interactive-visual-wrapper {
  position: relative;
  width: 100%;
  min-height: 620px;
}
/* Central Mobile Mockups Assets */
.sst-main-mockup-graphics {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* Floating Information Tooltip Cards */
.sst-floating-feature-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  position: absolute;
  z-index: 5;
  max-width: 190px;
}
.sst-float-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1rem;
}
.sst-bg-light-blue {
  background-color: #e5eef3;
  color: #2563eb;
}
.sst-bg-light-orange {
  background-color: #fbecd9;
  color: #ea580c;
}
.sst-bg-light-green {
  background-color: #e4f7ea;
  color: #16a34a;
}
.sst-float-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.sst-float-card-desc {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  margin: 0;
}
/* Absolute Floating Coordinates Positions matching the mockup layout matrix */
.sst-pos-top-right {
  top: -2%;
  right: 2%;
  max-width: 250px;
}
.sst-pos-mid-left {
  top: 40%;
  left: 7%;
}
.sst-pos-bottom-right {
  bottom: -7%;
  right: 1%;
  max-width: 250px;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
  .sst-main-heading {
    font-size: 2.5rem;
  }
  .sst-counter-col:not(:last-child)::after {
    display: none;
  }
  .sst-counter-col {
    margin-bottom: 15px;
  }
  .sst-interactive-visual-wrapper {
    min-height: 500px;
    margin-top: 50px;
  }
  .sst-gov-footer-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .sst-gov-divider {
    display: none;
  }
  .sst-gov-meta {
    margin-left: 0;
  }
}
/* Base Section Styling */
.sst-services-section {
  background-color: #f8fafc;
  padding: 80px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
}
/* Header Elements */
.sst-badge-services {
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.sst-section-title {
  font-size: 2.75rem;
  font-weight: 600;
  color: #24262c;
  margin-bottom: 20px;
}
.sst-section-title span {
  color: #2563eb;
}
.sst-section-subtitle {
  font-size: 1.05rem;
  max-width: 880px;
  margin: 0 auto 50px auto;
  line-height: 1.6;
}
/* Service Grid Cards */
.sst-service-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.sst-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.03);
}
/* Bottom colored indicator strips unique to each card */
.sst-service-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
.sst-indicator-01::after {
  background: linear-gradient(90deg, #22c55e, #86efac);
}
.sst-indicator-02::after {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.sst-indicator-03::after {
  background: linear-gradient(90deg, #0ea5e9, #7dd3fc);
}
.sst-indicator-04::after {
  background: linear-gradient(90deg, #06b6d4, #67e8f9);
}
.sst-indicator-05::after {
  background: linear-gradient(90deg, #a855f7, #c084fc);
}
.sst-indicator-06::after {
  background: linear-gradient(90deg, #f97316, #fdba74);
}
.sst-indicator-07::after {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}
.sst-indicator-08::after {
  background: linear-gradient(90deg, #0d9488, #5eead4);
}
/* Card Elements Layout */
.sst-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.sst-icon-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dynamic background colors matched to the visuals */
.sst-icobg-01 {
  background-color: #f0fdf4;
}
.sst-icobg-02 {
  background-color: #eff6ff;
}
.sst-icobg-03 {
  background-color: #f0f9ff;
}
.sst-icobg-04 {
  background-color: #ecfeff;
}
.sst-icobg-05 {
  background-color: #faf5ff;
}
.sst-icobg-06 {
  background-color: #fff7ed;
}
.sst-icobg-07 {
  background-color: #fdf2f8;
}
.sst-icobg-08 {
  background-color: #f0fdfa;
}
.sst-icon-container img {
  max-width: 52px;
  max-height: 52px;
}
.sst-card-number {
  font-size: 0.95rem;
  font-weight: 700;
}
.sst-num-01 {
  color: #22c55e;
}
.sst-num-02 {
  color: #2563eb;
}
.sst-num-03 {
  color: #0ea5e9;
}
.sst-num-04 {
  color: #06b6d4;
}
.sst-num-05 {
  color: #a855f7;
}
.sst-num-06 {
  color: #f97316;
}
.sst-num-07 {
  color: #ec4899;
}
.sst-num-08 {
  color: #0d9488;
}
.sst-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #24262c;
  margin-bottom: 12px;
  line-height: 1.3;
}
.sst-card-desc {
  font-size: 0.88rem;
  color: #232133;
  line-height: 1.5;
  margin-bottom: 24px;
}
.sst-link-more {
  font-size: 0.98rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.sst-link-more:hover {
  gap: 10px;
  color: #1d4ed8;
}
/* Bottom Value Props Bar */
.sst-props-bar {
  background-color: #ffffff;
  margin-top: 50px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
}
.sst-prop-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sst-prop-item:not(:last-child) {
  border-right: 1px solid #e2e8f0;
  padding-right: 15px;
}
.sst-prop-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
  font-size: 24px;
}
.sst-prop-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.sst-prop-desc {
  font-size: 0.78rem;
  color: #232133;
  line-height: 1.4;
  margin: 0;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
  .sst-section-title {
    font-size: 2.2rem;
  }
  .sst-prop-item:not(:last-child) {
    border-right: none;
    padding-right: 0;
  }
  .sst-prop-item {
    margin-bottom: 20px;
  }
}
/* ===================================
    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: 45%; /* 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 .fs-6 {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.overlay-content {
    bottom: 30px;
    position: absolute;
    right: 30px;
}

.stat-col {
  min-width: 30%; /* Ensure they wrap nicely on small screens */
}
@media (max-width: 767.98px) {
  .video-quote-overlay {
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 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: 0;
  top: 48%;
  transform: translateY(-50%);
  max-width: 280px;
  z-index: 0!important;
}
@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;
}
/*
.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: 999 !important;
  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;
}
/* ==========================================
   VERTICAL VIDEO BLUR BACKGROUND EFFECT
   ========================================== */
.video-wrapper {
  height: 300px !important; /* Force the height to exactly 450px */
  min-height: 300px !important; /* Prevent it from shrinking */
  max-height: 300px !important; /* Prevent it from stretching */
  background-color: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  border-radius: 5px;
  flex: 0 0 auto !important; /* Override Bootstrap's flex-grow-1 */
}
/* Main Foreground Video - Now uses 'contain' to show full vertical height */
.client-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: relative;
  z-index: 2;
  background: transparent;
}
/* Blurred Background Video - Fills the empty space */
.client-video-bg {
  object-fit: cover !important;
  filter: blur(5px) brightness(0.7); /* Heavily blurred and darkened so text stays readable */
  transform: scale(1.15); /* Scales up slightly to hide the messy transparent edges created by the blur */
  z-index: 0;
  pointer-events: none; /* Prevents the user from accidentally clicking the background video */
}
@media (max-width: 991.98px) {
  .video-wrapper {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }
  .ms-cta .text-start {
    text-align: center !important
  }
}
/* Fix: Brings the text overlays back on top of the new video stack */
.video-quote-overlay, .video-quote-overlay-left {
  z-index: 3 !important;
  padding: 3rem 3rem 3rem 5rem !important
}
/* ==========================================
   POSTER COVER & VIDEO PLAYBACK CONTAIN FIX
   ========================================== */
/* Main Video - Default state (Paused / Showing Poster) 
   Forces the poster image to fill and cover the entire container area completely */
.video-wrapper:not(.video-is-playing) .client-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: relative;
  z-index: 2;
  background: transparent;
}
/* Main Video - Active state (Playing)
   Snaps back to 'contain' so vertical videos display fully without being cropped */
.video-wrapper.video-is-playing .client-video {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 2;
  background: transparent;
}
.success-slider .py-2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.success-slider .px-2 {
  padding-right: .5rem !important;
  padding-left: .5rem !important;
}
.text-primary-custom {
  color: #015cc0 !important;
}
@media (min-width: 992px) {
  .success-slider .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .success-slider .mt-lg-0 {
    margin-top: 0 !important;
  }
}
/* ==========================================
   VIDEO OVERLAY SMOOTH FADE FIX
   ========================================== */
.custom-play-button {
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out !important;
  z-index: 99 !important
}
/* When this class is applied via JS, the overlays vanish smoothly */
.video-is-playing .video-quote-overlay, .video-is-playing .video-quote-overlay-left, .video-is-playing .custom-play-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.video-quote-overlay .fs-6 {
  font-size: 1rem !important
}


.lead {
    font-size: 1.15rem!important;
    
}

/* ==========================================
   FEEDBACK SLIDER FIXES
   ========================================== */
.client-feedback-slider .slick-track {
    display: flex !important;
}

.client-feedback-slider .slick-slide {
    height: inherit !important;
    display: flex !important;
    flex-direction: column;
}

.feedback-btn-prev:hover,
.feedback-btn-next:hover {
    background-color: #f1f5f9 !important;
    transition: background-color 0.2s ease-in-out;
}
/* ==========================================
   FEEDBACK SLIDER ABSOLUTE ARROWS
   ========================================== */
.success-card .feedback-btn-prev,
.success-card .feedback-btn-next {
    position: absolute;
    top: 225px; /* Exactly 50% of the 450px video height */
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
	z-index:9999;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease;
}

.success-card .feedback-btn-prev:hover,
.success-card .feedback-btn-next:hover {
    background-color: #f8fafc;
    transform: translateY(-50%) scale(1.05); /* Slight pop effect */
}

/* Pull arrows outside on Desktop */
@media (min-width: 992px) {
    .success-card .feedback-btn-prev { left: -35px; }
    .success-card .feedback-btn-next { right: -35px; }
}

/* Push arrows slightly inward on Mobile so they are easy to tap and don't cause overflow */
@media (max-width: 991.98px) {
    .success-card .feedback-btn-prev { left: 10px; }
    .success-card .feedback-btn-next { right: 10px; }
    
    /* Make buttons slightly smaller for touch devices */
    .success-card .feedback-btn-prev,
    .success-card .feedback-btn-next {
              min-width: 45px;
        min-height: 55px;
        top: 175px;
    }
	
	.ms-img img{height:130px}
}


/* 3. HERO PADDING OFFSET */
.ms-app-hero-sec {
  padding-top: 80px !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;
}

.ms-hero-glow-right {
  width: 500px;
  height: 500px;
  top: 10%;
  right: -5%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.45) 0%, rgba(56, 189, 248, 0.15) 60%, transparent 80%);
}

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

/* 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;
}


/* ==========================================
   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;
}

.sst-icon-box2 {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
}
.sst-icon-box2 img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}


/* ==========================================
   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;
}

.text-purple{color:#5553ff!important}


/* ==========================================
   OUR DEVELOPMENT PROCESS SECTION STYLING
   ========================================== */
.ms-process-sec {
  position: relative;
}

.ms-process-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  top: 15%;
  right: -5%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.25) 0%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
}

.ms-process-badge-bar {
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #38bdf8;
}

.ms-process-card {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  margin-top: 15px; /* Leaves room for the floating step pill badge */
}

.ms-process-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
}

.ms-step-number {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.ms-process-icon-box {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.text-light-muted {
  color: #94a3b8 !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;
}



/* ==========================================
   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);
}

.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;
}
.ms-b-img {
  height: 56px;
}

@media (max-width: 991.98px) {
  .ms-b-img {
    width: 85px
  }
  .trusted-brands-bar .gap-5 {
    gap: 1rem !important
  }
}

.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;
}

/* ==========================================
   APP DEVELOPERS SYDNEY HERO STYLING
   ========================================== */
.ms-sydney-hero-sec {
  background-color: #040814;
  min-height: 95vh;
  position: relative;

}

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

.ms-sydney-glow-right {
  width: 500px;
  height: 500px;
  top: 10%;
  right: -5%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, rgba(56, 189, 248, 0.15) 60%, transparent 80%);
}

.ms-sydney-glow-left {
  width: 450px;
  height: 450px;
  bottom: 5%;
  left: -5%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.25) 0%, transparent 70%);
}

/* Top Pill Badge */
.ms-sydney-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

/* Gradient text for Sydney */
.ms-sydney-gradient-text {
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

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

/* Feature Icon Boxes */
.ms-sydney-icon-box {
  width: 44px;
  height: 44px;
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.25);
}

/* Action Buttons */
.ms-sydney-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border: none;
  transition: all 0.3s ease;
}

.ms-sydney-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

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

.ms-sydney-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* ==========================================
   PHONE MOCKUPS COMPOSITION
   ========================================== */
.ms-sydney-mockup-wrapper {
  perspective: 1200px;
  min-height: 580px;
}

.ms-sydney-mockup-aura {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, rgba(56, 189, 248, 0.2) 60%, transparent 80%);
  filter: blur(60px);
  z-index: 1;
}




/* ==========================================
   BOTTOM STATS STRIP ICONS
   ========================================== */
.ms-sydney-stat-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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





/* ==========================================
   EXPERT SOFTWARE DEVELOPERS SECTION STYLING
   ========================================== */
.ms-expert-sw-sec {
  background-color: #ffffff;
}

.ms-expert-badge-bar {
  display: inline-block;
  width: 32px;
  height: 3px;
  background-color: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

.ms-expert-features-box {
  border-color: #edecf7 !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.05) !important;
}

/* Subtle vertical divider styling for desktop screens */
@media (min-width: 768px) {
  .border-start-md {
    border-left: 1px solid #edecf7;
  }
}


/* ==========================================
   WHAT CAN WE BUILD FOR YOU SECTION STYLING
   ========================================== */
.ms-build-solutions-sec {
  background-color: #ffffff;
}

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

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

/* Accent Short Divider Lines under card titles */
.ms-card-divider {
  width: 24px;
  height: 2px;
  background-color: #2563eb;
}

.ms-card-divider-success {
  width: 24px;
  height: 2px;
  background-color: #16a34a;
}

.ms-card-divider-purple {
  width: 24px;
  height: 2px;
  background-color: #8b5cf6;
}

.ms-card-divider-warning {
  width: 24px;
  height: 2px;
  background-color: #f59e0b;
}

.ms-card-divider-info {
  width: 24px;
  height: 2px;
  background-color: #06b6d4;
}

.ms-card-divider-danger {
  width: 24px;
  height: 2px;
  background-color: #e11d48;
}

/* ==========================================
   SOFTWARE DEVELOPMENT CAPABILITIES V2 STYLING
   ========================================== */
.ms-capabilities-v2-sec {
  background-color: #ffffff;
}

.ms-cap-card {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Subtle top border highlight effect on hover */
.ms-cap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

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

.ms-cap-card:hover::before {
  background-color: var(--primary-purple, #4f46e5);
}

/* Accent Short Divider Lines */
.ms-cap-divider {
  width: 24px;
  height: 2px;
  background-color: var(--primary-purple, #4f46e5);
}

.ms-cap-divider-success {
  width: 24px;
  height: 2px;
  background-color: #10b981;
}

.ms-cap-divider-info {
  width: 24px;
  height: 2px;
  background-color: #0284c7;
}

.ms-cap-divider-warning {
  width: 24px;
  height: 2px;
  background-color: #d97706;
}

.ms-cap-divider-danger {
  width: 24px;
  height: 2px;
  background-color: #e11d48;
}

.ms-cap-divider-teal {
  width: 24px;
  height: 2px;
  background-color: #0d9488;
}






/* ==========================================
   SOFTWARE CAPABILITIES V3 (LIST ROW STYLE)
   ========================================== */
.ms-capabilities-v3-sec {
  background-color: #ffffff;
}

.ms-cap-row-item {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

.ms-cap-row-item:hover {
  transform: translateY(-3px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08) !important;
  background-color: #faf9ff !important;
}

.ms-cap-row-item:hover .ms-cap-num-badge {
  background-color: var(--primary-purple, #4f46e5) !important;
  color: #ffffff !important;
}



/* ==========================================
   WHY BUSINESSES CHOOSE US SECTION STYLING
   ========================================== */
.ms-why-choose-sec {
  background-color: #ffffff;
}

.ms-why-badge-bar {
  display: inline-block;
  width: 32px;
  height: 3px;
  background-color: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

/* Floating Badges Positioning over Team Image */
.ms-team-graphic-wrapper {
  position: relative;
}

.ms-floating-badge {
  position: absolute;
  z-index: 3;
  border-color: #edecf7 !important;
}

.ms-badge-tl {
  top: -25px;
  left: 20px;
}

.ms-badge-bl {
  bottom: 25px;
  left: -15px;
}

.ms-badge-br {
  bottom: 20px;
  right: -15px;
}

/* Benefit Rows Icon Boxes */
.ms-benefit-icon-box {
  border: 1px solid rgba(79, 70, 229, 0.15);
  transition: all 0.3s ease;
}

.d-flex.align-items-start:hover .ms-benefit-icon-box {
  background-color: var(--primary-purple, #4f46e5) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

@media (max-width: 991px) {
  .ms-floating-badge {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 10px;
  }
  .ms-team-graphic-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}



/* ==========================================
   CUSTOM SOFTWARE DEVELOPERS SECTION STYLING
   ========================================== */


/* Optional dark overlay gradient if you want to make text even more readable over your background image */
.ms-custom-sw-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(4, 8, 20, 0.9) 0%, rgba(4, 8, 20, 0.65) 50%, rgba(4, 8, 20, 0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

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

/* Primary Action Button */
.ms-sw-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  transition: all 0.3s ease;
}

.ms-sw-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* Secondary Action Button */
.ms-sw-btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

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

.ms-custom-sw-hero {
  position: relative;
  background-color: #040814;
  background-image: url("../img/sw-bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  padding-top: 140px !important;
  overflow: hidden; /* Ensures the graphic touches cleanly without bleeding out */
}

/* Strict vertical centering for text content and right-side column */
.ms-custom-sw-hero .row.align-items-center {
  display: flex !important;
  align-items: center !important;
}

/* Illustration wrapper container set to fill column height */
.ms-sw-illustration-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* Pushes the image down to the bottom */
  justify-content: center;
}

/* Forces the image to touch the bottom edge naturally */
.ms-sw-illustration-wrapper img {
  width: 100%;
  max-width: none !important; /* Allows it to expand fully */
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
  margin-bottom: -3rem; /* Pulls it down slightly to firmly meet the section's bottom edge */
}

/* Responsive adjustment for tablets/mobiles */
@media (max-width: 991px) {
  .ms-sw-illustration-wrapper img {
    margin-bottom: 0;
    max-width: 100% !important;
  }
}




/* 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;
}


.ready-to-build-sec .btn-primary-custom {
  background-color: var(--primary-purple)!important;
  border: none;
  font-weight: 500;
  padding: 0.85rem 2rem;
  color: #fff;
  transition: all 0.3s ease;
}
.ready-to-build-sec .btn-primary-custom:hover {
  background-color: #2b17bc!important;
  color: #fff;
  transform: translateY(-2px);
}
.ready-to-build-sec .btn-primary-custom:active {
  background-color: #2b17bc!important;
  color: #fff !important;
  transform: translateY(-2px);
}





/* ==========================================
   OUR APPROACH SECTION STYLING
   ========================================== */
.ms-approach-sec {
  background-color: #ffffff;
}

.ms-approach-badge-bar {
  width: 32px;
  height: 3px;
  background-color: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

.ms-approach-icon-box {
  border: 1px solid rgba(79, 70, 229, 0.12);
  transition: all 0.3s ease;
}

.col.d-flex:hover .ms-approach-icon-box {
  background-color: var(--primary-purple, #4f46e5) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}


/* ==========================================
   WHY BUSINESSES CHOOSE US SECTION STYLING
   ========================================== */
.ms-why-developers-sec {
  background-color: #ffffff;
}

.ms-why-badge-bar {
  width: 32px;
  height: 3px;
  background-color: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

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

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

/* Floating Badge Position */
.ms-why-graphic-wrapper {
  position: relative;
}

.ms-why-floating-card {
  bottom: 10px;
  right: 0px;
  max-width: 240px;
  border-color: #edecf7 !important;
  z-index: 3;
}

@media (max-width: 991px) {
  .ms-why-floating-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 20px auto 0 auto;
  }
}

/* ==========================================
   COMBINED SECTION STYLING
   ========================================== */
.ms-combined-path-sec {
  background-color: #ffffff;
}

.ms-path-badge-bar {
  width: 32px;
  height: 3px;
  background-color: var(--primary-purple, #4f46e5);
  border-radius: 2px;
}

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

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

.ms-path-floating-card {
  bottom: 10px;
  right: 0px;
  max-width: 240px;
  border-color: #edecf7 !important;
  z-index: 3;
}

@media (max-width: 991px) {
  .ms-path-floating-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 20px auto 0 auto;
  }
	
	.w-65{width:100%!important}
}



/* ==========================================
   CHOOSE YOUR PATH SECTION STYLING
   ========================================== */
.ms-choose-path-sec {
  background-color: #ffffff;
}

.ms-path-outer-box {
  border-color: #edecf7 !important;
  background-color: #fafbfc !important;
}

.ms-path-inner-card, .ms-discovery-bar {
  border-color: #edecf7 !important;
  transition: all 0.3s ease;
}

.ms-path-inner-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-purple, #4f46e5) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.06) !important;
}
.z-9 {
    z-index: 9 !important;
}
.success-card .btn-outline-primary{background:#fff}

.success-card .btn-outline-primary {
  color: #015cc0 !important;
  border-color: #015cc0 !important;
  font-weight: 500 !important;
  border-width: 2px !important
}
.success-card .btn-outline-primary:hover, .btn-soft-primary:hover {
  color: #fff !important;
  background-color: #015cc0 !important;
  border-color: #015cc0 !important
}



/* =====================
   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;
}


/* ==========================================
   SOFTWARE DEVELOPMENT PROCESS SECTION (V2)
   ========================================== */

/* Typography & Colors */
.text-gradient-green-purple {
    background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom Soft Tints for Backgrounds */
.bg-tint-green { background-color: #ecfdf5 !important; }
.text-green-custom { color: #10b981 !important; }

.bg-tint-blue { background-color: #eff6ff !important; }
.text-blue-custom { color: #3b82f6 !important; }

.bg-tint-purple { background-color: #f5f3ff !important; }
.text-purple-custom { color: #8b5cf6 !important; }

.bg-tint-teal { background-color: #e6fffa !important; }
.text-teal-custom { color: #14b8a6 !important; }

.bg-tint-pink { background-color: #fdf2f8 !important; }
.text-pink-custom { color: #db2777 !important; }

/* Stat Cards */
.stat-card-soft {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-color: rgba(0,0,0,0.03) !important;
}

.stat-card-soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
}

/* Dark CTA Button styling */
.btn-navy-dark {
    background-color: #0f172a;
    border: 1px solid #0f172a;
    transition: all 0.3s ease;
}

.btn-navy-dark:hover {
    background-color: #1e293b;
    border-color: #1e293b;
    transform: translateY(-2px);
}

.btn-arrow-circle {
    background-color: rgba(255, 255, 255, 0.2);
    width: 38px;
    height: 38px;
    transition: all 0.3s ease;
}

.btn-navy-dark:hover .btn-arrow-circle {
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateX(3px);
}

/* Right Side Process Cards */
.process-step-card {
    border-color: #f1f5f9 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease;
}

.process-step-card:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
    transform: translateX(4px);
}

.icon-box-lg {
    width: 60px;
    height: 60px;
}

/* Desktop Sticky Logic */
@media (min-width: 992px) {
    .process-sticky-col {
        position: -webkit-sticky;
        position: sticky;
        top: 7rem; /* Keeps it fixed in place on scroll. Adjust if header covers it */
    }
	
	.w-65{width:64%!important}
}



/* ==========================================
   PORTFOLIO SLIDER CONTROLS
   ========================================== */
.portfolio-custom-controls {
    min-width: 220px;
    justify-content: space-between;
}

.portfolio-btn-prev, 
.portfolio-btn-next {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.portfolio-btn-prev:hover, 
.portfolio-btn-next:hover {
    background-color: #dbeafe; /* Slightly darker blue on hover */
}

/* Slick Dots Native Override */
.portfolio-dots-container .slick-dots {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.portfolio-dots-container .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.portfolio-dots-container .slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #a5b4fc; /* Light inactive dot color */
    padding: 0;
    text-indent: -9999px; /* Hides the text numbers injected by slick */
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Removes default slick content injection */
.portfolio-dots-container .slick-dots li button:before {
    display: none !important; 
}

/* Active Dot Styling */
.portfolio-dots-container .slick-dots li.slick-active button {
    background-color: #0056d2!important; /* Primary blue for active dot */
    width: 10px;
    height: 10px;
}

/* 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");
}

/* ==========================================
   CUSTOM IMAGE ZOOM VIEWER (LIGHTBOX)
   ========================================== */

/* Make the mockups look clickable */
.zoomable-mockup {
    cursor: zoom-in;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.zoomable-mockup:hover {
    filter: brightness(0.85); /* Slight dim effect on hover to show interactivity */
}

/* The Fullscreen Overlay Container */
.custom-image-viewer {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 99999; /* Sit on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 15, 30, 0.95); /* Deep navy translucent background */
    backdrop-filter: blur(8px); /* Modern blur effect */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show class added via JS */
.custom-image-viewer.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* The Zoomed Image */
.custom-image-viewer .viewer-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: zoomInImage 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Close Button */
.custom-image-viewer .viewer-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 100000;
}

.custom-image-viewer .viewer-close:hover {
    color: #cbd5e1;
    transform: scale(1.1);
}

/* Zoom Animation */
@keyframes zoomInImage {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}



.faq-sec .sticky-top{z-index:1!important}



/* ==========================================
   NEW HEADER & MEGA MENU CSS
   ========================================== */
.text-navy { color: #24262c; }
.text-primary { color: #015cc0 !important; }

/* Navbar Link Hover */
.ms-navbar-section .navbar-nav .nav-link {
    font-size: 1rem;
    transition: color 0.3s ease;
}
.ms-navbar-section .navbar-nav .nav-link:hover {
    color: #015cc0 !important;
}

/* Remove default Bootstrap dropdown caret */
.dropdown-toggle::after {
    display: none;
}

/* Hover Dropdown Logic (Desktop Only) */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .navbar .dropdown .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;
        pointer-events: none;
    }
    
    .navbar .dropdown:hover .dropdown-menu {
        pointer-events: auto;
    }

    /* Mega Menu Absolute Centering */
    .ms-navbar-section .dropdown.position-static .dropdown-menu {
        left: 50% !important;
        transform: translateX(-50%) translateY(10px);
  ;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }
    
    .ms-navbar-section .dropdown.position-static:hover .dropdown-menu {
        transform: translateX(-50%) translateY(0);
    }
}

/* Mega Menu Internal Cards */
.menu-card {
    transition: all 0.3s ease;
}
.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #015cc0 !important;
}
.menu-icon-box {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f8f9fc;
}

/* ==========================================
   MOBILE HEADER SPECIFICS
   ========================================== */
@media (max-width: 991.98px) {
    .main-logo { width: 160px !important; }
    
    /* Mobile Quick Action Icons (WhatsApp / Call) */
    .mobile-header-icon {
        font-size: 1.4rem;
        color: #24262c !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }
    .mobile-header-icon:active { opacity: 0.5; }

    /* Sticky Mobile Header Lock */
    .sticky-mobile-only {
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1050 !important;
        background-color: #ffffff; 
        transform: translateZ(0); 
        -webkit-transform: translateZ(0);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    body { padding-top: 75px; } /* Prevent content from hiding behind fixed header */
}



.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);
}



/* ==========================================
   NEW FOOTER SECTION CSS
   ========================================== */
.ms-footer-sec {
  background-color: #050b16 !important;
}

.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: #015cc0; /* Theme Primary Color */
}

/* Footer Link Hover Animations */
.ms-footer-link {
  transition: all 0.2s ease;
  display: inline-block;
}

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

/* Social Media Box Icons */
.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: #015cc0;
  border-color: #015cc0;
  transform: translateY(-2px);
}

/* ==========================================
   MOBILE ACCORDION FOOTER
   ========================================== */
.ms-mobile-accordion .accordion-button {
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* Invert default Bootstrap accordion chevron to white */
.ms-mobile-accordion .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

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

/* Extra spacing for mobile viewport */
@media (max-width: 991.98px) {
  .ms-footer-sec {
      padding-bottom: 90px !important; /* Space for mobile sticky bottom CTA if used */
  }
}




/* ==========================================
   BUG FIXES: HORIZONTAL SCROLL & STICKY ELEMENTS
   ========================================== */


/* 2. Mobile Strict Fixed Header & Footer */
@media (max-width: 991.98px) {
    /* 1. Fix Horizontal Page Wobble (Left-Right Move) */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

    /* Lock Header exactly at the top */
    .sticky-mobile-only {
        position: fixed !important; /* 'sticky' se 'fixed' me change kiya taaki hide na ho */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1050 !important;
        background-color: #ffffff; /* Scrolls me transparent hone se rokega */
       /* transform: translateZ(0);  Mobile browser rendering fix 
        -webkit-transform: translateZ(0);*/
		
    }
    
    /* Make space for fixed Header and Footer so content doesn't overlap */
    body {
        padding-top: 75px !important; 
        
    }
    
    /* Lock Bottom CTA exactly at the bottom */
    .mobile-sticky-cta {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1050 !important;
        padding-bottom: env(safe-area-inset-bottom); /* iOS iPhone ke niche wali line (home bar) se overlap rokne ke liye */
        transform: translateZ(0); /* Mobile browser rendering fix */
        -webkit-transform: translateZ(0);
    }
}


/* ==========================================
   MOBILE HEADER QUICK ACTION ICONS
   ========================================== */
@media (max-width: 991.98px) {
    .mobile-header-icon {
       
        color: #24262c !important; /* Dark Navy Color */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }
    
    /* Touch (Tap) karne par halka sa fade effect */
    .mobile-header-icon:active {
        opacity: 0.5;
    }
}

.navbar-brand img{height:55px}


@media (max-width: 991.98px) {
	.navbar-brand img{height:50px}
}

/* ==========================================
   BUG FIX: MOBILE OFFCANVAS MENU OVERLAP
   ========================================== */
@media (max-width: 991.98px) {
    /* 1. Header se transform hatayein taaki Offcanvas break na ho */
    .sticky-mobile-only {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 2. Mobile Menu ko solid white background aur highest z-index dein */
    .offcanvas, 
    .offcanvas.offcanvas-end {
        background-color: #ffffff !important;
        z-index: 1060 !important; /* Page ke sabhi elements se upar */
    }
    
    .offcanvas-body {
        background-color: #ffffff !important;
    }
}

/* ==========================================
   SWIPER GRID MOBILE DRIFT FIX
   ========================================== */
@media (max-width: 991.98px) {
    /* Grid module ki wajah se items wrap hone lagte hain jo drifting cause karta hai. Isey nowrap karna zaroori hai! */
    .ms-reviews-swiper .swiper-wrapper {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
	
	.fs-6{
    font-size: .80rem !important;
}	
	
	.lead {
    font-size: .9rem !important;
}
	
	.sst-subtitle{margin-bottom:30px!important}
	
	.py-5 {    padding-top: 2rem !important;
    padding-bottom: 2rem !important;}
    
    .ms-reviews-swiper .swiper-slide {
        margin-top: 0 !important; /* Removes unwanted grid vertical margins */
        height: auto !important;
        box-sizing: border-box !important;
    }
}



/* ==========================================
   REVIEWS SLICK SLIDER FIX
   ========================================== */
.ms-reviews-slick-slider .slick-slide > div {
    height: 100%;
}
.ms-reviews-slick-slider .slick-list {
    margin: 0 -12px;
    padding-top: 5px; /* Shadow katne se rokne ke liye */
}
/* Yeh margins slider mein automatically 24px ka grid gap bana denge */
.ms-reviews-slick-slider .ms-review-card {
    margin: 0 12px 24px 12px; 
}




/* ==========================================
   APP DEVELOPMENT CTA SECTION CSS
   ========================================== --> */

.app-dev-cta-section .transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-dev-cta-section .transition-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 92, 230, 0.2) !important;
}

/* ==========================================
   DISCUSS APP CTA SECTION CSS
   ========================================== */

.discuss-app-cta-section .transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.discuss-app-cta-section .transition-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
    background-color: #f8fafc !important;
}

/* ==========================================
   TECHNOLOGY & ENGINEERING SECTION CSS
   ========================================== */

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

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



/* ==========================================
   SOFTWARE DEV CTA SECTION CSS
   ========================================== */

.software-dev-cta-section .transition-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.software-dev-cta-section .transition-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 92, 230, 0.15) !important;
}

.software-dev-cta-section .btn-outline-primary:hover {
    background-color: #005ce6 !important;
    color: #ffffff !important;
}

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


.display-6 {
    font-size: calc(1.375rem + 1.5vw) ;
    line-height: 1.2 !important
}


@media (min-width: 1200px) {
    .display-6 {
        font-size:2.5rem!important;
    }
	
}



/* ==========================================================================
   SLICK SLIDER FIX FOR EQUAL HEIGHT CARDS IN ROWS
   ========================================================================== */
.ms-reviews-slick-slider .slick-slide > div {
    display: flex;
}

.ms-reviews-slick-slider .slick-slide {
    height: auto !important;
}

.ms-review-card {
    height: calc(100% - 1.5rem) !important; /* Rows ke beech mein proper spacing ke liye */
}