/* Fix mobile toggled sidebar menu cutoff on header/sticky headers */
header.header-area,
header.style-2,
.header-area,
header.header-area .container-fluid,
header.style-2 .container-fluid {
  overflow: visible !important;
}

@media (max-width: 991px) {
  header.style-2 .main-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    background: var(--dark-white-color) !important;
  }

  header.style-2 .main-menu > ul > li {
    padding: 0px 0px !important;
    margin: 0 !important;
  }

  header.style-2 .main-menu > ul > li > a {
    padding: 10px 0 !important;
    font-size: 16px !important;
  }

  header.style-2 .mobile-logo-area {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--borders-color) !important;
  }

  header.style-2 .mobile-logo-area img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
}

/* --- 1. Global Section Spacing & Uniform Layout --- */
.home2-banner-image-section,
.home2-about-section,
.vs-page-wrapper,
.vs-process-section-wrapper.mig-process,
.home1-service-section.newchange,
.home2-service-section.mig-sa,
.home2-portfolio-section,
.home5-process-section.process-steps,
.service-dt-why-choose-section,
.home6-contact-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  box-sizing: border-box;
}

/* Pain Points Section Header global override */
.vs-header-section {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 40px !important;
}

/* Hero section spacing to offset sticky header */
.home2-banner-section {
  padding-top: 190px !important;
  padding-bottom: 90px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* --- 2. Global Uniform Typography System (Desktop & Big Screens) --- */
/* Standalone headings/titles across sections */
h2.htx,
h2.headline,
.vs-main-heading,
.portfolio-grid-page-title-area h1,
.home2-portfolio-section .section-title h2,
.home5-process-section .section-title h2,
.home6-contact-section .contact-content h2 {
  font-size: 38px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #0f172a !important; /* Slate 900 */
}

/* Standalone subtitles / Eyebrows */
.vs-header-eyebrow,
.why-migarch-eyebrow,
.indicator-pill,
.home2-portfolio-section .section-title span:first-child,
.home5-process-section .section-title > span:first-child,
.home1-service-section.newchange .section-title > span:first-child {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #1573e5 !important; /* Migarch Blue */
  margin-bottom: 15px !important;
  display: inline-block !important;
}

.home1-service-section.newchange .section-title > span:first-child {
  color: #fff !important;
}

/* Card titles / subsub-headings */
.vs-card-title,
.vs-process-step-title,
.single-service .title-tag h2 a,
.service-dt-why-choose-card .content h3,
.portfolio-card2 .title-area h2 a {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* Descriptions / body / paragraphs */
.vs-header-right p,
.vs-card-description,
.mp-txt p,
.vs-process-step-list li,
.home1-service-section.newchange .single-service .services-btm p,
.home2-service-section.mig-sa .left .footer-note p,
.portfolio-card2 .title-area p,
.service-dt-why-choose-section .title-content-wrap p,
.service-dt-why-choose-card .content p,
.home6-contact-section .contact-content p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #475569 !important; /* Slate 600 */
}

/* Custom large intro description in about section */
.home2-about-section .about-content h2.htx {
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

/* --- Process Steps (How We Work) Global & Desktop Overrides --- */
.home5-process-section .process-wrapper .process-list .single-process h3 {
  margin-bottom: 15px !important;
}
.home5-process-section .process-wrapper .process-list .single-process .icon {
  margin-bottom: 15px !important;
}
.home5-process-section .process-wrapper .process-list .single-process p {
  max-width: 100% !important;
}

@media (min-width: 1200px) {
  .home5-process-section .process-wrapper .process-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
  .home5-process-section .process-wrapper .process-list .single-process {
    border: 1px solid var(--borders-color) !important;
    border-radius: 12px !important;
    padding: 35px 25px !important;
  }
}

/* Hero Section Headline sizing */
/* .home2-banner-section .banner-content-wrap .title-area h1 {
  font-size: 80px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
} */

.home2-portfolio-section .portfolio-card2 .title-area p,
.service-dt-why-choose-section .service-dt-why-choose-card .content p,
.service-dt-why-choose-section .title-content-wrap p {
  color: #f4f4f4 !important;
}

/* ==========================================================================
   BREAKPOINTS & RESPONSIVE LAYOUT OVERRIDES
   ========================================================================== */

/* --- Notebooks & Tablet Landscape (992px - 1199px) --- */
@media (max-width: 1199px) {
  .home2-banner-section .banner-content-wrap .title-area h1 {
    font-size: 58px !important;
  }

  h2.htx,
  h2.headline,
  .vs-main-heading,
  .portfolio-grid-page-title-area h1,
  .home2-portfolio-section .section-title h2,
  .home5-process-section .section-title h2,
  .home6-contact-section .contact-content h2 {
    font-size: 32px !important;
  }

  /* Category Labels hide on tablet landscape */
  .vs-category-labels {
    display: none !important;
  }

  /* Portfolio cards stack on tablet landscape */
  .home2-portfolio-section .portfolio-wrapper {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .home2-portfolio-section .portfolio-wrapper .portfolio-card2 {
    width: 100% !important;
    height: 420px !important;
    flex: none !important;
  }

  /* Why Choose Us cards on tablet landscape */
  .service-dt-why-choose-card-area .row {
    gap: 0 !important;
    row-gap: 30px !important;
  }
  .service-dt-why-choose-card-area .col-lg-5 {
    width: 50% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .service-dt-why-choose-card-area .pt-150 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* What We Do images side-by-side on tablet landscape */
  .home1-service-section.newchange
    .service-list
    .single-service
    .services-btm
    .paragraph-img
    .service-img {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
  }
  .home1-service-section.newchange
    .service-list
    .single-service
    .services-btm
    .paragraph-img
    .service-img
    img {
    width: calc(50% - 8px) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* How We Work 2x2 grid on tablet landscape */
  .home5-process-section .container.one.mb-70 {
    margin-bottom: 40px !important;
  }
  .home5-process-section .process-wrapper .process-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .home5-process-section .process-wrapper .process-list .single-process {
    border: 1px solid var(--borders-color) !important;
    border-radius: 12px !important;
    padding: 30px 22px !important;
  }
}

/* ==========================================================================
   ONLY & ONLY TABLET LANDSCAPE: .vs-layout-wrapper 1 ROW 2 COL FIX
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 992px) and (max-width: 1199px) {
  .vs-layout-wrapper {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .vs-category-labels {
    display: flex !important;
    flex-direction: column !important;
  }

  .vs-category-label {
    font-size: 11px !important;
    padding: 15px 0 !important;
    border-right: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  }

  .vs-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    border-left: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    width: 100% !important;
  }

  .vs-service-card {
    border-right: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
  }

  .vs-service-card:nth-child(2n) {
    border-right: none !important;
  }

  .vs-service-card:nth-last-child(1),
  .vs-service-card:nth-last-child(2) {
    border-bottom: none !important;
  }

  /* Tablet Landscape Only: .service-dt-why-choose-card-area .row Center Align */
  .service-dt-why-choose-card-area .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    row-gap: 30px !important;
    --bs-gutter-y: 0 !important;
  }

  .service-dt-why-choose-card-area .col-lg-5,
  .service-dt-why-choose-card-area .col-md-6 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .service-dt-why-choose-card-area .pt-150 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .service-dt-why-choose-section .service-dt-why-choose-card,
  .service-dt-why-choose-card {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* --- Landscape/Portrait Tablets & Small Notebooks (768px - 991px) --- */
@media (max-width: 991px) {
  /* Section Spacing scaling */
  .home2-banner-image-section,
  .home2-about-section,
  .vs-page-wrapper,
  .vs-process-section-wrapper.mig-process,
  .home1-service-section.newchange,
  .home2-service-section.mig-sa,
  .home2-portfolio-section,
  .home5-process-section.process-steps,
  .service-dt-why-choose-section,
  .home6-contact-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .home2-banner-section {
    padding-top: 150px !important;
    padding-bottom: 60px !important;
  }

  /* Typography scaling */
  .home2-banner-section .banner-content-wrap .title-area h1 {
    font-size: 48px !important;
  }

  h2.htx,
  h2.headline,
  .vs-main-heading,
  .portfolio-grid-page-title-area h1,
  .home2-portfolio-section .section-title h2,
  .home5-process-section .section-title h2,
  .home6-contact-section .contact-content h2 {
    font-size: 28px !important;
  }

  .home2-about-section .about-content h2.htx {
    font-size: 21px !important;
  }

  .vs-card-title,
  .vs-process-step-title,
  .single-service .title-tag h2 a,
  .service-dt-why-choose-card .content h3,
  .portfolio-card2 .title-area h2 a {
    font-size: 19px !important;
  }

  /* Pain Points Grid */
  .vs-layout-wrapper {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  .vs-category-labels {
    display: none !important;
  }
  .vs-card-grid {
    grid-template-columns: 1fr !important;
    border-left: none !important;
  }
  .vs-service-card {
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--borders-color) !important;
    padding: 30px 0 !important;
  }
  .vs-service-card:last-child {
    border-bottom: none !important;
  }
  .vs-card-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
  }
  .vs-card-title strong {
    display: inline !important;
    margin-left: 6px !important;
  }
  .vs-header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 30px !important;
  }
  .vs-header-right {
    text-align: left;
  }
  .vs-header-right p {
    max-width: 100% !important;
  }

  /* Process Curve Map (Digital Solutions) 1 Row 3 Col Tablet Layout */
  .mig-process {
    height: auto !important;
    padding: 70px 0 !important;
  }
  .mig-process .container {
    position: relative !important;
  }
  .mig-process .mp-steps {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 30px 0 !important;
  }
  .mig-process .mp-txt {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 25px !important;
    text-align: center !important;
  }
  .mig-process .mp-txt h2.htx {
    margin-bottom: 12px !important;
  }
  .mig-process .mp-txt p.dsx {
    max-width: 720px !important;
    margin: 0 auto !important;
  }
  .mig-process .vs-process-curve-overlay,
  .mig-process .vs-process-ghost-number {
    display: none !important;
  }
  .mig-process .vs-process-step-item {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: calc(33.333% - 15px) !important;
    flex: 0 0 calc(33.333% - 15px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: flex-start !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 24px 18px !important;
  }
  .mig-process .vs-process-icon-box {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mig-process .vs-process-icon-box i {
    font-size: 24px !important;
  }
  .mig-process .vs-process-step-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .mig-process .vs-process-step-list li {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Domain Understanding Section - Left & Right on Tablet */
  .home2-service-section.mig-sa .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
  }
  .home2-service-section.mig-sa .container .left {
    width: 50% !important;
    max-width: 50% !important;
    gap: 20px !important;
  }
  .home2-service-section.mig-sa .container .right {
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .mig-sa .left h2.headline {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .mig-sa .cta-btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    gap: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
  }
  .mig-sa .cta-btn .arrow-circle {
    width: 28px !important;
    height: 28px !important;
  }
  .mig-sa .right .card-wrapper {
    width: 100% !important;
    padding: 25px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .mig-sa .right .card-wrapper .card {
    width: 100% !important;
    max-width: 350px !important;
    min-height: auto !important;
    padding: 24px 20px !important;
  }
  .portfolio-card2 .porfolio-img {
    height: 100% !important;
  }
  .home2-portfolio-section {
    padding-bottom: 0px !important;
  }

  /* Selected Work Panels */
  .home2-portfolio-section .portfolio-wrapper {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .home2-portfolio-section .portfolio-wrapper .portfolio-card2 {
    width: 100% !important;
    height: 450px !important;
    flex: none !important;
  }

  /* Why Choose Us Section Grid */
  .service-dt-why-choose-card-area .row {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  .service-dt-why-choose-card-area .col-lg-5 {
    width: 50% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .service-dt-why-choose-card-area .pt-150 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* What We Do Section Images Reflow */
  .home1-service-section.newchange
    .service-list
    .single-service
    .services-btm
    .paragraph-img
    .service-img {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
  }
  .home1-service-section.newchange
    .service-list
    .single-service
    .services-btm
    .paragraph-img
    .service-img
    img {
    width: calc(50% - 8px) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* How We Work Section Reflow */
  .home5-process-section .container.one.mb-70 {
    margin-bottom: 40px !important;
  }
  .home5-process-section .process-wrapper .process-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .home5-process-section .process-wrapper .process-list .single-process {
    border: 1px solid var(--borders-color) !important;
    border-radius: 12px !important;
    padding: 30px 22px !important;
  }
  .service-dt-why-choose-card-area .row {
    gap: 25px !important;
    padding: 0px 25px !important;
  }
  .service-dt-why-choose-card-area .col-lg-5 {
    padding: 0px !important;
    width: calc(50% - 15px) !important;
  }
  .home6-contact-section .contact-wrapper {
    justify-content: center !important;
  }
  .mcl-li .single-partner {
    width: calc(33.33% - 15px) !important;
  }
  .home6-contact-section .contact-wrapper .contact-content div {
    text-align: center !important;
  }
}

/* --- Mobile / iOS & Handheld Devices (<= 767px) --- */
@media (max-width: 767px) {
  /* Section Spacing scaling */
  .home2-banner-image-section,
  .home2-about-section,
  .vs-page-wrapper,
  .vs-process-section-wrapper.mig-process,
  .home1-service-section.newchange,
  .home2-service-section.mig-sa,
  .home2-portfolio-section,
  .home5-process-section.process-steps,
  .service-dt-why-choose-section,
  .home6-contact-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .home2-banner-section {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }

  /* Typography scaling */
  .home2-banner-section .banner-content-wrap .title-area h1 {
    font-size: 32px !important;
  }

  .home2-banner-section
    .banner-content-wrap
    .title-area
    h1
    .banner-video-wrap
    .banner-video {
    width: 90px !important;
    height: 35px !important;
  }

  h2.htx,
  h2.headline,
  .vs-main-heading,
  .portfolio-grid-page-title-area h1,
  .home2-portfolio-section .section-title h2,
  .home5-process-section .section-title h2,
  .home6-contact-section .contact-content h2 {
    font-size: 24px !important;
  }

  .home2-about-section .about-content h2.htx {
    font-size: 18px !important;
  }

  .vs-card-title {
    font-size: 20px !important;
  }

  .vs-process-step-title,
  .single-service .title-tag h2 a,
  .service-dt-why-choose-card .content h3,
  .portfolio-card2 .title-area h2 a {
    font-size: 18px !important;
  }

  /* Process Steps Map Mobile Stack (1 Row 1 Col Full 100%) */
  .mig-process {
    padding: 50px 15px !important;
  }
  .mig-process .mp-steps {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }
  .mig-process .vs-process-step-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    padding: 0px !important;
  }
  .mig-process .vs-process-icon-box {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }
  .mig-process .vs-process-icon-box i {
    font-size: 20px !important;
  }

  /* How We Work Section Mobile Stack */
  .home5-process-section .container.one.mb-70 {
    margin-bottom: 25px !important;
  }
  .home5-process-section .process-wrapper .process-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .home5-process-section .process-wrapper .process-list .single-process {
    border: 1px solid var(--borders-color) !important;
    border-radius: 12px !important;
    padding: 24px 18px !important;
  }

  /* What We Do / Accordion Stack */
  .home1-service-section.newchange .service-list .single-service {
    padding: 30px 20px !important;
  }
  .home1-service-section.newchange .service-list .single-service .services-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }

  /* Selected Work Panels Stack */
  .home2-portfolio-section .portfolio-wrapper .portfolio-card2 {
    height: 380px !important;
  }
  .home2-portfolio-section
    .portfolio-wrapper
    .portfolio-card2
    .portfolio-content-wrap {
    padding: 24px 20px !important;
  }

  /* Why Choose Us Grid */
  .service-dt-why-choose-card-area .col-lg-5 {
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .service-dt-why-choose-card-area .pt-150 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Let's Work Together Call to Action */
  .home6-contact-section .contact-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }
  .home6-contact-section .contact-content h2 {
    font-size: 32px !important;
  }

  header.style-2 .main-menu .menu-list {
    padding-top: 0px !important;
  }
  .home2-about-section .about-content .section-title,
  .vs-card-description,
  .vs-header-eyebrow,
  .vs-main-heading {
    margin-bottom: 0px !important;
  }
  .portfolio-grid-page .portfolio-grid-page-title-area h1 {
    margin-bottom: 15px !important;
  }
  .portfolio-card2 .porfolio-img {
    height: 100% !important;
  }

  /* Domain Understanding Mobile Overrides */
  .home2-service-section.mig-sa .container {
    flex-direction: column !important;
    gap: 30px !important;
  }
  .home2-service-section.mig-sa .container .left,
  .home2-service-section.mig-sa .container .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mig-sa .left h2.headline br {
    display: none !important;
  }
  .mig-sa .left h2.headline {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .mig-sa .right .card-wrapper {
    width: 100% !important;
    padding: 10px !important;
    justify-content: center !important;
  }
  .mig-sa .right .card-wrapper .card {
    width: 100% !important;
    max-width: 380px !important;
  }
  .home2-portfolio-section {
    padding-bottom: 0px !important;
  }
}

@media (max-width: 576px) {
  .home1-service-section.newchange
    .service-list
    .single-service
    .services-btm
    .paragraph-img
    .service-img
    img {
    width: 100% !important;
  }
}

/* Selected Work Content Wrap Responsive Widths */
@media (min-width: 992px) {
  .portfolio-card2 .portfolio-content-wrap {
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 991px) {
  .portfolio-card2 .portfolio-content-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE SUITE FOR ALL INNER PHP PAGES
   (Targeting Notebooks, iPads, Tablets, Foldable & Small Devices)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MAC / NOTEBOOK / TABLET LANDSCAPE (992px to 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Page Titles & Banners */
  .portfolio-grid-page,
  .portfolio-dt-banner-section,
  .services-details-banner-section,
  .page-banner-section {
    padding-top: 140px !important;
    padding-bottom: 60px !important;
  }

  .portfolio-grid-page-title-area h1,
  .portfolio-dt-page-title-area h1,
  .services-details-banner-title h1 {
    font-size: 44px !important;
    line-height: 1.2 !important;
  }

  /* Projects & Products Filter Bar */
  .portfolio-grid-page-top {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }

  .portfolio-tag-list {
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    padding-bottom: 8px !important;
  }

  /* Product & Project Details Meta Bar */
  .portfolio-dt-meta-area {
    padding: 25px 30px !important;
  }
  .portfolio-dt-meta {
    gap: 20px !important;
    font-size: 15px !important;
  }

  /* Contact Page Grid */
  .contact-page-wrapper .row {
    row-gap: 40px !important;
  }
}

/* --------------------------------------------------------------------------
   2. TABLET PORTRAIT & IPAD (768px to 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* General Section Spacing */
  .portfolio-grid-page,
  .portfolio-dt-banner-section,
  .services-details-banner-section,
  .page-banner-section,
  .portfolio-dt-info-section,
  .portfolio-dt-gallery2-section,
  .challenges-section {
    padding-top: 110px !important;
    padding-bottom: 50px !important;
    margin-bottom: 60px !important;
  }

  /* Titles & Headings */
  .portfolio-grid-page-title-area h1,
  .portfolio-dt-page-title-area h1,
  .services-details-banner-title h1 {
    font-size: 34px !important;
    line-height: 1.25 !important;
  }

  .title-area h2,
  .section-title h2 {
    font-size: 28px !important;
  }

  /* Product & Project Cards Grid */
  .portfolio-tab-wrap .row {
    row-gap: 40px !important;
  }

  .portfolio-card.style-2 .portfolio-img img {
    max-height: 320px !important;
    object-fit: cover !important;
  }

  /* Stacking Sections Override for Mobile/Tablet */
  .sw-caps-section,
  .stack-process-section {
    height: auto !important;
    padding-bottom: 60px !important;
  }

  .sw-caps-container,
  .stack-process-container {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .sw-caps-left,
  .stack-process-left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .sw-caps-right,
  .stack-process-right {
    width: 100% !important;
    gap: 25px !important;
    padding-bottom: 0 !important;
  }

  .sw-caps-card,
  .stack-process-card {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  /* Product Details Meta Area */
  .portfolio-dt-meta-area {
    padding: 20px !important;
  }

  .portfolio-dt-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Statistics Cards Grid */
  .product-stat-card {
    min-height: 140px !important;
    padding: 20px !important;
  }

  .product-stat-card .stat-value {
    font-size: 2.2rem !important;
  }

  /* Article / Product Looping Navigation */
  .medium-article-nav {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 15px !important;
  }

  .medium-article-nav .nav-title {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. MOBILE & SMALL DEVICES (Up to 767px and 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Page Titles & Headers */
  .portfolio-grid-page,
  .portfolio-dt-banner-section,
  .services-details-banner-section,
  .page-banner-section {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  .portfolio-grid-page-title-area h1,
  .portfolio-dt-page-title-area h1,
  .services-details-banner-title h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  .portfolio-grid-page-title-area p,
  .portfolio-dt-page-title-area p {
    font-size: 14px !important;
  }

  /* Filter Tag Scroll Bar */
  .portfolio-grid-page-top {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .portfolio-tag-list {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .portfolio-tag-list li.single-item {
    font-size: 13px !important;
    padding: 6px 14px !important;
  }

  /* Product & Project Cards Mobile Only - Hide Canvas & Show Img Height Auto Cover */
  .portfolio-card.style-2 .portfolio-img canvas,
  .portfolio-card.style-2 .shape-hover-img canvas,
  .portfolio-card .portfolio-img canvas {
    display: none !important;
  }

  .portfolio-card.style-2 .portfolio-img img,
  .portfolio-card.style-2 .shape-hover-img img,
  .portfolio-card .portfolio-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .portfolio-card.style-2 .portfolio-content-wrap {
    padding: 15px 0 0 0 !important;
  }

  .portfolio-card.style-2 .portfolio-content h3 {
    font-size: 18px !important;
  }

  /* Mobile Only: .portfolio-tab-wrap .row Remove Gap Make It 0 */
  .portfolio-tab-wrap .row {
    gap: 25px !important;
    row-gap: 25px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }
  .portfolio-tab-wrap .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Main Featured Banner Image */
  .pd-main-img img {
    height: 220px !important;
  }

  /* Gallery Screenshots Container */
  .portfolio-dt-gallery2-section .row {
    row-gap: 20px !important;
  }

  .portfolio-dt-gallery2-section .portfolio-gallery-img img {
    border-radius: 12px !important;
  }

  /* Article Footer Nav */
  .medium-article-nav {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .medium-article-nav .nav-item {
    width: 100% !important;
  }

  /* Contact Us Page Form */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    padding: 14px 16px !important;
  }

  /* Mobile Only: Client Logo Section 1 Row 2 Logos, Compact Padding & Equal Heights */
  .home3-partner-section.mig-clients,
  .mig-clients {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .mcl-li .partner-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mcl-li .single-partner {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }
  .mcl-li .single-partner img {
    /* max-height: 40px !important; */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}

@media only screen and (max-width: 767px) {
  /* Software Development Hero Section Mobile Responsive Fix */
  .software-hero-section {
    min-height: auto !important;
    padding-top: 100px !important;
    /* padding-bottom: 30px !important; */
  }

  .software-hero-container {
    margin: 0 auto !important;
    padding: 0 20px !important;
    flex-direction: column !important;
    text-align: center !important;
    position: relative !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .software-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    text-align: center !important;
  }

  .software-hero-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  .software-hero-title strong {
    font-size: 28px !important;
    display: block !important;
    margin-top: 6px !important;
  }

  .software-hero-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 auto 25px auto !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .software-hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    justify-content: center !important;
  }

  .software-hero-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
    text-align: center !important;
    display: block !important;
  }

  .software-hero-image-wrapper {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
    display: flex !important;
  }

  .software-hero-image-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Software Capabilities Section (.sw-caps-right) Mobile Responsive Fix */
  .sw-caps-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    height: auto !important;
  }

  .sw-caps-container {
    flex-direction: column !important;
    gap: 30px !important;
    /* padding: 0 15px !important; */
  }

  .sw-caps-left {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }

  .sw-caps-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding-bottom: 0 !important;
  }

  .sw-caps-card {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0px !important;
  }

  .sw-caps-card-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  .sw-caps-number {
    font-size: 24px !important;
  }

  .sw-caps-content {
    width: 100% !important;
  }

  .sw-caps-content h3 {
    font-size: 18px !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
  }

  .sw-caps-content p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .sw-caps-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-top: 10px !important;
  }

  .sw-caps-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .services__card-content,
  article.services__card.no-bg,
  .services__card.no-bg,
  .services__card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* How We Work (Steps Section) Mobile Reordering 1 2 3 4 5 6 */
  .stack-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0px 25px !important;
  }

  .steps-left,
  .steps-right {
    display: contents !important;
  }

  .tile-column {
    display: none !important;
  }

  .step-item {
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .step-item.visible {
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .step-item[data-step="1"] {
    order: 1 !important;
  }
  .step-item[data-step="2"] {
    order: 2 !important;
  }
  .step-item[data-step="3"] {
    order: 3 !important;
  }
  .step-item[data-step="4"] {
    order: 4 !important;
  }
  .step-item[data-step="5"] {
    order: 5 !important;
  }
  .step-item[data-step="6"] {
    order: 6 !important;
  }

  .step-number {
    font-size: 28px !important;
  }

  .step-desc {
    max-width: 100% !important;
  }
  .ms-sl .section-header {
    margin-bottom: 25px !important;
  }
  .ms-sl {
    margin-bottom: 25px !important;
    padding-bottom: 50px !important;
  }
  header.style-2 .nav-right .mobile-menu-btn svg {
    fill: #1f1f1f !important;
  }
  header.style-2 .nav-right .mobile-menu-btn {
    border-color: #1f1f1f !important;
  }
  header.style-2 .main-menu > ul > li .bi {
    top: 7.5px !important;
  }
  .clients__badge-label {
    font-size: 9px !important;
    line-height: normal !important;
  }
  .sw-caps-number {
    flex: unset !important;
    font-size: 32px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  header.style-2 .main-menu > ul > li > a {
    font-size: 12px !important;
  }
  header.style-2 .main-menu > ul {
    padding: 0px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1300px) {
}
@media (min-width: 1300px) and (max-width: 1400px) {
}
@media (min-width: 1400px) and (max-width: 1500px) {
}