@charset "utf-8";
/* CSS Document */
.fs-7 { 
  font-size: 14px !important;
}
.hero-graphic-container {
  margin-top: -50px;
}
.brand-ms-image {
  /* filter: grayscale(100%); */
  opacity: 1;
}
.brand-ms-image:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.three-lines {
  position: absolute;
  top: 0%;
  right: 30%;
}
.ms-b-img {
  height: 56px;
}

@media (max-width: 991.98px) {
  .ms-b-img {
    width: 85px
  }
  .trusted-brands-bar .gap-5 {
    gap: 1rem !important
  }
}
@media (max-width: 991.98px) {
  .fw-lg-medium {
    font-weight: 600 !important;
  }
}
.nav-item .fs-5 {
  font-size: 16px !important
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  color: #fff;
  background-color: #0b5ed7 !important;
  border-color: var(--bs-btn-active-border-color) --bs-btn-active-border-color is not defined;
}
@media (max-width: 991.98px) {
  .main-logo {
    width: 160px !important;
  }
  .stage-card {
    padding: 25px 12px !important
  }
  .mega-column {
    margin-bottom: 0 !important
  }
  .gov-logo-item img {
    width: 90px !important
  }
  .gov-logo-item {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    cursor: default;
  }
  .gov-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
}
.gov-logo-item img {
  width: 140px
}
.main-logo {
  width: 200px;
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .features-grid {
    padding-top: 25px;
  }
  .three-lines {
    position: absolute;
    top: 0%;
    right: 24%;
  }
  .main-title {
    font-size: 3.3rem !important;
  }
  .ms-b-img {
    width: 143px !important;
  }
  h6, .small, small, .fs-6 {
    font-size: 13px !important;
    line-height: 1.3 !important
  }
  .gov-logo-item img {
    width: 130px !important
  }
}
.text-muted {
  color: rgb(62 63 75) !important;
}
.about-icons .icon-box-sm {
  text-align: center;
  line-height: 40px;
}
.msd-form-container {
  padding: 40px;
  max-width: 700px;
  margin: 40px auto;
}
/* Custom Input Styling */
.msd-custom-input {
  border: none;
  border-bottom: 1px solid #dcdcdc;
  border-radius: 0;
  background-color: transparent;
  padding: 5px 0;
  box-shadow: none !important;
  color: #1a1a1a;
}
.msd-custom-input:focus {
  border-bottom-color: #0b032d;
  font-size: 1.25rem !important
}
.msd-form-label {
  font-weight: 600;
  color: #0b032d;
  margin-bottom: 0;
  font-size: 1.25;
}
.msd-asterisk {
  color: #d32f2f;
}
.msd-helper-text {
  color: #6c757d;
  font-size: 1.15rem;
  margin-bottom: 15px;
  margin-top: 5px;
}
/* --- Cards-based Radio Buttons --- */
.msd-custom-radio-card {
  border: 1px solid #b0b0b0;
  background-color: transparent;
  color: #333;
  text-align: left;
  padding: 12px 20px;
  transition: all 0.2s ease-in-out;
  font-size: 1.15rem;
  border-radius: 4px;
  position: relative;
  padding-right: 45px; /* Reserves space for the check icon */
}
.msd-custom-radio-card:hover {
  border-color: #0b032d;
}
.msd-check .btn-check + .btn:hover:hover {
  border-color: #3b23ed !important;
}
/* Radio checkmark icon setup */
.msd-custom-radio-card::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
/* Active Radio State */
.btn-check:checked + .msd-custom-radio-card {
  border-color: #0b032d;
  background-color: #f4f6fc;
  color: #fff;
  font-weight: 500;
}
.btn-check:checked + .msd-custom-radio-card::after {
  opacity: 1; /* Shows the checkmark */
}
/* --- Pill Checkboxes --- */
.msd-custom-pill {
  border: 1px solid #b0b0b0;
  color: #333;
  background-color: transparent;
  padding: 6px 16px;
  font-size: 1.09rem !important;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
}
.msd-custom-pill:hover {
  border-color: #0b032d;
}
/* Pill checkmark icon setup */
.msd-custom-pill::after {
  content: '';
  display: inline-block;
  width: 0; /* Hidden by default */
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease;
}
/* Active Pill State */
.btn-check:checked + .msd-custom-pill {
  border-color: #0b032d;
  background-color: #f4f6fc;
  color: #fff;
  font-weight: 500;
}
.btn-check:checked + .msd-custom-pill::after {
  width: 16px; /* Expands to show icon */
  margin-left: 8px; /* Adds spacing between text and icon */
  opacity: 1;
}
/* Submit Button */
.msd-btn-submit {
  background-color: #0b032d;
  color: white;
  padding: 12px 30px;
  font-weight: 600;
  border: none;
  transition: background-color 0.2s;
  font-size: 1.25rem !important
}
.msd-btn-submit:hover {
  background-color: #160859;
  color: white;
}
.ms-bg-light {
  background: #f3f2ff
}
/* ==========================================
   DARK SECTION ALTERNATING THEME (Sleek & Clean)
   ========================================== */
