/* ==========================================================
   BREAKPOINT: 1440px - Large Desktop
   ========================================================== */
@media (max-width: 1440px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .msi-title {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1;
  }

  .app-service-banner .msi-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 4px;
    background: #f02801;
  }

  .app-service-banner .app-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .app-service-banner .app-service-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-service-banner .app-service-container {
    padding-bottom: 60px;
  }

  .app-service-banner .msi-title {
    font-size: 90px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 34px;
    line-height: 1.15;
  }

/* MSI HIGHLIGHT BAR – 3 items, MSI ONLY */
.app-service-banner .msi-title ~ .app-highlight-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: center !important;
  padding-top: 15px !important;
}

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 24px !important;
    line-height: 1.25;
  }

  .app-service-banner .app-service-image-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .app-service-banner .msi-banner-img {
    width: 560px;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .msi-btn.mt-3 {
    margin-top: 2rem !important;
    padding: 16px 32px !important;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 16px 12px;
  }

  .app-service-banner .app-service-bottom-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    height: 100%;
  }

  .app-service-banner .app-service-bottom-icon img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0;
  }

  .app-service-banner .app-service-bottom-content h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
  }
	/* SECTION: Overview */
  .app-overview-section .app-overview-container {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .app-overview-section .app-overview-label {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .app-overview-section .app-overview-title {
    font-size: 46px;
    line-height: 1.1;
    margin-bottom: 14px;
  }

  .app-overview-section .app-overview-title span {
    display: inline;
  }

  .app-overview-section .app-overview-subtitle {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 22px;
  }

  .app-overview-section .app-overview-feature-list {
    gap: 16px;
  }

  .app-overview-section .app-overview-feature-item {
    gap: 14px;
    padding: 16px 16px;
  }

  .app-overview-section .app-overview-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .app-overview-section .app-overview-feature-icon img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    transform: scale(1.25);
    transform-origin: center;
    display: block;
  }

  .app-overview-section .app-overview-feature-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .app-overview-section .app-overview-feature-text {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .app-overview-section .app-overview-image img {
    width: 480px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .app-overview-section .app-overview-info-box {
    padding: 16px 18px;
    gap: 12px;
  }

  .app-overview-section .app-overview-info-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
  }

  .app-overview-section .app-overview-info-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .app-overview-section .app-overview-info-text {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 0;
  }

  /* SECTION: What We Do */
  .app-package-excellence {
    width: 100%;
    padding: 24px 15px !important;
    border-radius: 20px;
    background: #fff;
    box-sizing: border-box;
    margin-top: 32px;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
	
	/* ================= APP‑V PACKAGING PAGE: START ================= */
  	/* ==========================================================
    SECTION: APP-V Hero - Typography (H1 + Span)
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 56px !important;
    line-height: 1.08 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 155px !important;
    line-height: 0.9 !important;
    display: inline-block;
  }
	
	.app-service-banner .app-v-title ~ .app-highlight-bar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: flex-start;
  padding-top: 15px;
}
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	
  /* ================= MSIX PACKAGING PAGE: START ================= */
	.app-service-left .app-service-sub-title {
		font-size: 42px !important;
		line-height: 1.08 !important;
  	}
	.app-service-left .app-service-main-title {
		font-size: 120px !important;
		line-height: 0.9 !important;
		display: inline-block;
  	}
	.app-service-left .app-service-heading {
		font-size: 28 !important;
		line-height: 0.9 !important;
	}
	
  /* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 1366px - Standard Laptop
   ========================================================== */
@media (max-width: 1366px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner {
    background-size: cover;
    background-position: center;
  }

  .app-service-banner .app-service-container {
    padding-bottom: 60px;
  }

  .app-service-banner .msi-title {
    font-size: 82px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 30px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 22px !important;
    line-height: 1.25;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar {
    gap: 14px;
  }

  .app-service-banner .msi-btn {
    padding: 12px 22px;
    font-size: 16px;
  }

  .app-service-banner .msi-banner-img {
    width: 520px;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 16px;
  }

  .app-service-banner .app-service-bottom-content h4 {
    font-size: 15px;
    line-height: 1.25;
  }

  .app-service-banner .app-service-bottom-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
  }

  .app-service-banner .app-service-bottom-icon img {
    width: 30px;
    height: 30px;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
    SECTION: APP-V Hero - Typography (H1 + Span)
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 54px !important;
    line-height: 1.08 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 143px !important; /* calculated */
    line-height: 0.9 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 104px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 36px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 25px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}

		
/* ==========================================================
   BREAKPOINT: 1280px - Small Laptop
   ========================================================== */
@media (max-width: 1280px) {

  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
   SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 52px !important;
    line-height: 1.08 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 133px !important;
    line-height: 0.9 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Overview */
  .app-overview-section .app-overview-container {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .app-overview-section .app-overview-label {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .app-overview-section .app-overview-title {
    font-size: 46px;
    line-height: 1.1;
    margin-bottom: 14px;
  }

  .app-overview-section .app-overview-title span {
    display: inline;
  }

  .app-overview-section .app-overview-subtitle {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 22px;
  }

  .app-overview-section .app-overview-feature-list {
    gap: 16px;
  }

  .app-overview-section .app-overview-feature-item {
    gap: 14px;
    padding: 16px 16px;
  }

  .app-overview-section .app-overview-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .app-overview-section .app-overview-feature-icon img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    transform: scale(1.55);
    transform-origin: center;
    display: block;
  }

  .app-overview-section .app-overview-feature-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .app-overview-section .app-overview-feature-text {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .app-overview-section .app-overview-image img {
    width: 480px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .app-overview-section .app-overview-info-box {
    padding: 16px 18px;
    gap: 12px;
  }

  .app-overview-section .app-overview-feature-item {
    gap: 30px; /* was 14px -> more room for text */
    align-items: flex-start;
  }

  .app-overview-section .app-overview-feature-icon {
    flex: 0 0 56px; /* fixed icon column */
  }

  .app-overview-section .app-overview-info-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
  }

  .app-overview-section .app-overview-feature-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important; /* prevents weird wrapping/overflow in flex */
  }

  .app-overview-section .app-overview-info-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .app-overview-section .app-overview-info-text {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 0;
  }

  /* SECTION: What We Do */
  .app-what-do-section .app-why-choose-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    padding: 24px 16px;
  }

  .app-what-do-section .app-why-choose-intro {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: left;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .app-what-do-section .app-why-choose-item {
    width: 100%;
  }

  .app-what-do-section .app-why-choose-inner > .app-why-choose-item:first-of-type {
    border-left: 0 !important;
  }

  .app-what-do-section .app-why-choose-inner > .app-why-choose-item:first-of-type::before,
  .app-what-do-section .app-why-choose-inner > .app-why-choose-item:first-of-type::after {
    content: none !important;
    display: none !important;
  }

  .app-what-do-section
    .app-why-choose-inner
    > .app-why-choose-item:first-of-type
    .app-why-choose-icon,
  .app-what-do-section
    .app-why-choose-inner
    > .app-why-choose-item:first-of-type
    .app-why-choose-text {
    border-left: 0 !important;
  }

  /* SECTION: MSI Benefits */
  .app-msi-benefits .app-msi-benefits-inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }

  .app-msi-benefits .app-msi-benefit {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px;
  }

  .app-msi-benefits .app-msi-benefit-icon {
    flex: 0 0 auto;
    line-height: 1;
  }

  .app-msi-benefits .app-msi-benefit-content {
    width: 100%;
  }

  .app-msi-benefits .app-msi-benefit-content h3,
  .app-msi-benefits .app-msi-benefit-content p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: XXXpx !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: YYYpx !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: ZZZpx !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 1200px - Large Tablet Landscape / Small Desktop
   ========================================================== */
@media (max-width: 1200px) {

  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 48px !important;
    line-height: 1.08 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 118px !important;
    line-height: 0.92 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .app-service-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .app-service-banner .msi-title {
    font-size: 72px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 20px !important;
    line-height: 1.25;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar {
    gap: 12px;
    flex-wrap: wrap;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-item {
    padding: 8px 10px;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    line-height: 0 !important;
    border: 2px solid #0b1b3a !important;
    background: transparent !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-content,
  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-content span {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .app-service-banner .msi-btn {
    padding: 11px 20px;
    font-size: 15px;
  }

  .app-service-banner .msi-banner-img {
    width: 460px;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 14px 10px;
  }

  .app-service-banner .app-service-bottom-row {
    row-gap: 10px;
  }

  .app-service-banner .app-service-bottom-column {
    margin-bottom: 0;
  }

  .app-service-banner .app-service-bottom-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    height: 100%;
  }

  .app-service-banner .app-service-bottom-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .app-service-banner .app-service-bottom-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin: 0;
  }

  .app-service-banner .app-service-bottom-content h4 {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.2;
  }

  /* SECTION: Service Grid */
  .app-msix-service-image img {
    width: 250px !important;
    display: block;
    height: 200px !important;
    object-fit: contain;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 96px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 34px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 23px !important; line-height: 0.9 !important; }
	
	/* SECTION: Service Grid */
		.app-msix-service-body {
			display: flex;
			flex-direction: column;
			gap: 25px;
			align-items: center;
			padding: 10px 10px;
		}
	/* ================= MSIX PACKAGING PAGE: END ================= */
}

		
/* ==========================================================
   BREAKPOINT: 1024px - iPad Pro Landscape
   ========================================================== */
@media (max-width: 1024px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .app-service-row {
    align-items: flex-start !important;
  }

  .app-service-banner .msi-title {
    font-size: 56px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 20px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 16px !important;
    line-height: 1.25;
  }

  .app-service-banner .msi-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
	.app-service-banner .msi-title ~ .app-highlight-bar {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-item {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex: 0 0 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 0 !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-icon i {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-content span {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  .app-service-banner .app-service-image-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .app-service-banner .msi-banner-img {
    width: 320px !important;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 12px 10px;
    margin-top: 32px;
  }

  .app-service-banner .app-service-bottom-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
  }

  .app-service-banner .app-service-bottom-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .app-service-banner .app-service-bottom-item {
    padding: 10px 12px;
    gap: 10px;
    height: 100%;
  }

  .app-service-banner .app-service-bottom-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .app-service-banner .app-service-bottom-icon img {
    width: 24px;
    height: 24px;
  }

  .app-service-banner .app-service-bottom-content h4 {
    font-size: 13px !important;
    line-height: 1.2;
    margin: 0;
  }

  .app-service-banner .app-service-bottom-column:nth-child(even),
  .app-service-banner .app-service-bottom-column:nth-child(even) .app-service-bottom-item {
    border-right: 0 !important;
  }

  .app-service-banner .app-service-bottom-column:nth-child(even)::after,
  .app-service-banner .app-service-bottom-column:nth-child(even) .app-service-bottom-item::after {
    content: none !important;
    display: none !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 44px !important;
    line-height: 1.1 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 99px !important;
    line-height: 0.92 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Overview */
  .app-overview-section .app-overview-row {
    align-items: center !important;
  }

  .app-overview-section .app-overview-left {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  .app-overview-section .app-overview-right {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }

  .app-overview-section .app-overview-image img {
    max-width: 100%;
    height: auto;
  }

  /* SECTION: What We Do */
  .app-what-do-section .app-what-do-left {
    padding-right: 0 !important;
  }

  .app-what-do-section .app-package-excellence-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .app-what-do-section .app-package-excellence,
  .app-what-do-section .app-package-excellence-inner,
  .app-what-do-section .app-package-excellence-grid {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .app-what-do-section .app-why-choose-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  .app-what-do-section .app-why-choose-intro {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
    margin-bottom: 6px;
  }

  .app-what-do-section .app-why-choose-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px;
  }

  .app-what-do-section .app-why-choose-icon {
    margin: 0 auto;
  }

  .app-what-do-section .app-why-choose-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .app-what-do-section .app-why-choose-item {
    border-left: 0 !important;
  }

  .app-what-do-section .app-why-choose-item::before,
  .app-what-do-section .app-why-choose-item::after {
    content: none !important;
    display: none !important;
  }

  /* SECTION: Process */
  .app-msix-process-title {
    margin: 15px 0;
    font-size: 42px !important;
    color: #123f9c;
    font-weight: 800;
    line-height: 1.2;
  }

  .app-msix-process-cards .app-msix-process-card {
    display: grid !important;
    grid-template-columns: 58% 42%;
    grid-template-areas:
      "image    features"
      "content  features";
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
  }

  .app-msix-process-cards .app-msix-process-image {
    grid-area: image;
  }

  .app-msix-process-cards .app-msix-process-content {
    grid-area: content;
  }

  .app-msix-process-cards .app-msix-process-features {
    grid-area: features;
  }

  .app-msix-process-cards .app-msix-process-card-divider {
    display: none !important;
  }

  .app-msix-process-cards .app-msix-process-image img {
    width: 170px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .app-msix-process-cards .app-msix-process-features {
    height: 100%;
    align-self: center;
    justify-content: center;
  }

  .app-msix-process-cards .app-process-feature {
    display: flex;
    align-items: center;
    gap: 10px; /* FIXED: was 10p */
  }

  /* SECTION: Fixed Pricing */
  .app-fixed-pricing-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 22px;
  }

  .app-fixed-pricing-left,
  .app-fixed-pricing-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .app-fixed-pricing-left {
    text-align: center !important;
  }

  .app-fixed-pricing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .app-fixed-pricing-divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .app-fixed-pricing-text {
    margin-left: auto;
    margin-right: auto;
  }

  .app-fixed-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    justify-items: center;
  }

  .app-fixed-pricing-card {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .app-fixed-pricing-card-divider {
    width: 70%;
    margin: 10px auto;
  }

  .app-fixed-pricing-full-card {
    grid-column: 1 / -1 !important;
  }

  .app-fixed-pricing-right {
    display: flex !important;
    justify-content: center !important;
  }

  .app-fixed-pricing-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .app-fixed-pricing-image img {
    width: 520px;
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP‑V Hero (Service Banner)
     FEATURE: Highlight Bar full width across LEFT + RIGHT columns
     ========================================================== */
  .app-service-banner .msi-service-left {
    position: relative; /* keeps z-index working reliably */
  }

  /* APP‑V hero bar: just the bar under app-v-paragraph */
  .app-service-banner .app-v-paragraph + .app-highlight-bar {
    width: 200% !important;          /* 50% col * 2 = 100% row */
    max-width: none !important;
    margin-right: -100% !important;  /* allow it to occupy the right column area */
    margin-left: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 items */
    gap: 10px !important;

    position: relative;
    z-index: 5; /* ensure it sits above the right column if overlapping */
  }

  .app-service-banner .app-v-paragraph + .app-highlight-bar .app-highlight-item {
    width: 100% !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .app-service-banner .app-v-paragraph + .app-highlight-bar .app-highlight-content h1,
  .app-service-banner .app-v-paragraph + .app-highlight-bar .app-highlight-content p {
    text-align: left !important;
  }

  /* ==========================================================
     SECTION: APP‑V Packaging Page - Overview
     FEATURE: app-v-features-grid wider (fits perfectly, no left/right overflow)
     ========================================================== */
  .app-overview-section .app-overview-left {
    overflow: visible !important;
  }

  .app-overview-section .app-v-features-grid {
    /* Bootstrap gutter fix */
    --gx: var(--bs-gutter-x, 24px);

    /* Span across both columns (left 50% + right 50%) */
    width: calc(180% + var(--gx)) !important;
    max-width: none !important;

    /* Pull to align with the row edges (cancel the column padding) */
    margin-left: calc(-1 * var(--gx) / 2) !important;
    margin-right: calc(-100% - (var(--gx) / 2)) !important;

    box-sizing: border-box !important;

    /* keep your grid layout */
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Prevent cards from forcing overflow */
  .app-overview-section .app-v-feature-card {
    min-width: 0 !important;
  }

  /* ==========================================================
     SECTION: APP‑V Packaging Page - Overview
     FEATURE: Move right image upwards
    ========================================================== */
  .app-overview-section .app-overview-image {
    margin-top: -6rem !important; /* tweak -10 to -30 */
  }

  .app-v-feature-card p {
    text-align: center !important;
  }

  .app-msix-service-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
    padding: 10px 10px;
  }

  .app-msix-service-image img {
    width: 150px !important;
    display: block;
    height: 200px !important;
    object-fit: contain;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 75px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 26px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 20px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}

		
/* ==========================================================
   BREAKPOINT: 992px - Bootstrap LG
   ========================================================== */
@media (max-width: 992px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Overview */
  .app-overview-section .app-overview-info-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
  }

  .app-overview-section .app-overview-info-icon {
    flex: 0 0 auto;
  }

  .app-overview-section .app-overview-info-icon img {
    display: block;
  }

  .app-overview-section .app-overview-info-content {
    width: 100%;
  }

  .app-overview-section .app-overview-info-title,
  .app-overview-section .app-overview-info-text {
    margin-left: 0 !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 42px !important;
    line-height: 1.1 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 92px !important;
    line-height: 0.92 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: XXXpx !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: YYYpx !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: ZZZpx !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 900px
   ========================================================== */
@media (max-width: 900px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .app-service-row {
    align-items: center !important;
  }

  .app-service-banner .app-service-left,
  .app-service-banner .app-service-right {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .app-service-banner .msi-service-left {
    padding-right: 0 !important;
  }

  .app-service-banner .app-service-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .app-service-banner .msi-title {
    font-size: 50px;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 18px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 15px !important;
    line-height: 1.25;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-item {
    flex: 0 0 calc(50% - 8px) !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-item:nth-child(3) {
    flex-basis: 100% !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex: 0 0 26px !important;
    padding: 0 !important;
  }

  .app-service-banner .msi-title ~ .app-highlight-bar .app-highlight-content span {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
  .app-service-banner .msi-btn {
    padding: 10px 16px;
    font-size: 14px;
  }

  .app-service-banner .msi-banner-img {
    width: 300px !important;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 12px 10px;
    margin-top: 20px;
  }

  .app-service-banner .app-service-bottom-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
  }

  .app-service-banner .app-service-bottom-column {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-service-banner .app-service-bottom-content h4 {
    font-size: 13px !important;
    line-height: 1.2;
  }

  /* SECTION: What We Do */
  .app-what-do-right {
    margin-top: 32px;
  }

  .app-what-do-section .app-package-excellence-grid {
    margin-top: 16px !important;
  }

  /* SECTION: Service Grid */
  .app-msix-service-image img {
    width: 200px !important;
    display: block;
    height: 200px !important;
    object-fit: contain;
  }

  /* SECTION: Contact CTA */
  .app-msix-contact-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px;
  }

  .app-msix-contact-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .app-msix-contact-divider {
    display: none !important;
  }

  .app-msix-contact-content {
    width: 100%;
  }

  .app-msix-contact-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .app-msix-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* SECTION: Bottom Feature Strip */
  .app-msix-bottom-strip {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  .app-msix-bottom-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .app-msix-bottom-icon {
    line-height: 1 !important;
  }

  .app-msix-bottom-icon i {
    display: block;
  }

  .app-msix-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
  }

  .app-fixed-pricing-title {
    text-align: left;
  }

  .app-coverage-features {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .app-msix-cta-right {
    margin-top: 32px !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 84px !important;
    line-height: 0.92 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 67px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 23px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 18px !important; line-height: 0.9 !important; }
	
	
	.app-service-features{
		margin-top: 2rem;
	}
	.app-overview-row {
			--bs-gutter-x 1.5rem: 1.5rem;
			--bs-gutter-y: 0;
			display: flex;
			flex-direction: column !important;
			margin-top: calc(-1 * var(--bs-gutter-y));
			margin-right: calc(-.5 * var(--bs-gutter-x));
			margin-left: calc(-.5 * var(--bs-gutter-x));
		}
	
	    .app-overview-section .app-overview-left {
			display: flex;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: center !important;
			width: 100% !important;
			max-width : 100% !important;
			text-align: center !important;
    }
	
	    .app-overview-section .app-overview-right{
			display: flex;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: center !important;
			width: 100% !important;
			max-width : 100% !important;
			text-align: center !important;
    }
	
	.app-overview-text{
		text-align: center !important;
	}
	
	.app-overview-feature-list {
		  display: grid;
		  grid-template-columns: repeat(2, minmax(0, 1fr));
		  gap: 20px;
		  width: 100%;
		}

		.app-overview-feature-item {
		  display: flex;
		  flex-direction: column;   /* icon on top, content below */
		  align-items: center;  /* left align everything */
		  text-align: center;
		  border-bottom: none;      /* optional: remove divider since it's a grid now */
		  gap: 14px;
		}

		.app-overview-feature-icon {
		  align-self: center;        /* center just the icon */
		}

		.app-overview-feature-content {
		  text-align: center;
		  width: 100%;
		}

		.app-overview-feature-title {
		  text-align: center;
		}

		.app-overview-feature-text {
		  text-align: center !important;
		}
	
	    .app-overview-section .app-overview-image{
        margin-top: 0rem !important;
    	}
	    .app-overview-section .app-overview-image img {
        width: 680px;
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
	
		.app-overview-bottom-text {
		text-align: center !important;
		}
	
	.app-fixed-pricing-left,.app-fixed-pricing-title,.app-fixed-pricing-text{
		text-align: center !important;
	}
	/* ================= MSIX PACKAGING PAGE: END ================= */
}
		

/* ==========================================================
   BREAKPOINT: 820px - iPad Air
   ========================================================== */
@media (max-width: 820px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .msi-service-left {
    padding-right: 0 !important;
  }

  .app-service-banner .app-service-right {
    padding-left: 6px !important;
  }

  .app-service-banner .msi-title {
    font-size: 48px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 18px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 15px !important;
    line-height: 1.25;
  }

  .app-service-banner .app-highlight-bar {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .app-service-banner .app-highlight-item {
    flex: 0 0 calc(50% - 8px) !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    min-width: 0;
  }

  .app-service-banner .app-highlight-item:nth-child(3) {
    flex-basis: 100% !important;
  }

  .app-service-banner .app-highlight-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
  }

  .app-service-banner .app-highlight-icon i {
    font-size: 11px !important;
  }

  .app-service-banner .app-highlight-content span {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .app-service-banner .msi-btn {
    padding: 10px 14px;
    font-size: 14px;
  }

  .app-service-banner .msi-banner-img {
    width: 280px !important;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 10px 10px;
    margin-top: 18px;
  }

  .app-service-banner .app-service-bottom-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
  }

  .app-service-banner .app-service-bottom-column {
    padding: 0 !important;
  }

  .app-service-banner .app-service-bottom-item {
    padding: 9px 10px;
    gap: 9px;
  }

  .app-service-banner .app-service-bottom-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .app-service-banner .app-service-bottom-icon img {
    width: 22px;
    height: 22px;
  }

  .app-service-banner .app-service-bottom-content h4 {
    font-size: 12.5px !important;
    line-height: 1.2;
  }

  /* SECTION: Service Grid */
  .app-msix-services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch;
  }

  .app-msix-services-grid .app-msix-service-card {
    width: 100% !important;
    height: 100%;
  }

  /* SECTION: MSI Benefits */
  .app-msi-benefits .app-msi-benefits-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .app-msi-benefits .app-msi-benefit {
    width: 100% !important;
    height: 100%;
    border-right: 0 !important;
  }

  .app-msi-benefits .app-msi-benefit:nth-child(3),
  .app-msi-benefits .app-msi-benefit:nth-child(6) {
    border-right: 0 !important;
  }

  .app-msi-benefits .app-msi-benefit:nth-child(3)::after,
  .app-msi-benefits .app-msi-benefit:nth-child(6)::after {
    content: none !important;
    display: none !important;
  }

  .app-msi-benefits .app-msi-benefits-inner {
    border-right: 0 !important;
  }

  /* SECTION: Process */
  .app-msix-process-cards .app-msix-process-card {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    grid-template-areas:
      "image    features"
      "content  features";
    column-gap: 14px;
    row-gap: 10px;
    align-items: start;
  }

  .app-msix-process-cards .app-msix-process-image {
    grid-area: image;
  }

  .app-msix-process-cards .app-msix-process-content {
    grid-area: content;
  }

  .app-msix-process-cards .app-msix-process-features {
    grid-area: features;
  }

  .app-msix-process-cards .app-msix-process-card-divider {
    display: none !important;
  }

  .app-msix-process-cards .app-msix-process-image img {
    width: 150px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .app-msix-process-cards .app-msix-process-features {
    padding: 8px 10px !important;
    box-sizing: border-box;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 76px !important;
    line-height: 0.93 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 64px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 22px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 17.5px !important; line-height: 0.9 !important; }
		/* ================= MSIX PACKAGING PAGE: END ================= */
}
		

/* ==========================================================
   BREAKPOINT: 768px - iPad Portrait
   ========================================================== */
@media (max-width: 768px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .app-service-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .app-service-banner .app-service-row {
    flex-direction: row !important;
    align-items: center !important;
  }

  .app-service-banner .msi-service-left {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    padding-right: 0 !important;
    text-align: left;
  }

  .app-service-banner .app-service-right {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    padding-left: 8px !important;
  }

  .app-service-banner .msi-title {
    font-size: 44px;
    line-height: 1;
  }

  .app-service-banner .app-service-sub-title {
    font-size: 16px;
    line-height: 1.15;
  }

  .app-service-banner .msi-service-left p.mb-0 {
    font-size: 14px !important;
    line-height: 1.25;
  }

/* MSI HIGHLIGHT BAR – 3 items, MSI ONLY */
.app-service-banner .msi-title ~ .app-highlight-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: center !important;
  padding-top: 15px !important;
}

  .app-service-banner .app-highlight-item {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .app-service-banner .app-highlight-item:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .app-service-banner .app-highlight-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .app-service-banner .app-highlight-content span {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  .app-service-banner .msi-btn {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .app-service-banner .msi-banner-img {
    width: 240px !important;
    max-width: 100%;
    height: auto;
  }

  .app-service-banner .app-service-bottom-strip {
    padding: 12px 10px;
    margin-top: 14px;
  }

  .app-service-banner .app-service-bottom-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
  }

  .app-service-banner .app-service-bottom-column {
    padding: 0 !important;
  }

  .app-service-banner .app-service-bottom-item {
    padding: 9px 10px;
    gap: 9px;
    border: 0 !important;
  }

  .app-service-banner .app-service-bottom-item::before,
  .app-service-banner .app-service-bottom-item::after,
  .app-service-banner .app-service-bottom-column::before,
  .app-service-banner .app-service-bottom-column::after {
    content: none !important;
    display: none !important;
  }

  /* SECTION: Overview */
  .app-overview-section .app-overview-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 18px;
  }

  .app-overview-section .app-overview-left,
  .app-overview-section .app-overview-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .app-overview-section .app-overview-feature-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .app-overview-section .app-overview-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 0;
  }

  .app-overview-section .app-overview-feature-icon {
    flex: 0 0 auto;
  }

  .app-overview-section .app-overview-feature-content {
    width: 100% !important;
  }

  .app-overview-section .app-overview-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px;
    margin-top: 24px;
  }

  .app-overview-section .app-overview-image {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .app-overview-section .app-overview-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .app-overview-section .app-overview-info-box {
    flex: 0 0 45%;
    max-width: 45%;
    margin-top: 0 !important;
  }

  .app-overview-section .app-overview-info-box.mt-3 {
    margin-top: 0 !important;
  }

  /* SECTION: MSIX Services + CTA */
  .app-msix-services-left {
    margin-bottom: 32px !important;
  }

  .app-msix-cta-right {
    margin-top: 32px !important;
  }

  /* SECTION: Bottom Strip */
  .app-msix-bottom-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .app-msix-bottom-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 12px;
    gap: 8px;
  }

  .app-msix-bottom-item {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .app-msix-bottom-item:nth-child(2),
  .app-msix-bottom-item:nth-child(4) {
    border-right: 0;
  }

  .app-msix-bottom-item:nth-child(3),
  .app-msix-bottom-item:nth-child(4) {
    border-bottom: 0;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 36px !important;
    line-height: 1.12 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 70px !important;
    line-height: 0.94 !important;
    display: inline-block;
  }

  /* ==========================================================
     SECTION: APP‑V Hero (Service Banner)
     FEATURE: Highlight Bar full-width + 2 by 2 grid (no odd wrap)
     ========================================================== */
  .app-service-banner .app-v-paragraph + .app-highlight-bar {
    /* span across left + right columns (50% + 50%) */
    width: 200% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: -100% !important;

    /* 2 by 2 */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    justify-items: start !important;
    align-items: start !important;
  }

  /* cancel older flex sizing rules from 900/820, etc. */
  .app-service-banner .app-v-paragraph + .app-highlight-bar .app-highlight-item {
    width: 100% !important;
    min-width: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    /* icon top, text bottom + left aligned */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }

  /* VERY IMPORTANT: remove “3rd item full width” rule from other breakpoints */
  .app-service-banner .app-v-paragraph + .app-highlight-bar .app-highlight-item:nth-child(3) {
    flex-basis: auto !important;
    grid-column: auto !important;
  }

  .app-service-image-inner {
    margin-top: -5rem !important;
  }

  .app-overview-section .app-v-features-grid {
    --gx: var(--bs-gutter-x, 24px);
    width: 100% !important;

    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .app-overview-section .app-overview-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px;
    margin-top: 6rem;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 59px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 21px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 17px !important; line-height: 0.9 !important; }
	
	.app-service-banner .app-service-row {
		display: flex;
		flex-direction: column;
		align-items: center;
	}	
	
	.app-service-banner .app-service-left{
		display: flex;
		flex-direction: column;
		align-items: start;
		text-align: left;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* === Force 2 columns per row (2x2 grid) === */
.app-service-feature-column {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* === Card content: icon small, on top, left aligned === */
.app-service-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  padding: 10px;
}

.app-service-feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-service-feature-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.app-service-feature-title {
  text-align: center !important;
  margin: 0;
}

.app-service-feature-description {
  text-align: center !important;
  margin: 0;
}
	
	.app-overview-section .app-overview-feature-list {
			margin: 26px 0 !important;
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 26px;
		}
	
		.app-fixed-pricing-left {
    	padding-right: 0;
		}
	
		.app-msix-process-description{
			text-align: center !important;
		}
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 640px - Large Mobile Landscape
   ========================================================== */
@media (max-width: 640px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Global */
  html,
  body {
    overflow-x: hidden;
  }

  /* SECTION: Hero (Service Banner) */
  .app-service-banner {
    padding: 25px !important;
    overflow-x: hidden;
  }

  .app-service-banner .app-service-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 16px;
    text-align: center;
    padding: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app-service-banner .msi-service-left,
  .app-service-banner .app-service-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-service-banner .msi-title {
    font-size: 56px !important;
    line-height: 1;
  }

  .app-service-banner .app-highlight-bar {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-service-banner .app-highlight-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    white-space: normal !important;
  }

  .app-service-banner .app-highlight-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex: 0 0 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 0 !important;
  }

  .app-service-banner .app-highlight-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .app-service-banner .app-highlight-content span {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* SECTION: What We Do */
  .app-what-do-title {
    margin: 0;
    font-size: 46px !important;
    font-weight: 700;
    line-height: 1.3;
  }

  /* SECTION: Pricing (Bottom CTA) */
  .app-fixed-pricing-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 12px;
  }

  .app-fixed-pricing-bottom-divider {
    display: none !important;
  }

  .app-fixed-pricing-bottom-content {
    width: 100%;
  }

  .app-fixed-pricing-bottom-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .app-fixed-pricing-bottom-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 63px !important;
    line-height: 0.95 !important;
    display: inline-block;
  }

  .app-service-banner .app-v-paragraph + .app-highlight-bar {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-items: start !important;
    align-items: start !important;
  }

  .app-service-image-inner {
    margin-top: 0 !important;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
	.app-service-left .app-service-main-title{ font-size: 52px !important; line-height: 0.9 !important; }
	.app-service-left .app-service-sub-title{ font-size: 18px !important; line-height: 1.08 !important; }
	.app-service-left .app-service-heading{ font-size: 16.5px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 576px - Bootstrap SM
   ========================================================== */
@media (max-width: 576px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Overview */
  .app-overview-section {
    padding: 25px !important;
  }

  .app-overview-section .app-overview-container {
    padding: 16px !important;
  }

  .app-overview-section .app-overview-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 18px;
  }

  .app-overview-section .app-overview-left,
  .app-overview-section .app-overview-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .app-overview-section .app-overview-left {
    text-align: left !important;
  }

  .app-overview-section .app-overview-title,
  .app-overview-section .app-overview-subtitle {
    text-align: left !important;
  }

  .app-overview-section .app-overview-feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  .app-overview-section .app-overview-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 14px 14px;
  }

  .app-overview-section .app-overview-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px;
  }

  .app-overview-section .app-overview-image {
    width: 100% !important;
  }

  .app-overview-section .app-overview-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }

  .app-overview-section .app-overview-info-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  .app-overview-section .app-overview-info-box.mt-3 {
    margin-top: 0 !important;
  }

  /* SECTION: What We Do */
  .app-what-do-section {
    padding-top: 60px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  .app-what-do-section .app-what-do-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .app-what-do-section .app-what-do-heading-column,
  .app-what-do-section .app-what-do-left {
    text-align: left !important;
  }

  .app-what-do-section .app-what-do-label {
    justify-content: flex-start !important;
  }

  .app-what-do-section .app-what-do-left,
  .app-what-do-section .app-what-do-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-what-do-section .app-what-do-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px;
  }

  .app-what-do-section .app-what-do-card-icon {
    margin: 0 !important;
  }

  .app-what-do-section .app-what-do-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .app-what-do-section .app-what-do-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }

  .app-what-do-section .app-package-excellence-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 16px;
  }

  .app-what-do-section .app-package-excellence-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-bottom: 1px solid rgba(8, 31, 103, 0.18) !important;
  }

  .app-what-do-section .app-package-excellence-item:last-child {
    border-bottom: 0 !important;
  }

  .app-what-do-section .app-package-excellence-icon {
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 0 8px 0 !important;
    align-self: flex-start !important;
  }

  .app-what-do-section .app-package-excellence-icon img {
    display: block !important;
    margin: 0 !important;
  }

  .app-what-do-section .app-package-excellence-item h3,
  .app-what-do-section .app-package-excellence-item p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app-what-do-section .app-why-choose-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .app-what-do-section .app-why-choose-intro {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px;
    border: 0 !important;
  }

  .app-what-do-section .app-why-choose-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-left: 0 !important;
  }

  .app-what-do-section .app-why-choose-item::before,
  .app-what-do-section .app-why-choose-item::after {
    content: none !important;
    display: none !important;
  }

  .app-what-do-section .app-why-choose-icon {
    flex: 0 0 34px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .app-what-do-section .app-why-choose-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .app-what-do-section .app-why-choose-text strong,
  .app-what-do-section .app-why-choose-text span {
    display: inline !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
  }

  /* SECTION: MSIX Services */
  .app-msix-services-top {
    padding-top: 60px !important;
    padding-bottom: 30px !important;
    padding-right: 25px !important;
    padding-left: 25px !important;
  }

  .app-msix-services-bottom {
    padding-bottom: 60px !important;
    padding-right: 25px !important;
    padding-left: 25px !important;
  }

  /* SECTION: Pricing */
  .app-fixed-pricing-section {
    width: 100%;
    padding: 60px 25px !important;
    overflow: hidden;
  }

  .app-fixed-pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .app-fixed-pricing-full-card {
    grid-column: auto !important;
  }

  .app-fixed-pricing-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .app-fixed-pricing-icon {
    flex: 0 0 56px;
    width: 56px;
  }

  .app-fixed-pricing-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
  }

  .app-fixed-pricing-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* NOTE: You had two divider styles; keeping your final behavior (hidden). */
  .app-fixed-pricing-card-divider {
    width: 1px !important;
    height: auto !important;
    align-self: stretch !important;
    margin: 0 4px !important;
  }

  /* SECTION: Pricing Divider (Hidden on small screens) */
  .app-fixed-pricing-card-divider {
    display: none !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 58px !important;
    line-height: 0.95 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  .app-service-banner .app-highlight-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .app-overview-section .app-overview-right {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 14px;
  }

  /* Ensure card is stacked (icon top, divider, content) */
  .app-what-do-section .app-what-do-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Turn the divider into a horizontal line */
  .app-what-do-section .app-what-do-card-divider {
    position: static !important;

    width: 30% !important;
    height: 1px !important; /* horizontal thickness */
    min-height: 1px !important;

    margin: 12px 0 !important; /* spacing above/below line */
    transform: none !important; /* cancel any rotation */
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 48px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 17px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 16px !important; line-height: 0.9 !important; }
	
	.app-overview-section .app-overview-left .app-overview-title {
		text-align: center !important;
		}
	    .app-overview-section .app-overview-title, .app-overview-section .app-overview-subtitle{
        text-align: center !important;
    	}
		
		.app-overview-section .app-overview-right {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 14px;
		margin-top: 0;
    	}
		
	    .app-overview-section .app-overview-image {
        flex: 0 0 100%;
        max-width: 100%;
    	}
		/* ================= MSIX PACKAGING PAGE: END ================= */
	}


/* ==========================================================
   BREAKPOINT: 480px - Standard Mobile
   ========================================================== */
@media (max-width: 480px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Overview */
  .app-overview-section {
    padding: 42px 25px !important;
  }

  .app-overview-section .app-overview-container {
    padding: 16px !important;
  }

  .app-overview-section .app-overview-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 18px;
  }

  .app-overview-section .app-overview-left,
  .app-overview-section .app-overview-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .app-overview-section .app-overview-left {
    text-align: left !important;
  }

  .app-overview-section .app-overview-title,
  .app-overview-section .app-overview-subtitle {
    text-align: left !important;
  }

  .app-overview-section .app-overview-feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  .app-overview-section .app-overview-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    padding-bottom: 16px;
  }

  .app-overview-section .app-overview-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 42px !important;
  }

  .app-overview-section .app-overview-image {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
  }

  .app-overview-section .app-overview-image img {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    height: auto !important;
  }

  .app-overview-section .app-overview-info-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  .app-overview-section .app-overview-info-box.mt-3 {
    margin-top: 0 !important;
  }

  /* SECTION: What We Do */
  .app-what-do-section .app-what-do-divider {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .app-what-do-section .app-what-do-label {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .app-what-do-section .app-what-do-line {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* SECTION: Service Grid */
  .app-msix-services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .app-msix-services-grid .app-msix-service-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* SECTION: Pricing Title (FIXED: was outside media + extra brace) */
  .app-fixed-pricing-title {
    margin: 0;
    color: #123f9c;
    font-size: 42px !important;
    line-height: 1.1;
    font-weight: 700;
  }

  .app-fixed-pricing-left {
    padding-right: 0 !important;
  }

  /* SECTION: MSIX Process - Wrapper Layout */
  .app-msix-process-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  /* SECTION: MSIX Process - Timeline (Horizontal on Mobile) */
  .app-msix-timeline {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px;

    /* if timeline is wider than screen, allow swipe */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px;
  }

  .app-msix-step {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* turn the vertical connector into a horizontal connector */
  .app-msix-line {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;

    /* keep these if your desktop CSS made it vertical */
    width: auto !important;
  }

  /* OPTIONAL: If you prefer to HIDE the timeline on mobile,
     uncomment this and use the counter badge method below.
   */
  .app-msix-timeline {
    display: none !important;
  }

  /* SECTION: MSIX Process - Cards Container */
  .app-msix-process-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
  }

  /* SECTION: MSIX Process - Card Layout (Single Column) */
  .app-msix-process-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;

    padding: 16px !important;
  }

  .app-msix-process-card-divider {
    display: none !important; /* remove middle divider for mobile */
  }

  .app-msix-process-image {
    display: flex;
    justify-content: center;
  }

  .app-msix-process-image img {
    width: 160px; /* adjust as needed */
    max-width: 80%;
    height: auto;
    display: block;
  }

  .app-msix-process-content h3 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
  }

  .app-msix-process-content p {
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
  }

  /* SECTION: MSIX Process - Features List */
  .app-msix-process-section {
    width: 100%;
    padding: 60px 25px !important;
    background: #f8fbff;
    overflow: hidden;
  }

  .app-msix-process-features {
    padding: 0 !important; /* remove side padding from larger breakpoints */
    margin-top: 4px;
  }

  .app-process-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .app-process-feature span {
    white-space: normal !important; /* allow wrapping on small screens */
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Force the card itself to NOT be a grid anymore */
  .app-msix-process-wrapper .app-msix-process-cards .app-msix-process-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    /* If any grid props exist from larger breakpoints, neutralize them */
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  /* Force every direct child to become full-width stacked blocks */
  .app-msix-process-wrapper .app-msix-process-cards .app-msix-process-card > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;

    /* In case any desktop CSS uses positioning/floats */
    float: none !important;
    position: static !important;
  }

  /* Hide the vertical divider (desktop layout element) */
  .app-msix-process-wrapper .app-msix-process-card-divider {
    display: none !important;
  }

  /* Make sure features behave like a normal stacked list */
  .app-msix-process-wrapper .app-msix-process-features {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Optional: center image on mobile */
  .app-msix-process-wrapper .app-msix-process-image {
    display: flex !important;
    justify-content: center !important;
  }

  .app-msix-process-wrapper .app-msix-process-image img {
    width: 160px;
    max-width: 90%;
    height: auto;
    display: block;
  }

  /* Allow long feature text to wrap */
  .app-msix-process-wrapper .app-process-feature span {
    white-space: normal !important;
  }

  /* SECTION: MSIX Feature Grid - Force Icon Top (Override) */
  .app-msix-cta-section {
    width: 100%;
    padding: 60px 25px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .app-msix-feature-grid .app-msix-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
   SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 30px !important;
    line-height: 1.14 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 53px !important;
    line-height: 0.96 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  .app-coverage-feature {
    min-height: 105px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  

  /* Center align all CTA left content */
  .app-msix-cta-left {
    text-align: center !important;
    padding: 0 !important;
  }

  .app-msix-cta-left * {
    text-align: center !important;
  }

  /* Badge centered */
  .app-msix-cta-left .app-msix-cta-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .app-msix-cta-left .app-msix-cta-divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Highlight card: icon top, centered, text centered */
  .app-msix-cta-left .app-msix-highlight-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .app-msix-cta-left .app-msix-highlight-icon {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Divider line: horizontal in stacked layout */
  .app-msix-cta-left .app-msix-highlight-line {
    width: 70% !important;
    height: 1px !important;
    margin: 6px auto !important;
  }

  .app-msix-cta-left .app-msix-highlight-content,
  .app-msix-cta-left .app-msix-highlight-text {
    width: 100% !important;
    text-align: center !important;
  }

  /* Feature items: icon top + centered */
  .app-msix-cta-left .app-msix-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .app-msix-cta-left .app-msix-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .app-msix-cta-left .app-msix-feature-title {
    text-align: center !important;
  }

  /* Center align the entire left column */
  .app-fixed-pricing-left {
    text-align: center !important;
  }

  .app-fixed-pricing-left .app-fixed-pricing-title,
  .app-fixed-pricing-left .app-fixed-pricing-text {
    text-align: center !important;
  }

  .app-fixed-pricing-left .app-fixed-pricing-divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Warranty header: icon + title centered */
  .app-fixed-pricing-left .app-warranty-title {
    display: flex !important;
    flex-direction: column !important; /* icon on top */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px;
  }

  .app-fixed-pricing-left .app-warranty-main-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .app-fixed-pricing-left .app-warranty-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Warranty list: center items */
  .app-fixed-pricing-left .app-warranty-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px;
  }

  .app-fixed-pricing-left .app-warranty-item {
    width: 100% !important;
    max-width: 420px; /* optional: keeps lines readable */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .app-fixed-pricing-left .app-warranty-item span {
    text-align: center !important;
  }

  /* Warranty notice: icon on top, text below, centered */
  .app-fixed-pricing-left .app-warranty-notice {
    display: flex !important;
    flex-direction: column !important; /* icon top */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .app-warranty-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
  }

  .app-fixed-pricing-left .app-warranty-notice-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .app-fixed-pricing-left .app-warranty-notice p {
    text-align: center !important;
    margin: 0 !important;
  }
	
	.app-fixed-pricing-left .app-warranty-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
        width: 380px;
    }
	
	.app-fixed-pricing-left .app-warranty-item{
        width: 100% !important;
        max-width: 420px;
        display: flex !important;
        align-items: center !important;
        justify-content: left !important;
        text-align: center !important;
        gap: 10px;
    }
	
	.app-fixed-pricing-left .app-warranty-item span {
        text-align: left !important;
    }

  /* Optional: remove desktop-only line break on mobile */
  .app-fixed-pricing-left .app-warranty-desktop-break {
    display: none !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 44px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 15.5px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 15.5px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 430px - iPhone 14 Pro Max
   ========================================================== */
@media (max-width: 430px) {

  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 29px !important;
    line-height: 1.14 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 49px !important;
    line-height: 0.96 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


  /* ================= MSI PACKAGING PAGE: START ================= */
  .app-overview-section .app-v-features-grid {
    --gx: var(--bs-gutter-x, 24px);
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .app-v-feature-card {
    min-width: 0;
    padding: 24px !important;
    background: #ffffff;
    border: 1px solid #dce6f8;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(8, 31, 103, .10);
    text-align: center;
    box-sizing: border-box;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }

  /* Card layout: stack (icon -> divider -> content) */
  .app-what-do-section .app-what-do-cta {
    display: flex !important;
    flex-direction: column !important; /* icon on top */
    align-items: flex-start !important; /* LEFT align everything */
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px;
  }

  /* Icon: keep it on the left */
  .app-what-do-section .app-what-do-cta-icon {
    align-self: flex-start !important;
    margin: 0 !important;
  }

  /* Divider: rotate/convert to horizontal line
     NOTE: We do NOT set background-color, so your existing BLUE divider color stays. */
  .app-what-do-section .app-what-do-cta-divider {
    transform: none !important; /* cancels any rotation */
    width: 100% !important; /* horizontal */
    height: 2px !important; /* thickness */
    min-height: 2px !important;
    margin: 6px 0 !important;

    /* keep whatever existing divider color/gradient you already have */
  }

  /* Content: full width and left aligned */
  .app-what-do-section .app-what-do-cta-content {
    width: 100% !important;
    text-align: left !important;
  }

  .app-what-do-section .app-what-do-cta-title,
  .app-what-do-section .app-what-do-cta-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app-what-do-cta::after {
    content: '';
    position: absolute;
    right: 0;
    height: 100%;
    width: 170px;
    background: linear-gradient(to bottom, #6292f1, #326ce7);
    clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0% 100%) !important;
  }

  .app-msix-services-point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 35px;
  }

  /*------------------*/
  .app-what-do-cta-column .app-what-do-cta {
    display: flex !important;
    flex-direction: column !important; /* icon on top */
    align-items: flex-start !important; /* LEFT align everything */
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px;
  }

  /* Icon: keep it on the left */
  .app-what-do-cta-column .app-what-do-cta-icon {
    align-self: flex-start !important;
    margin: 0 !important;
  }

  /* Divider: rotate/convert to horizontal line
     NOTE: We do NOT set background-color, so your existing BLUE divider color stays. */
  .app-what-do-cta-column .app-what-do-cta-divider {
    transform: none !important; /* cancels any rotation */
    width: 100% !important; /* horizontal */
    height: 2px !important; /* thickness */
    min-height: 2px !important;
    margin: 6px 0 !important;

    /* keep whatever existing divider color/gradient you already have */
  }

  /* Content: full width and left aligned */
  .app-what-do-cta-column .app-what-do-cta-content {
    width: 100% !important;
    text-align: left !important;
  }

  .app-what-do-cta-column .app-what-do-cta-title,
  .app-what-do-cta-column .app-what-do-cta-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app-msix-process-description {
    text-align: center !important;
  }

  .app-why-card p {
    text-align: center !important;
  }

  .app-why-top-card {
    display: flex !important;
    flex-direction: column !important; /* icon -> divider -> content */
    align-items: center !important; /* Center align */
    justify-content: center !important;
    text-align: center !important;
    gap: 12px;
  }

  .app-why-top-icon {
    align-self: center !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* centers icon inside its circle */
  }

  /* Divider becomes horizontal (keeps existing color if set by background/border) */
  .app-why-top-divider {
    width: 100% !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 6px 0 !important;
    transform: none !important;
  }

  .app-why-top-content {
    width: 100% !important;
    text-align: center !important;
  }

  .app-why-top-content h3,
  .app-why-top-content p {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app-tools-text {
    text-align: center !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 42px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 15px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 15px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 414px - iPhone Plus Models
   ========================================================== */
@media (max-width: 414px) {

  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
    SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 28.5px !important;
    line-height: 1.14 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 48px !important;
    line-height: 0.96 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 41px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 14.5px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 15px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */

}


/* ==========================================================
   BREAKPOINT: 390px - iPhone 14/15
   ========================================================== */
@media (max-width: 390px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  .app-msix-bottom-strip {
    display: flex !important;
    flex-direction: column !important; /* stack items */
    align-items: stretch !important;
    gap: 12px; /* spacing between items */
    width: 100%;
  }

  .app-msix-bottom-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important; /* icon left, title right */
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px;

    /* remove any grid/border dividers from desktop */
    border: 0 !important;
  }

  .app-msix-bottom-title {
    width: 100%;
    text-align: left !important;
  }

  /* If dividers were applied with pseudo elements */
  .app-msix-bottom-item::before,
  .app-msix-bottom-item::after {
    content: none !important;
    display: none !important;
  }

  .app-what-do-section .app-what-do-label-text {
    font-size: 14px !important;
    line-height: 1.2;
  }

  .app-what-do-section .app-what-do-title {
    font-size: 42px !important;
    line-height: 1.1;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
     SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 46px !important;
    line-height: 0.96 !important;
    display: inline-block;
  }
	
	.app-fixed-pricing-left .app-warranty-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
        width: 340px;
    }
	
	.app-fixed-pricing-left .app-warranty-item{
        width: 100% !important;
        max-width: 420px;
        display: flex !important;
        align-items: center !important;
        justify-content: left !important;
        text-align: center !important;
        gap: 10px;
    }
	
	.app-fixed-pricing-left .app-warranty-item span {
        text-align: left !important;
    }
  /* ================= APP‑V PACKAGING PAGE: END ================= */
			
	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 40px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 14px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 14.5px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}


/* ==========================================================
   BREAKPOINT: 375px - Most Common Mobile Width
   ========================================================== */
@media (max-width: 375px) {

  /* ================= MSI PACKAGING PAGE: START ================= */
  /* SECTION: Hero (Service Banner) */
  .app-service-banner .app-service-bottom-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .app-service-banner .app-service-bottom-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .app-service-banner .app-service-bottom-item {
    width: 100% !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border: 0 !important;
  }

  .app-service-banner .app-service-bottom-item::before,
  .app-service-banner .app-service-bottom-item::after,
  .app-service-banner .app-service-bottom-column::before,
  .app-service-banner .app-service-bottom-column::after {
    content: none !important;
    display: none !important;
  }

  /* SECTION: Overview */
  .app-overview-section .app-overview-title {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 24px;
    margin-bottom: 10px;
  }

  /* SECTION: What We Do */
  .app-what-do-section .app-what-do-label-text {
    font-size: 14px !important;
    line-height: 1.2;
  }

  .app-what-do-section .app-what-do-title {
    font-size: 32px !important;
    line-height: 1.15;
  }

  .app-what-do-section .app-why-choose {
    width: 100%;
    padding: 12px 12px;
    background: #082774;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20px;
    margin-top: 20px;
  }

  /* SECTION: MSIX Services (Points) */
  .app-msix-services-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-msix-services-right .app-msix-services-point {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  .app-msix-services-right .app-msix-services-point-icon {
    flex: 0 0 auto;
  }

  .app-msix-services-right .app-msix-services-point-content {
    width: 100% !important;
    text-align: left !important;
  }

  .app-msix-services-right .app-msix-services-point-content p {
    margin: 0;
  }

  /* SECTION: MSI Benefits */
  .app-msi-benefits {
    width: 100%;
    padding: 6px 25px !important;
    background: #d90000;
    box-sizing: border-box;
    overflow: hidden;
    clip-path: polygon(
      0% 6%,
      4% 0%,
      96% 0%,
      100% 6%,
      100% 94%,
      96% 100%,
      4% 100%,
      0% 94%
    ) !important;
  }

  .app-msi-benefits .app-msi-benefits-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .app-msi-benefits .app-msi-benefit {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px;
    border-right: 0 !important;
  }

  .app-msi-benefits .app-msi-benefit::before,
  .app-msi-benefits .app-msi-benefit::after {
    content: none !important;
    display: none !important;
  }

  .app-msi-benefits .app-msi-benefit-content {
    width: 100%;
  }

  .app-msi-benefits .app-msi-benefit-content h3,
  .app-msi-benefits .app-msi-benefit-content p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* ================= MSI PACKAGING PAGE: END ================= */


  /* ================= APP‑V PACKAGING PAGE: START ================= */
  /* ==========================================================
    SECTION: APP-V Hero - H1 + Span Typography
     ========================================================== */
  .app-service-banner .app-v-title {
    font-size: 27px !important;
    line-height: 1.16 !important;
  }

  .app-service-banner .app-v-title > span {
    font-size: 43px !important;
    line-height: 0.98 !important;
    display: inline-block;
  }
  /* ================= APP‑V PACKAGING PAGE: END ================= */


	/* ================= MSIX PACKAGING PAGE: START ================= */
	/* SECTION: Hero Typography */
		.app-service-left .app-service-main-title{ font-size: 38px !important; line-height: 0.9 !important; }
		.app-service-left .app-service-sub-title{ font-size: 13.5px !important; line-height: 1.08 !important; }
		.app-service-left .app-service-heading{ font-size: 14.5px !important; line-height: 0.9 !important; }
	/* ================= MSIX PACKAGING PAGE: END ================= */
}