.bg-dark-section {
  background: -webkit-gradient(linear, left top, right top, from(#071c4d), to(#002d97)) !important;
  background: linear-gradient(90deg, #071c4d, #002d97) !important;
  color: #e2e8f0 !important;
}
.bg-dark-section p {
  color: #e2e8f0 !important;
}
.bg-dark-section-reverse {
  background: -webkit-gradient(linear, left top, right top, from(#032574), to(#0b369b)) !important;
  background: linear-gradient(90deg, #032574, #0b369b) !important;
  color: #e2e8f0;
}
.bg-dark-section .stage-list li::before {
  color: #e2e8f0;
}
/* Typography overrides for dark background */
.bg-dark-section .text-navy, .bg-dark-section h1, .bg-dark-section h2, .bg-dark-section h3, .bg-dark-section h4, .bg-dark-section h5, .bg-dark-section h6 {
  color: #ffffff !important;
}
.bg-dark-section .text-muted {
  color: #d0def5 !important; /* Lighter slate for readability */
}
.bg-dark-section .gov-trust-banner {
  background-color: transparent !important;
}
/* Clean, frictionless card aesthetic for dark mode */
.bg-dark-section .stage-card, .bg-dark-section .build-card, .bg-dark-section .grid-card-ai, .bg-dark-section .stay-card, .bg-dark-section .use-case-card, .bg-dark-section .award-card, .bg-dark-section .bg-white, .bg-dark-section .success-card {
  background-color: rgba(255, 255, 255, .01) !important; /* Subtle dark card */
  border-color: rgba(255, 255, 255, 0.02) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
/* Sub-components & specific sections inside dark mode */
.bg-dark-section .flow-step {
  background-color: rgba(255, 255, 255, .04) !important; /* Subtle dark card */
  border-color: rgba(255, 255, 255, 0.02) !important;
}
.bg-dark-section .comparison-row, .bg-dark-section .bg-white-purple {
  background-color: #12142b !important;
  border-color: rgba(255, 255, 255, 0.02) !important;
}
.bg-dark-section .comparison-table-wrapper {
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-dark-section .comparison-row .border-end {
  border-right-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-dark-section .comparison-row.border-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-dark-section .video-stats-row {
  background-color: #171a38 !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-dark-section .stat-col.border-end {
  border-right-color: rgba(255, 255, 255, 0.05) !important;
}
/* Modern UI Form styling in dark section */
.bg-dark-section .msd-custom-input {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.bg-dark-section .msd-custom-input:focus {
  border-bottom-color: var(--primary-purple);
}
.bg-dark-section .msd-form-label, .bg-dark-section .msd-helper-text {
  color: #cbd5e1;
}
.bg-dark-section .msd-custom-radio-card, .bg-dark-section .msd-custom-pill {
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: transparent !important;
}
.bg-dark-section .btn-check:checked + .msd-custom-radio-card, .bg-dark-section .btn-check:checked + .msd-custom-pill {
  background-color: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: #ffffff;
}
.bg-dark-section .msd-custom-radio-card:hover, .bg-dark-section .msd-custom-pill:hover {
  border-color: var(--primary-purple);
}
.lh-md {
  line-height: 32px !important
}
/* Banner Core Layout & Gradient */
.cta-banner {
  min-height: 320px;
  background: linear-gradient(135deg, var(--banner-purple-start) 0%, var(--banner-purple-end) 100%);
  position: relative;
}
/* Banner Core Layout & Gradient */
.cta-banner-green {
  min-height: 320px;
  background: #0f8e54;
  position: relative;
}
.growing-banner-bg-img {
  /* Replace 'your-image-path.jpg' with your actual cut-out image of the team working */
  background-image: url('../imgs/growing.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 1;
  pointer-events: none;
}
.enterprise-banner-bg-img {
  /* Replace 'your-image-path.jpg' with your actual cut-out image of the team working */
  background-image: url('../imgs/enterprises3.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 1;
  pointer-events: none;
}
/* Background Image Layer tinted with Purple */
.banner-bg-img {
  /* Replace 'your-image-path.jpg' with your actual cut-out image of the team working */
  background-image: url('../imgs/team-meeting.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 1;
  pointer-events: none;
}
/* Line height tweak for matching title spacing */
.leading-tight {
  line-height: 1.2;
}
/* Solid White Button Styling */
.btn-custom-white {
  background-color: #ffffff;
  color: var(--text-color-primary) !important;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.btn-custom-white:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
/* Transparent Bordered Button Styling */
.btn-custom-outline {
  background-color: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.btn-custom-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  transform: translateY(-2px);
}
/* Utility Opacity */
.opacity-90 {
  opacity: 0.9;
}
/* Responsive adjustments for mid-size viewports */
@media (max-width: 991.98px) {
  .banner-bg-img {
    width: 100% !important;
    opacity: 0.15; /* Tone down image on small screens so text stays highly readable */
    background-size: cover
  }
  .industry-features-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Custom Green Palette Adaptations for Operations Module */
.text-green {
  color: #0f8e54 !important;
}
.bg-green {
  background-color: #0f8e54 !important;
}
.btn-consultation.bg-green:hover {
  background-color: #1aa34a !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid #edecf7 !important;
  }
}
.ms-light-border {
  border-color: #eceff1 !important
}
.ms-challenge .icon-box {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 15px !important;
  flex-shrink: 0;
}



/* ==========================================================================
   EFFECT 1: INNER SCROLL-DRIVEN PARALLAX & RISE
   ========================================================================== */
@media (min-width: 992px) {
  /* --- Image Zoom Setup --- */
  .project-slide-item .full-cover-mockup-img {
    transform: scale(1.25) rotate(1deg); /* Start slightly zoomed and tilted */
    opacity: 0.4;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
  }
  /* When the slide becomes active, snap the image to perfect focus */
  .project-slide-item.slick-active .full-cover-mockup-img {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  /* --- Text Content Rise Setup --- */
  .project-slide-item .panel-content-top, .project-slide-item .panel-content-bottom {
    transform: translateY(30px); /* Start pushed down */
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  }
  /* Delay the bottom specs slightly for a beautiful staggered orchestration */
  .project-slide-item .panel-content-bottom {
    transition-delay: 0.15s;
  }
  /* Animate content upward into place */
  .project-slide-item.slick-active .panel-content-top, .project-slide-item.slick-active .panel-content-bottom {
    transform: translateY(0);
    opacity: 1;
  }
}
.lh-lg {
  line-height: 28px !important
}
.form-control {
  font-size: 1.15rem !important
}
/* ==========================================
   VIDEO OVERLAY SMOOTH FADE FIX
   ========================================== */
.video-quote-overlay, .video-quote-overlay-left, .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;
}
/* ==========================================
   SLIDER PAGE-LOAD BLINK FIX (FOUC)
   ========================================== */
.success-slider {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out;
}
/* Slick automatically adds this class when it finishes loading */
.success-slider.slick-initialized {
  opacity: 1;
  visibility: visible;
}
/* Failsafe: Hide all slides except the first one before JS runs */
.success-slider:not(.slick-initialized) .success-slide-item:not(:first-child) {
  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-mobile-accordion i {
    width: 30px
  }
  .detail-metrics-panel .panel-content-bottom .text-center {
    text-align: left !important
  }
  .detail-metrics-panel .panel-content-bottom .px-4 {
    padding: 10px 0px !important
  }
  .detail-metrics-panel .panel-content-bottom .col-md-6 {
    margin-bottom: 15px !important
  }
  .portfolio-master-slider .p-4 {
    padding-top: 0px !important
  }
  .success-story-section {
    padding-top: 0px !important;
  }
  .navbar-expand-lg {
    padding-top: 0px !important
  }
  .sticky-top {
    padding-top: 0px !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;
}
/* ==========================================
   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: top 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;
}
/* Custom Responsive Divider Configurations for the Trust/Metrics Section */
@media (min-width: 992px) {
  .border-end-lg {
    border-right: 1px solid #d9d9ef !important;
  }
}
/* Faint scale hover transition on metrics rows for a clean user interaction feel */
.metric-item-box {
  transition: transform 0.3s ease;
}
.metric-item-box:hover {
  transform: translateY(-3px);
}
/* ==========================================================================
   FLEXIBLE FAQ ACCORDION LAYOUT RULES
   ========================================================================== */
.faq-interactive-flex-grid {
  margin-left: -12px;
  margin-right: -12px;
}
.faq-grid-card-item {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 2 Column breakdown rule for medium/tablet display ports */
@media (min-width: 576px) {
  .faq-grid-card-item {
    width: 50%;
  }
}
/* 3 Column breakdown rule for large desktop viewports matching image */
@media (min-width: 992px) {
  .faq-grid-card-item {
    width: 33.333%;
  }
}
.faq-grid-card-item .use-case-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-color: #edecf7 !important;
}
/* Hover lift and card highlighting */
.faq-grid-card-item:hover .use-case-card {
  transform: translateY(-5px);
  border-color: var(--primary-purple) !important;
  box-shadow: 0 1rem 2.5rem rgba(99, 102, 241, 0.12) !important;
}
/* Active Open Expansion UI Styles */
.faq-grid-card-item.is-expanded .use-case-card {
  border-color: var(--primary-purple) !important;
  background-color: #fcfcff !important;
  box-shadow: 0 0.5rem 1.5rem rgba(59, 34, 224, 0.05) !important;
}
/* Plus to Close/Minus Cross Rotation Trigger */
.faq-grid-card-item.is-expanded .faq-toggle-circle-plus {
  background-color: var(--primary-purple) !important;
  color: #ffffff !important;
  transform: rotate(45deg);
}
/* ==========================================================================
   CUSTOM BOOTSTRAP GRID EXTENSIONS
   ========================================================================== */
@media (min-width: 992px) {
  .row-cols-lg-7 > * {
    flex: 0 0 auto;
    width: calc(100% / 7);
  }
  .row-cols-lg-8 > * {
    flex: 0 0 auto;
    width: 12.5%; /* 100% / 8 */
  }
  .row-cols-lg-9 > * {
    flex: 0 0 auto;
    width: calc(100% / 9);
  }
  .row-cols-lg-10 > * {
    flex: 0 0 auto;
    width: 10%; /* 100% / 10 */
  }
  .row-cols-lg-11 > * {
    flex: 0 0 auto;
    width: calc(100% / 11);
  }
}
.dark-matrix-card .bg-opacity-5 {
  background: rgb(13 13 42) !important
}
/* Custom dark item hover state */
.dark-feature-item {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.dark-feature-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
.text-light-slate {
  color: #d0def5 !important;
}
/* Transparent Navbar Base */
.navbar-transparent {
  background-color: transparent !important;
  transition: background-color 0.3s ease, padding 0.3s ease;
  padding-top: 1.5rem;
}
/* Solid background state when user scrolls */
.navbar-scrolled {
  background-color: #050a15 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
.nav-link:hover {
  opacity: .8 !important;
}
/* Solid white background state when user scrolls */
.navbar-scrolled {
  background-color: #ffffff !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Ensure text and links turn dark when the background is white */
.navbar-scrolled .nav-link, .navbar-scrolled .navbar-brand {
  color: #1e293b !important; /* Navy/Dark text */
}
.navbar-scrolled .nav-link:hover {
  color: #6366f1 !important; /* Primary color on hover */
}
.text-white-75 {
  color: rgba(255, 255, 255, .75) !important
}
.btn-outline-primary {
  color: #015cc0 !important;
  border-color: #015cc0 !important;
  font-weight: 500 !important;
  border-width: 2px !important
}
.btn-outline-primary:hover, .btn-soft-primary:hover {
  color: #fff !important;
  background-color: #015cc0 !important;
  border-color: #015cc0 !important
}
.form-control {
  display: block;
  width: 100%;
  padding: .75rem .75rem !important
}
/* ==========================================
   INFINITE GRADIENT OUTLINE ANIMATION BUTTON
   ========================================== */
.ms-animated-outline-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--primary-purple, #4f46e5) !important;
  overflow: visible !important; /* Ensures pseudo-element border doesn't get clipped */
  transition: all 0.3s ease;
}
/* Gradient border wrapper with increased thickness via padding/offsets */
.ms-animated-outline-btn::before {
  content: '';
  position: absolute;
  /* Adjust these negative values to change border thickness (e.g., -3px for thicker border) */
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(60deg, #4f46e5, #9333ea, #ec4899, #4f46e5);
  background-size: 300% 300%;
  border-radius: 50rem; /* Matches rounded-pill */
  z-index: -1;
  animation: infiniteGradientBorder 4s ease infinite;
}
/* Solid background fill to keep the inner button clean and readable */
.ms-animated-outline-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff; /* Matches light theme background */
  border-radius: 50rem;
  z-index: -1;
  transition: background 0.3s ease;
}
/* Hover state: Fills background with solid gradient color and turns text white */
.ms-animated-outline-btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3) !important;
}
.ms-animated-outline-btn:hover::after {
  background: var(--primary-purple, #4f46e5);
}
/* Keyframes for smooth infinite border gradient rotation */
@keyframes infiniteGradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mobile-portfolio-accordion .accordion-button {
  padding-left: 0rem !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important
}

.accordion-button {
  padding-left: 1rem !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important
}
/* ==========================================
   PHONE NUMBER COLOR SWITCHING STYLING
   ========================================== */
/* 1. INITIAL TOP STATE (Dark/Transparent Hero view - Phone number WHITE) */
.ms-dark-header:not(.is-sticky) .ms-phone-link {
  color: #ffffff !important;
}
/* Agar phone icon ka color bhi white karna ho top par */
.ms-dark-header:not(.is-sticky) .ms-phone-link i {
  color: #38bdf8 !important; /* Cyan accent ya white rakh sakte hain */
}
/* 2. STICKY STATE (White background view - Phone number DARK) */
.ms-dark-header.is-sticky .ms-phone-link {
  color: #1e293b !important; /* Professional Dark Text */
}
.ms-dark-header.is-sticky .ms-phone-link i {
  color: var(--primary-purple, #4f46e5) !important; /* Original Primary Color */
}
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1370px !important;
  width: 100%;
}
.text-navy {
  color: #24262c !important
}
.z-9 {
  z-index: 9 !important
}




/* ==========================================
   SPLIT VIDEO (80/20) INTERACTIVE LAYOUT
   ========================================== */
.split-video-container {
    height: 450px; /* Lock overall height */
}

.video-panel {
    transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 5px;
    overflow: hidden;
}

/* 80% State */
.video-panel.expanded {
    flex: 4;
}

/* 20% State */
.video-panel.collapsed {
    flex: 1;
    cursor: pointer; /* Suggests it can be clicked */
}

.video-panel .video-wrapper {
    height: 100% !important; /* Force to panel bounds */
    min-height: 100% !important;
}

/* Hide UI Elements inside the 20% Mini Video */
.video-panel.collapsed .video-quote-overlay,
.video-panel.collapsed .video-quote-overlay-left {
    display: none !important;
}

.video-panel.expanded .maximize-btn {
    display: none !important;
}

.video-panel.collapsed .maximize-btn {
    width: 32px;
    height: 32px;
    padding: 0;
}

.video-panel.collapsed .maximize-btn i {
    font-size: 0.85rem;
}

/* Shrink Play Button slightly for the 20% Mini Video */
.video-panel.collapsed .custom-play-button button {
    width: 45px;
    height: 45px;
    font-size: 1rem;
}

/* Mobile responsive fallback: Stack them instead of 80/20 on small screens */
@media (max-width: 991.98px) {
    .split-video-container {
        height: auto;
        flex-direction: column;
    }
    .video-panel.expanded,
    .video-panel.collapsed {
        flex: none;
        height: 350px;
        width: 100%;
    }
    /* Hide the maximize button entirely on mobile */
    .maximize-btn {
        display: none !important; 
    }
	
	.meta-specs-matrix{border:none !important;
	        text-align: left !important;
        padding: 0 !important;}
}
/* ==========================================
   SUCCESS SLIDER BOTTOM NAV OVERRIDES
   ========================================== */
.custom-slick-dots .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.ms-vid-btn .slick-custom-arrow{ background-color: #fff !important; width:160px; height:60px; border-color:#015cc0!important; color:#015cc0}
.ms-vid-btn .slick-custom-arrow:hover{ background-color:#015cc0 !important; color:#fff}

/* ==========================================
   HEADER SPECIFIC (Mobile Sticky Only)
   ========================================== */
@media (max-width: 991.98px) {
    .sticky-mobile-only {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0;
        z-index: 1030 !important;
    }
	.w-75 {
    width: 100%!important;
}
	.w-85{width:100% !important}
}
@media (min-width: 992px) {
    .sticky-mobile-only {
        position: static !important;
    }
	
	
}

.w-85{width:85%}

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



/* ==========================================
   MOBILE STICKY BOTTOM BAR & MODAL
   ========================================== */
.mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1040; /* Navbar ke neeche, par page content ke upar */
}


@media (max-width: 991.98px) {
/*
    body {
        padding-bottom: 80px !important; 
    }
	
*/
	.industry-content-layer h5{font-size:18px}
	.mt-ms-1 {margin-top:10px}
	.ms-footer-sec{padding-bottom:70px!important;}
	.about-img img{max-height: 400px!important; object-fit: cover;}
	.ms-about-floating-card{top:0!important; bottom:auto	
	}
	.btn-50{width:50%}
}

/* Modal Form Focus outline override */
#leadCaptureForm .form-control:focus {
    background-color: #ffffff !important;
    border: 1px solid #0056d2 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 210, 0.1);
}

.about-img img{max-height: 900px; object-fit: cover;}
span{line-height:1.1!important}


/* ==========================================
   MOBILE ACTION LINK (FULL-WIDTH BUTTON)
   ========================================== */
@media (max-width: 767.98px) {
    .stage-card .action-link {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        background-color: #6366f1; /* Aapka purple/primary hex code yahan daalein */
        color: #ffffff !important;
        padding: 12px 24px;
        border-radius: 50px; /* Pill shape ke liye. Normal rectangle ke liye 8px kar dein */
        margin-top: 1.5rem !important;
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
        transition: background-color 0.3s ease;
    }

    .stage-card .action-link:hover {
        background-color: #4f46e5; /* Hover par thoda dark color */
        color: #ffffff !important;
    }

    /* Arrow icon ko thoda align karne ke liye */
    .stage-card .action-link i {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }
    
    .stage-card .action-link:hover i {
        transform: translateX(4px);
    }
}




/* ==========================================
   SMART ACCORDION/GRID RESPONSIVE LOGIC
   ========================================== */

/* Universal styles for the blue tick */
.mobile-check-icon {
    color: #4f46e5;
    background-color: #eef2ff;
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------
   MOBILE VIEW SPECIFICS (< 992px)
   ----------------------------------- */
@media (max-width: 991.98px) {
    .smart-accordion-card .card-header {
        transition: background-color 0.3s ease;
    }
    
    /* When accordion is OPEN on mobile */
    .smart-accordion-card .card-header[aria-expanded="true"] {
        background-color: #f8fafc !important; /* Light blue tint */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .smart-accordion-card .card-header[aria-expanded="true"] .mobile-chevron {
        background-color: #eef2ff !important;
    }
    
    /* Rotate chevron when open */
    .smart-accordion-card .card-header[aria-expanded="true"] .mobile-chevron i {
        transform: rotate(180deg);
    }
    
    .smart-accordion-card .mobile-chevron i {
        transition: transform 0.3s ease;
    }
}

/* -----------------------------------
   DESKTOP VIEW SPECIFICS (>= 992px)
   ----------------------------------- */
@media (min-width: 992px) {
    /* Disable click events on the header so cards don't act like accordions on desktop */
    .smart-accordion-card .card-header[data-bs-toggle="collapse"] {
        pointer-events: none;
        cursor: default;
    }
    
    /* Force body to be always open on desktop regardless of Bootstrap's JS state */
    .smart-accordion-card .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
    
    /* Style desktop buttons to look like normal links to match your original design */
    .smart-accordion-card .btn-primary-custom {
        background-color: transparent !important;
        color: #6366f1 !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .smart-accordion-card .btn-primary-custom:hover {
        color: #4f46e5 !important;
    }
}

/* Styling for the Mobile Accordion to match the attached image */
.custom-mobile-accordion .accordion-item {
    background: transparent;
}

.custom-mobile-accordion .accordion-button.custom-accordion-btn {
    background-color: rgba(255, 255, 255, 0.05); /* Semi-transparent glass look */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1.25rem;
}

/* Fix border radius when expanded */
.custom-mobile-accordion .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background-color: rgba(255, 255, 255, 0.08); /* Slightly lighter when open */
    color: #fff;
    box-shadow: none;
}

/* The accordion content body */
.custom-mobile-accordion .custom-accordion-body {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    padding: 1.25rem;
}

/* Style the icon circle to match the image */
.custom-mobile-accordion .mobile-icon-wrapper {
    width: 45px;
    height: 45px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    flex-shrink: 0;
}

/* Changes standard Bootstrap accordion arrow to white */
.custom-mobile-accordion .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ==========================================
   MOBILE PORTFOLIO ACCORDION
   ========================================== */

/* -----------------------------------
   DESKTOP VIEW SPECIFICS (>= 992px)
   ----------------------------------- */
@media (min-width: 992px) {
    .mobile-portfolio-accordion .accordion-item {
        border: none !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }
    .mobile-portfolio-accordion .accordion-button {
        padding: 0 !important;
        background: transparent !important;
        pointer-events: none; /* Disable click on desktop */
        box-shadow: none !important;
        margin-bottom: 0.5rem; /* Space between heading and content */
    }
    .mobile-portfolio-accordion .accordion-button::after {
        display: none !important; /* Hide chevron on desktop */
    }
    .mobile-portfolio-accordion .accordion-body {
        padding: 0 !important;
    }
    /* Keep collapse always visible on desktop, ignoring Bootstrap JS state */
    .mobile-portfolio-accordion .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* -----------------------------------
   MOBILE VIEW SPECIFICS (< 992px)
   ----------------------------------- */
@media (max-width: 991.98px) {
    .mobile-portfolio-accordion .accordion-item {
        border: none !important;
        background-color: #f8fafc;
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
        overflow: hidden;
    }
    .mobile-portfolio-accordion .accordion-button {
        background-color: #f8fafc;
        border: none;
        box-shadow: none;
        padding: 1rem 1.25rem;
        color: #1e293b;
        border-radius: 12px !important;
    }
    .mobile-portfolio-accordion .accordion-button:not(.collapsed) {
        background-color: #f8fafc;
        box-shadow: none;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .mobile-portfolio-accordion .accordion-body {
        padding: 0 ;
        background-color: #f8fafc;
    }
    
    /* Mobile Icon Box */
    .mobile-portfolio-accordion .acc-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 14px;
    }
    
    /* Mobile Chevron styling */
    .mobile-portfolio-accordion .accordion-button::after {
        background-color: #eef2ff;
        border-radius: 50%;
        padding: 14px;
        background-size: 16px;
        background-position: center;
    }
    
    /* Remove bottom margin inside accordion for tighter fit */
    .mobile-portfolio-accordion .meta-specs-matrix {
        margin-bottom: 0 !important; 
    }
}

.ms-list-none{list-style:none!important; padding-left:0!important}

/* ==========================================
   PORTFOLIO MOBILE VIEW OPTIMIZATIONS
   ========================================== */

/* 1. Store Download Buttons (50% Width & Centered) */
@media (max-width: 991.98px) {
    .store-download-row {
        display: flex;
        flex-wrap: nowrap !important; /* Items ko ek hi line me rakhega */
        justify-content: space-between;
        gap: 12px !important; /* Dono buttons ke beech ka gap */
    }
    
    .store-download-row .store-btn {
        flex: 0 0 calc(50% - 6px); /* 50% width minus gap */
        max-width: calc(50% - 6px);
        display: flex;
        justify-content: center;
    }
    
    .store-download-row .store-btn img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* 2. "View All Projects" Button (Full Width & Centered) */
@media (max-width: 767.98px) {
    /* Container se border aur padding hata kar full width karna */
    .controls-action-dock-group {
        width: 100%;
        border-left: none !important;
        border-start: none !important;
        padding-left: 0 !important;
    }
    
    /* Button ko 100% stretch karna aur content center karna */
    .unified-view-all-btn {
        width: 100%;
        justify-content: center !important;
        margin-left: 0 !important;
    }
    
    /* Right side wale arrow icon ki spacing theek karna taaki wo text ke sath centered lage */
    .unified-view-all-btn .ms-auto {
        margin-left: 10px !important; 
    }
}

/* ==========================================
   MOBILE INDEPENDENT SLIDE HEIGHT FIX
   ========================================== */
@media (max-width: 991.98px) {
    /* Flexbox stretching ko mobile par disable karna */
    .main-project-carousel .slick-track {
        display: block !important;
    }
    .main-project-carousel .slick-slide {
        height: auto !important;
        display: block !important;
    }
    .main-project-carousel .slick-slide > div {
        height: auto !important;
    }
    
    /* Jab accordion open/close ho toh height smooth tarike se change ho */
    .main-project-carousel .slick-list {
        transition: height 0.35s ease-in-out !important;
    }
}

/* ==========================================
   MOBILE FULL WIDTH CTA BUTTONS
   ========================================== */
@media (max-width: 575.98px) {
    .mobile-full-btn-group {
        width: 100% !important;
    }
    .mobile-full-btn-group .btn {
        width: 100% !important;
    }
}

/* ==========================================
   MOBILE 50-50 BUTTON GROUP
   ========================================== */
@media (max-width: 575.98px) {
    .mobile-half-btn-group {
        flex-direction: row !important; /* Mobile par column ko row mein badal dega */
        width: 100%;
        gap: 10px !important; /* Mobile par gap thoda kam kiya hai taaki buttons fit aayein */
    }
    
    .mobile-half-btn-group .btn {
        flex: 1; /* Dono buttons ko exactly 50% width dega */
        padding-left: 8px !important; /* Mobile padding adjustment */
        padding-right: 8px !important;
        font-size: 0.8rem !important; /* Text chhota kiya hai taaki 50% me aa jaye */
        gap: 5px !important; /* Icon aur text ke beech ki space thodi kam ki hai */
    }
}


/* ==========================================
   SUCCESS STORY MOBILE SLIDER FIXES & 50-50 BUTTONS
   ========================================== */

/* 50-50 Mobile Button Group Setup */
@media (max-width: 575.98px) {
    .mobile-half-btn-group {
        flex-direction: row !important;
        width: 100%;
        gap: 10px !important;
    }
    
    .mobile-half-btn-group .btn {
        flex: 1;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.8rem !important;
        gap: 5px !important;
    }
}

/* Mobile Slider Structural Fixes */
@media (max-width: 991.98px) {
    .success-mobile-slider.slick-initialized {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 25px;
    }
    
    .success-mobile-slider .slick-slide {
        margin: 0 10px; 
    }
    
    .success-mobile-slider .slick-list {
        margin: 0 -10px;
    }
    
    .success-mobile-slider .slick-dots {
        bottom: -15px;
    }
}


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

/* ==========================================
   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; 
}
.cyber-faq-section .custom-faq-accordion .accordion-item {
    border-color: #edecf7 !important;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.cyber-faq-section .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;
}

/* ==========================================
   THE RESULT FLOW SECTION
   ========================================== */

.result-flow-wrapper {
    background-color: #f4f7fc; /* Match image light bluish-gray background */
    border: 1px solid #eef2f9;
}

.result-flow-card {
    min-width: 225px; /* Ensures all cards have equal width on desktop */
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-flow-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 92, 230, 0.08) !important;
}

.result-icon-box {
    width: 48px;
    height: 48px;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .result-flow-card {
        width: 100%;
        justify-content: flex-start;
        padding-left: 1.5rem !important;
    }
}


.btn-primary{ background-color:#015cc0!important}

.text-primary{color:#015cc0!important}

/* ==========================================================================
   STICKY STACKING CARDS EFFECT (BOTTOM TO TOP SCROLL)
   ========================================================================== */

@media (min-width: 992px) {
  .sticky-stack-container {
    position: relative;
    /* Extra padding bottom taaki stacking cards smoothly settle ho sakein */
    padding-bottom: 30px;
	  paadding-top:0px;
  }

  .sticky-stack-card {
    position: sticky !important;
    z-index: 2;
    transition: transform 0.3s ease;
  }

  /* Har next card thoda aur staggered offset par sticky hoga */
  .sticky-stack-card:nth-child(1) { top: 90px; z-index: 1; }
  .sticky-stack-card:nth-child(2) { top: 110px; z-index: 2; }
  .sticky-stack-card:nth-child(3) { top: 130px; z-index: 3; }
  .sticky-stack-card:nth-child(4) { top: 150px; z-index: 4; }
}

/* Mobile responsive fallback */
@media (max-width: 991.98px) {
  .sticky-stack-card {
    position: relative !important;
    top: auto !important;
  }
}
/* ==========================================================================
   STICKY STACKING CARDS EFFECT (BOTTOM TO TOP SCROLL)
   ========================================================================== */

@media (min-width: 992px) {
  .sticky-stack-container {
    position: relative;
    padding-bottom: 30px;
    padding-top: 0px;
  }

  .sticky-stack-card {
    position: sticky !important;
    z-index: 2;
    transition: transform 0.3s ease;
  }

  /* Staggered sticky top offsets for each card */
  .sticky-stack-card:nth-child(1) { top: 90px; z-index: 1; }
  .sticky-stack-card:nth-child(2) { top: 110px; z-index: 2; }
  .sticky-stack-card:nth-child(3) { top: 130px; z-index: 3; }
  .sticky-stack-card:nth-child(4) { top: 150px; z-index: 4; }
}

/* Mobile responsive fallback */
@media (max-width: 991.98px) {
  .sticky-stack-card {
    position: relative !important;
    top: auto !important;
  }
}

.mockup-nav-btn {
  width: 42px;
  height: 42px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mockup-nav-btn:hover {
  background-color: #f8fafc !important;
  transform: translateY(-50%) scale(1.05);
}


/* ==========================================================================
   STICKY STACKING CARDS EFFECT & ZOOM BUTTON ENHANCEMENT
   ========================================================================== */

@media (min-width: 992px) {
  .sticky-stack-container {
    position: relative;
    padding-bottom: 30px;
    padding-top: 0px;
  }

  .sticky-stack-card {
    position: sticky !important;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Staggered sticky offsets for each card */
  .sticky-stack-card:nth-child(1) { top: 20px; z-index: 1; }
  .sticky-stack-card:nth-child(2) { top: 20px; z-index: 2; }
  .sticky-stack-card:nth-child(3) { top: 20px; z-index: 3; }
  .sticky-stack-card:nth-child(4) { top: 20px; z-index: 4; }
}

/* Zoom Button Hover Animation */
.portfolio-zoom-trigger {
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.portfolio-zoom-trigger:hover {
  transform: scale(1.08);
  background-color: #005ce6 !important;
  color: #ffffff !important;
}

/* Mobile responsive fallback */
@media (max-width: 991.98px) {
  .sticky-stack-card {
    position: relative !important;
    top: auto !important;
  }
}


/* ==========================================================================
   MOBILE VIEW HORIZONTAL SWIPE / SLIDER FIX (NO STICKY)
   ========================================================================== */
@media (max-width: 991.98px) {
  .sticky-stack-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    /* Hide scrollbar for clean UI */
    scrollbar-width: none; 
  }
  .sticky-stack-container::-webkit-scrollbar {
    display: none;
  }

  .sticky-stack-card {
    position: relative !important;
    top: auto !important;
    flex: 0 0 100% !important; /* Ek baar mein ek card full width dikhega */
    scroll-snap-align: center;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .sticky-stack-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  
  .sticky-stack-card {
    position: relative !important;
    top: auto !important;
    flex: 0 0 100% !important;
    scroll-snap-align: center;
  }
	
	.border-sm-1{border:1px solid #dee2e6}

}



/* ==========================================================================
   SERVICES RESPONSIVE ACCORDION / GRID ADAPTER
   ========================================================================== */

@media (min-width: 992px) {
  /* Desktop par accordion container ko 4-column CSS Grid bana diya */
  .custom-serv-accordion {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* Desktop par har item card jaisa dikhega aur collapse hamesha open rahega */
  .custom-serv-accordion .accordion-item {
    border: 1px solid #dee2e6 !important;
    border-radius: 1rem !important;
    background-color: #fff !important;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Desktop par accordion button ka toggle arrow aur click pointer hata diya */
  .custom-serv-accordion .accordion-button {
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
  }

  .custom-serv-accordion .accordion-button::after {
    display: none !important;
  }

  /* Desktop par collapse ko hamesha visible rakha */
  .custom-serv-accordion .accordion-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .custom-serv-accordion .accordion-body {
    flex-grow: 1;
  }
}


/* ==========================================================================
   AI IMPACT CARDS RESPONSIVE ACCORDION ADAPTER
   ========================================================================== */

@media (min-width: 992px) {
  /* Desktop par accordion item ko normal card ki tarah dikhana */
  .custom-impact-accordion .accordion-item {
    border: 1px solid #dee2e6 !important;
    border-radius: 1rem !important;
    background-color: #fff !important;
  }

  /* Desktop par accordion button ka toggle arrow aur pointer disable karna */
  .custom-impact-accordion .accordion-button {
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
  }

  .custom-impact-accordion .accordion-button::after {
    display: none !important;
  }

  /* Desktop par content hamesha open/visible rahega */
  .custom-impact-accordion .accordion-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}



/* ==========================================================================
   BUTTER-SMOOTH CUSTOM ACCORDION FIX
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-accordion-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .accordion-item.open .custom-accordion-body-wrapper {
    max-height: 300px; /* Content ki maximum height se zyada honi chahiye */
    opacity: 1;
  }
  
  .accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-accordion-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
}

/* ==========================================================================
   SMOOTH ACCORDION ROTATING ARROW ANIMATION
   ========================================================================== */

@media (max-width: 991.98px) {
  .accordion-arrow-icon i {
    transition: transform 0.3s ease;
  }
  
  /* Jab card open hoga tab arrow 180 degree rotate hokar up-arrow ban jayega */
  .accordion-item.open .accordion-arrow-icon i {
    transform: rotate(180deg);
  }
}

@media (min-width: 992px) {
  .accordion-arrow-icon {
    display: none !important;
  }
}



/* ==========================================================================
   WHY AI SECTION SMOOTH ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-why-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .why-grid-card.accordion-item.open .custom-why-body-wrapper {
    max-height: 250px;
    opacity: 1;
  }

  .accordion-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .why-grid-card.accordion-item.open .accordion-arrow-icon i {
    transform: rotate(180deg);
  }

  .accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-why-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }
  .accordion-arrow-icon {
    display: none !important;
  }
}



/* ==========================================================================
   WHY FEAT SECTION SMOOTH ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-feat-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .why-feat-card.accordion-item.open .custom-feat-body-wrapper {
    max-height: 250px;
    opacity: 1;
  }

  .accordion-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .why-feat-card.accordion-item.open .accordion-arrow-icon i {
    transform: rotate(180deg);
  }

  .accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-feat-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }
  .accordion-arrow-icon {
    display: none !important;
  }
}


/* ==========================================================================
   CYBER SLIDER & NAVIGATION ARROWS CSS
   ========================================================================== */

@media (max-width: 991.98px) {
  #cyberSliderContainer .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #cyberSliderContainer .row::-webkit-scrollbar {
    display: none;
  }

  #cyberSliderContainer .slider-card-item {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center;
  }
}

@media (min-width: 992px) {
  #cyberSliderContainer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  #cyberSliderContainer .slider-card-item {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }

  #cyberSliderContainer .slider-nav-btn {
    display: none !important;
  }
}

/* ==========================================================================
   CYBER SERVICES DETAILED ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .cyber-accordion-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .cyber-accordion-item.open .cyber-accordion-body-wrapper {
    max-height: 1200px; /* Saare content ko accommodate karne ke liye ample height */
    opacity: 1;
    margin-top: 1.5rem;
  }

  .cyber-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .cyber-accordion-item.open .cyber-arrow-icon i {
    transform: rotate(180deg);
  }

  .cyber-accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .cyber-accordion-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }
  .cyber-arrow-icon {
    display: none !important;
  }
}


/* ==========================================================================
   CYBER ACCORDION DESKTOP BORDER & BG CLEANUP FIX
   ========================================================================== */

@media (min-width: 992px) {
  /* Desktop par card ki background transparent aur border bilkul khatam ho jayega */
  .cyber-services-detailed .cyber-accordion-item {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   MANAGED IT CARDS SMOOTH ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-managed-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .managed-accordion-item.open .custom-managed-body-wrapper {
    max-height: 450px; /* Ample height for details */
    opacity: 1;
  }

  .managed-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .managed-accordion-item.open .managed-arrow-icon i {
    transform: rotate(180deg);
  }

  .managed-accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-managed-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }
  .managed-arrow-icon {
    display: none !important;
  }
}


/* ==========================================================================
   PENETRATION TESTING CARDS SMOOTH ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-pt-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }

  .pt-accordion-item.open .custom-pt-body-wrapper {
    max-height: 450px;
    opacity: 1;
  }

  .pt-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .pt-accordion-item.open .pt-arrow-icon i {
    transform: rotate(180deg);
  }

  .pt-accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-pt-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
  }
  .pt-arrow-icon {
    display: none !important;
  }
}

/* ==========================================================================
   STAY CARDS SMOOTH ACCORDION ADAPTER
   ========================================================================== */

@media (max-width: 991.98px) {
  .custom-stay-body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
  }
	.sm-text-center{text-align:center!important}
	
	.py-5 {    padding-top: 2rem !important;
    padding-bottom: 2rem !important;}
  .stay-accordion-item.open .custom-stay-body-wrapper {
    max-height: 250px;
    opacity: 1;
  }

  .stay-arrow-icon i {
    transition: transform 0.3s ease;
  }

  .stay-accordion-item.open .stay-arrow-icon i {
    transform: rotate(180deg);
  }

  .stay-accordion-header {
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .custom-stay-body-wrapper {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }
  .stay-arrow-icon {
    display: none !important;
  }
}

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




.lh-sm {
    line-height: 1.35 !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 */
}