/* ==================== MS SOLUTIONS - UNIFIED SECTION ==================== */
#ms-solutions-section-unified {
    background: #f8f9fa;
    position: relative;
    padding: 0;
    width: 100vw;
    min-height: 250vw;
}

/* Separator Text Styles */
.ms-separator-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: "markProRegular";
    font-size: 2.5vw;
    line-height: 3vw;
    color: #000;
    z-index: 10;
}

.ms-separator-1 {
    top: 62vw;
}

.ms-separator-2 {
    top: 132vw;
}

.ms-separator-3 {
    top: 195vw;
}

.ms-separator-bold {
    font-family: "markProBold";
    color: #61c17e;
    padding: 0 0.3vw;
}

/* Section 2 Cards Container */
.ms-cards-container-2 {
    position: absolute;
    width: 76vw;
    left: 50%;
    transform: translateX(-50%);
    top: 96vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
}

.ms-card-parent-2 {
    position: relative;
    background-color: white;
    width: 17.1875vw;
    height: 19.8438vw;
    box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
}
.ms-card-anim-2::before {
    content: "";
    position: absolute;
    height: 19.8438vw;
    width: 0.1042vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    float: left;
    transform-origin: bottom left;
    transform: scaleY(0);
    overflow-y: clip;
}
.ms-card-anim-2::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 17.1875vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    bottom: 0vw;
    left: 0vw;
    transform-origin: bottom left;
    transform: scaleX(0);
}
.ms-card-anim-2:hover::before {
    transform: scaleY(1);
}
.ms-card-anim-2:hover::after {
    transform: scaleX(1);
}
.ms-pseudo-card-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 17.0833vw;
    height: 19.7396vw;
    padding: 0;
    margin: 0;
}
.ms-pseudo-anim-2::before {
    content: "";
    position: absolute;
    height: 0vw;
    width: 0.1042vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0;
    right: 0;
}
.ms-pseudo-anim-2::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 0vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0vw;
    right: 0vw;
}
.ms-card-anim-2:hover .ms-pseudo-anim-2::before {
    height: 19.8438vw;
}
.ms-card-anim-2:hover .ms-pseudo-anim-2::after {
    width: 17.1875vw;
}
.ms-card-subhead-2 {
    position: relative;
    font-family: "markProRegular";
    font-size: 0.7813vw;
    letter-spacing: 0.0781vw;
    color: #222;
    margin: 0;
    padding: 0;
    padding-left: 2.3438vw;
    padding-top: 6.6667vw;
}
.ms-card-name-2 {
    position: relative;
    font-family: "markProBlack";
    font-size: 1.5625vw;
    color: #111;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    padding-left: 2.3438vw;
    padding-top: 0.5vw;
}
.ms-card-lines-2 {
    position: relative;
    display: flex;
    gap: 0.5vw;
    padding-left: 2.3438vw;
    padding-top: 0.8vw;
}
.ms-line-green-2 {
    display: inline-block;
    width: 1.5vw;
    height: 0.3vw;
    background: #61c17e;
    border-radius: 2px;
}
.ms-line-blue-2 {
    display: inline-block;
    width: 2vw;
    height: 0.3vw;
    background: #2172ba;
    border-radius: 2px;
}
.ms-btn-demo-2 {
    position: absolute !important;
    left: 2.1354vw;
    bottom: 0;
    opacity: 0 !important;
    background-color: #345cad;
    color: white;
    border: none;
    border-radius: 0.2083vw;
    font-size: 0.7813vw;
    padding: 0.5208vw 0.5208vw;
    font-family: "markProBold";
    cursor: pointer;
}
.ms-btn-demo-2:hover {
    background-color: #61c17e;
    color: white;
}
.ms-btn-learn-2 {
    position: absolute !important;
    left: 9.375vw;
    bottom: 0;
    opacity: 0 !important;
    color: #345cad;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 0.7813vw;
    font-family: "markProRegular";
    font-weight: 400;
    text-decoration: none;
}
.ms-btn-learn-2:hover {
    color: #61c17e;
    background: none;
    border: none;
}
.ms-card-anim-2:hover .ms-btn-hover-2 {
    transition: 0.3s ease-in-out;
    bottom: 1.4583vw !important;
    opacity: 1 !important;
}
.ms-card-anim-2:hover .ms-btn-hover-learn-2 {
    transition: 0.3s ease-in-out;
    bottom: 1.9271vw !important;
    opacity: 1 !important;
}

/* ==================== MS SOLUTIONS SECTION 2 (LIVE SITE STYLE) ==================== */
#ms-solutions-section-2 {
    background: var(--light-bg-blue);
    position: relative;
    padding: 0 0 6vw 0;
    width: 100vw;
    min-height: 60vh;
    overflow: hidden;
    border-top: 2px solid #e3eaf2;
}
.ms-section-2-bgnum {
    position: absolute;
    top: 2vw;
    left: 2vw;
    font-family: 'markProBlack', sans-serif;
    font-size: 18vw;
    color: #bcd1e7;
    opacity: 0.7;
    z-index: 1;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.ms-wrap-2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2vw;
    position: relative;
    z-index: 2;
    margin-top: 7vw;
}
.ms-section-2-header {
    display: flex;
    align-items: flex-end;
    gap: 1vw;
    margin-bottom: 3vw;
}
.ms-section-2-slash {
    font-family: 'markProBold', sans-serif;
    font-size: 3vw;
    color: #2172ba;
    font-weight: 700;
    margin-bottom: 0.2vw;
}
.ms-products-grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2.5vw 2vw;
    margin-bottom: 2.5vw;
}
.ms-products-grid-2 > .ms-product-card-2:nth-child(n+4) {
    grid-column: span 1;
}
.ms-product-card-2 {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 0.5vw;
    box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
    padding: 2.5vw 2vw 2vw 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 13vw;
    min-width: 15vw;
    transition: box-shadow 0.3s, border-color 0.3s;
    position: relative;
}
.ms-product-card-2::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0.1042vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    transform-origin: bottom left;
    transform: scaleY(0);
    left: 0;
    bottom: 0;
}
.ms-product-card-2::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 100%;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: scaleX(0);
}
.ms-product-card-2:hover::before {
    transform: scaleY(1);
}
.ms-product-card-2:hover::after {
    transform: scaleX(1);
}
.ms-product-card-2:hover {
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
}
.ms-product-subhead-2 {
    font-family: 'markProRegular', sans-serif;
    font-size: 1vw;
    color: #2172ba;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3vw;
}
.ms-product-name-2 {
    font-family: 'markProBlack', sans-serif;
    font-size: 1.6vw;
    color: #111;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    display: block;
    line-height: 1.1;
    margin-bottom: 1vw;
}
.ms-product-cta-2 {
    display: flex;
    gap: 0.7vw;
    margin-top: 0.5vw;
}
.ms-btn-2 {
    font-family: 'markProBold', sans-serif;
    font-size: 1vw;
    border-radius: 0.2vw;
    padding: 0.65vw 1.5vw;
    text-decoration: none;
    font-weight: 700;
    border: none;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
    min-width: 7.5vw;
    min-height: 2.5vw;
    text-align: center;
}
.ms-btn-demo {
    background: var(--primary-blue);
    color: #fff;
    border: 2px solid var(--primary-blue);
}
.ms-btn-demo:hover {
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    color: #fff;
    border-color: #2b76b9;
}
.ms-btn-learn {
    background: #fff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}
.ms-btn-learn:hover {
    background: var(--primary-blue);
    color: #fff;
    border-color: #2b76b9;
}
.ms-section-2-cta {
    background: #eaf3fa;
    border-radius: 0.4vw;
    padding: 2vw 0;
    text-align: center;
    margin-top: 2vw;
}
.ms-section-2-cta-text {
    font-family: 'markProRegular', sans-serif;
    font-size: 1.1vw;
    color: #222;
    margin-right: 1vw;
}
.ms-btn-cta {
    font-size: 1vw;
    padding: 0.5vw 2vw;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 0.2vw;
    text-decoration: none;
    font-weight: 600;
    border: none;
    transition: all 0.2s;
    display: inline-block;
    margin-left: 1vw;
}
.ms-btn-cta:hover {
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    color: #fff;
}
/* Section 1, 2, 3 are now part of unified section */
.ms-section-1-header {
    position: absolute;
    font-family: "markProBold";
    font-size: 34.1146vw;
    line-height: 22.6563vw;
    left: 50%;
    transform: translateX(-50%);
    top: 8vw;
    height: 24.375vw;
    width: 56.1979vw;
    color: rgba(52, 92, 173, 0.15);
}
.ms-section-1-bgnum {
    display: block;
}
.ms-section-1-slash {
    content: "/";
    position: absolute;
    font-size: 13.4375vw;
    top: 10.9896vw;
    left: 30.4167vw;
    line-height: 1.1719vw;
    color: #345cad;
    font-family: "markProBold";
}

/* Section 2 Header */
.ms-section-2-header {
    position: absolute;
    font-family: "markProBold";
    font-size: 34.1146vw;
    line-height: 22.6563vw;
    left: 50%;
    transform: translateX(-50%);
    top: 68vw;
    height: 24.375vw;
    width: 56.1979vw;
    color: rgba(97, 193, 126, 0.15);
}

.ms-section-2-bgnum {
    display: block;
}

.ms-section-2-slash {
    content: "/";
    position: absolute;
    font-size: 13.4375vw;
    top: 70.9896vw;
    left: 30.4167vw;
    line-height: 1.1719vw;
    color: #61c17e;
    font-family: "markProBold";
}

/* Section Titles */
.ms-section-1-title {
    position: absolute;
    font-family: "markProRegular";
    color: black;
    font-size: 3.125vw;
    font-weight: 400;
    letter-spacing: 0.0625vw;
    line-height: 3.2813vw;
    top: 8.5417vw;
    left: 42.0313vw;
}

.ms-section-2-title {
    position: absolute;
    font-family: "markProRegular";
    color: black;
    font-size: 3.125vw;
    font-weight: 400;
    letter-spacing: 0.0625vw;
    line-height: 3.2813vw;
    top: 68.5417vw;
    left: 42.0313vw;
}

.ms-section-3-title {
    position: static;
    display: inline-block;
    font-family: "markProRegular", sans-serif;
    color: black;
    font-size: 3.8vw;
    font-weight: 400;
    letter-spacing: 0.02vw;
    line-height: 1.3;
    vertical-align: bottom;
}

.ms-cards-container-1 {
    position: absolute;
    width: 76vw;
    left: 50%;
    transform: translateX(-50%);
    top: 36vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    column-gap: 2vw;
    row-gap: 0.7vw;
    justify-items: center;
}

.ms-cards-container-1 .ms-card-parent:nth-child(4) {
    grid-column: 2 / 3;
}

.ms-card-parent {
    position: relative;
    background-color: white;
    width: 17.1875vw;
    height: 19.8438vw;
    box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
}
.ms-card-anim::before {
    content: "";
    position: absolute;
    height: 19.8438vw;
    width: 0.1042vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    float: left;
    transform-origin: bottom left;
    transform: scaleY(0);
    overflow-y: clip;
}
.ms-card-anim::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 17.1875vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    bottom: 0vw;
    left: 0vw;
    transform-origin: bottom left;
    transform: scaleX(0);
}
.ms-card-anim:hover::before {
    transform: scaleY(1);
}
.ms-card-anim:hover::after {
    transform: scaleX(1);
}
.ms-pseudo-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 17.0833vw;
    height: 19.7396vw;
    padding: 0;
    margin: 0;
}
.ms-pseudo-anim::before {
    content: "";
    position: absolute;
    height: 0vw;
    width: 0.1042vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0;
    right: 0;
}
.ms-pseudo-anim::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 0vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0vw;
    right: 0vw;
}
.ms-card-anim:hover .ms-pseudo-anim::before {
    height: 19.8438vw;
}
.ms-card-anim:hover .ms-pseudo-anim::after {
    width: 17.1875vw;
}
.ms-card-subhead {
    position: relative;
    font-family: "markProRegular";
    font-size: 0.7813vw;
    letter-spacing: 0.0781vw;
    color: #222;
    margin: 0;
    padding: 0;
    padding-left: 2.3438vw;
    padding-top: 6.6667vw;
}
.ms-card-name {
    position: relative;
    font-family: "markProBlack";
    font-size: 1.5625vw;
    color: #111;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    padding-left: 2.3438vw;
    padding-top: 0.5vw;
}
.ms-card-lines {
    position: relative;
    display: flex;
    gap: 0.5vw;
    padding-left: 2.3438vw;
    padding-top: 0.8vw;
}
.ms-line-green {
    display: inline-block;
    width: 1.5vw;
    height: 0.3vw;
    background: #61c17e;
    border-radius: 2px;
}
.ms-line-blue {
    display: inline-block;
    width: 2vw;
    height: 0.3vw;
    background: #2172ba;
    border-radius: 2px;
}
.ms-btn-demo {
    position: absolute !important;
    left: 2.1354vw;
    bottom: 0;
    opacity: 0 !important;
    background-color: #345cad;
    color: white;
    border: none;
    border-radius: 0.2083vw;
    font-size: 0.7813vw;
    padding: 0.5208vw 0.5208vw;
    font-family: "markProBold";
    cursor: pointer;
}
.ms-btn-demo:hover {
    background-color: #61c17e;
    color: white;
}
.ms-btn-learn {
    position: absolute !important;
    left: 9.375vw;
    bottom: 0;
    opacity: 0 !important;
    color: #345cad;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 0.7813vw;
    font-family: "markProRegular";
    font-weight: 400;
    text-decoration: none;
}
.ms-btn-learn:hover {
    color: #61c17e;
    background: none;
    border: none;
}
.ms-card-anim:hover .ms-btn-hover {
    transition: 0.3s ease-in-out;
    bottom: 1.4583vw !important;
    opacity: 1 !important;
}
.ms-card-anim:hover .ms-btn-hover-learn {
    transition: 0.3s ease-in-out;
    bottom: 1.9271vw !important;
    opacity: 1 !important;
}
/* Microsoft Solutions Page CSS - Exact replica of dynamics360.net */

/* ==================== ANIMATIONS ==================== */
@keyframes scale-up-br {
  0% {
    transform: scale(0);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 100%;
  }
}

@keyframes scale-up-hor-right {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 100%;
  }
}

@keyframes scale-up-ver-bottom {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 100%;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
}

.scale-up-br {
  animation: scale-up-br 1s ease-in-out 1s both;
  -webkit-animation: scale-up-br 1s ease-in-out 1s both;
}

:root {
    --primary-blue: #345cad;
    --light-bg-blue: #F4F8FC;
    --light-bg-green: #F5F8F5;
    --dark-text: #333;
    --gray-text: #555;
    --border: #eee;
    --green-accent: #61c17e;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'markProRegular', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dark-text);
    background: #fff;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================== HERO SECTION ==================== */
#msPageSection1 {
    position: relative;
    height: 92vh;
    width: 100vw;
    overflow-y: clip;
    overflow-x: clip;
    background-color: #ffffff;
}

#msPageCopy {
    position: absolute;
    font-family: "markProBlack";
    font-size: 11vh;
    line-height: 9.8148vh;
    letter-spacing: -0.0926vh;
    left: 50%;
    transform: translateX(-50%);
    top: 25vh;
    color: #000;
    z-index: 2;
    text-align: center;
    width: 100%;
}

/* Desktop - ensure text stays centered */
@media (min-width: 769px) {
    #msPageCopy {
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }
}

#msMicrosoftPartnerBadge {
    display: none;
}

.msScrollText {
    position: absolute;
    bottom: 5.8333vh;
    left: 1.5104vw;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "markProRegular";
    font-size: 0.6771vw;
    z-index: 2;
    letter-spacing: 0.2031vw;
}

.msScrollText::before {
    content: "";
    position: absolute;
    background-color: black;
    height: 16.9796vh;
    width: 0.1042vw;
    bottom: 8.8889vh;
    left: 0.3125vw;
    animation: scale-up-ver-bottom 1.5s ease-in-out 2s infinite alternate-reverse both;
}

#msSeor {
    position: absolute;
    bottom: 0vw;
    right: 0vw;
    height: 24.4296vh;
    width: 25.412vh;
    z-index: 1;
}

/* ==================== BUTTON STYLES ==================== */
.msHeroButtonContainer {
    position: absolute;
    top: 3vw;
    right: 3vw;
    display: flex;
    gap: 1.5vw;
    z-index: 10;
}

.buttonStructure {
    position: relative;
    cursor: pointer;
    font-family: "markProRegular";
    letter-spacing: 0.026vw;
    text-align: center;
}

.msDemoBtnHero {
    background-color: #345cad;
    color: white;
    border: none;
    border-radius: 0.2083vw;
    font-size: 1.0417vw;
    padding: 0.5208vw 1.5625vw;
    transition: all 0.3s ease;
}

.msDemoBtnHero:hover {
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    color: white;
}

.msPricingBtnHero {
    background-color: white;
    color: #345cad;
    border: 0.0521vw solid #345cad;
    border-radius: 0.2083vw;
    font-size: 1.0417vw;
    padding: 0.5208vw 1.5625vw;
    transition: all 0.3s ease;
}

.msPricingBtnHero:hover {
    background-color: #345cad;
    color: white;
    border-color: #345cad;
}

.ms-hero-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.ms-hero-cta .btn-secondary:hover {
    background: #fff;
    color: var(--primary-blue);
}

.ms-badge {
    margin: 50px 0 40px;
}

.ms-badge img {
    height: 90px;
    width: auto;
}

.ms-scroll {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ms-scroll img {
    height: 50px;
    width: auto;
    margin-bottom: 16px;
    animation: float 2s ease-in-out infinite;
}

.ms-scroll p {
    font-size: 0.85rem;
    letter-spacing: 2.5px;
    margin: 0;
    text-transform: uppercase;
}

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

/* ==================== CONTENT WRAPPER ==================== */
.ms-content-wrapper {
    padding: 0;
}

/* ==================== SOLUTIONS SECTIONS ==================== */
.ms-solutions-section {
    padding: 100px 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
}

.ms-solutions-section:nth-child(2) {
    background: var(--light-bg-blue);
}

.ms-solutions-section:nth-child(3) {
    background: var(--light-bg-green);
}

.ms-solutions-section:nth-child(4) {
    background: var(--light-bg-blue);
}

.ms-section-title {
    font-family: 'markProBold', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 60px;
    color: var(--dark-text);
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.ms-section-number {
    font-size: 2.8rem;
    color: var(--primary-blue);
    font-weight: 700;
}

/* ==================== PRODUCTS GRID ==================== */
.ms-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.ms-products-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ms-product-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 36px 24px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    position: relative;
}

.ms-product-card::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0.1042vw;
    background-color: var(--green-accent);
    transition: 0.4s ease-in-out;
    transform-origin: bottom left;
    transform: scaleY(0);
    left: 0;
    bottom: 0;
}

.ms-product-card::after {
    content: '';
    position: absolute;
    height: 0.1042vw;
    width: 100%;
    background-color: var(--green-accent);
    transition: 0.4s ease-in-out;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: scaleX(0);
}

.ms-product-card:hover::before {
    transform: scaleY(1);
}

.ms-product-card:hover::after {
    transform: scaleX(1);
}

.ms-product-card:hover {
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
}

.ms-product-header {
    margin-bottom: 28px;
}

.ms-product-header h3 {
    font-family: 'markProRegular', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 10px;
    line-height: 1.4;
}

.ms-product-name {
    font-family: 'markProBold', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    line-height: 1.3;
}

.ms-product-cta {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-product-cta .btn-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
}

.ms-product-cta .btn-link:hover {
    color: #084b9e;
    border-bottom-color: #084b9e;
    padding-left: 4px;
}

/* ==================== SECTION CTAs ==================== */
.ms-section-cta {
    text-align: center;
    padding: 48px 32px;
    background: rgba(11, 102, 195, 0.06);
    border-radius: 3px;
    margin-top: 60px;
}

.ms-section-cta p {
    font-family: 'markProRegular', sans-serif;
    font-size: 1.1rem;
    margin: 0 0 24px;
    color: var(--dark-text);
    line-height: 1.6;
}

.ms-section-cta .btn {
    padding: 13px 36px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ms-section-cta .btn-secondary {
    background: var(--primary-blue);
    color: #fff;
}

.ms-section-cta .btn-secondary:hover {
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    color: #fff;
}

/* ==================== MS SOLUTIONS SECTION 3 (LIVE SITE STYLE) ==================== */
.ms-section-3-bgnum {
    position: absolute;
    top: 2vw;
    left: 2vw;
    font-family: 'markProBlack', sans-serif;
    font-size: 18vw;
    color: #bcd1e7;
    opacity: 0.7;
    z-index: 1;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
/* Section 3 merged into unified section */
.ms-section-3-header {
    position: relative;
    font-family: "markProBold";
    font-size: 34.1146vw;
    line-height: 22.6563vw;
    left: auto;
    transform: none;
    top: auto;
    height: auto;
    width: 75vw;
    max-width: 75vw;
    margin: 0 auto 4vw;
    color: rgba(33, 114, 186, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.ms-section-3-bgnum {
    position: static;
    display: inline-block;
    font-family: 'markProBlack', sans-serif;
    font-size: 26vw;
    color: #bcd1e7;
    opacity: 0.7;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    vertical-align: bottom;
    margin-right: 8vw;
}
.ms-section-3-slash {
    position: static;
    display: inline-block;
    font-size: 8vw;
    line-height: 1;
    margin: 0 3vw 0 0;
    vertical-align: bottom;
    color: #2172ba;
    font-family: "markProBold";
}
.ms-products-grid-3 {
    position: relative;
    height: auto;
    width: 75vw;
    max-width: 75vw;
    margin: 0 auto 4vw;
    left: auto;
    transform: none;
    top: auto;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.ms-card-parent-3 {
    position: relative;
    background-color: white;
    width: 17.1875vw;
    height: 19.8438vw;
    box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.ms-card-anim-3::before {
    content: "";
    position: absolute;
    height: 19.8438vw;
    width: 0.1042vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    float: left;
    transform-origin: bottom left;
    transform: scaleY(0);
    overflow-y: clip;
}
.ms-card-anim-3::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 17.1875vw;
    background-color: #61c17e;
    transition: 0.4s ease-in-out;
    bottom: 0vw;
    left: 0vw;
    transform-origin: bottom left;
    transform: scaleX(0);
}
.ms-card-anim-3:hover::before {
    transform: scaleY(1);
}
.ms-card-anim-3:hover::after {
    transform: scaleX(1);
}
.ms-pseudo-card-3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 17.0833vw;
    height: 19.7396vw;
    padding: 0;
    margin: 0;
}
.ms-pseudo-anim-3::before {
    content: "";
    position: absolute;
    height: 0vw;
    width: 0.1042vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0;
    right: 0;
}
.ms-pseudo-anim-3::after {
    content: "";
    position: absolute;
    height: 0.1042vw;
    width: 0vw;
    background-color: #345cad;
    transition: 0.4s ease-in-out;
    top: 0vw;
    right: 0vw;
}
.ms-card-anim-3:hover .ms-pseudo-anim-3::before {
    height: 19.8438vw;
}
.ms-card-anim-3:hover .ms-pseudo-anim-3::after {
    width: 17.1875vw;
}
.ms-product-subhead-3 {
    position: relative;
    font-family: 'markProRegular', sans-serif;
    font-size: 0.7813vw;
    color: #222;
    letter-spacing: 0.0781vw;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    padding-left: 2.3438vw;
    padding-top: 6.6667vw;
}
.ms-product-name-3 {
    position: relative;
    font-family: 'markProBlack', sans-serif;
    font-size: 1.5625vw;
    color: #111;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    padding-left: 2.3438vw;
    padding-top: 0.5vw;
}
.ms-card-lines-3 {
    position: relative;
    display: flex;
    gap: 0.5vw;
    padding-left: 2.3438vw;
    padding-top: 0.8vw;
}
.ms-line-green-3 {
    display: inline-block;
    width: 1.5vw;
    height: 0.3vw;
    background: #61c17e;
    border-radius: 2px;
}
.ms-line-blue-3 {
    display: inline-block;
    width: 2vw;
    height: 0.3vw;
    background: #2172ba;
    border-radius: 2px;
}
.ms-btn-demo-3 {
    position: absolute !important;
    left: 2.1354vw;
    bottom: 0;
    opacity: 0 !important;
    background-color: #345cad;
    color: white;
    border: none;
    border-radius: 0.2083vw;
    font-size: 0.7813vw;
    padding: 0.5208vw 0.5208vw;
    font-family: "markProBold";
    cursor: pointer;
}
.ms-btn-demo-3:hover {
    background-color: #61c17e;
    color: white;
}
.ms-btn-learn-3 {
    position: absolute !important;
    left: 9.375vw;
    bottom: 0;
    opacity: 0 !important;
    color: #345cad;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 0.7813vw;
    font-family: "markProRegular";
    font-weight: 400;
    text-decoration: none;
}
.ms-btn-learn-3:hover {
    color: #61c17e;
    background: none;
    border: none;
}
.ms-card-anim-3:hover .ms-btn-hover-3 {
    transition: 0.3s ease-in-out;
    bottom: 1.4583vw !important;
    opacity: 1 !important;
}
.ms-card-anim-3:hover .ms-btn-hover-learn-3 {
    transition: 0.3s ease-in-out;
    bottom: 1.9271vw !important;
    opacity: 1 !important;
}
.ms-btn-3 {
    font-family: 'markProBold', sans-serif;
    font-size: 1vw;
    border-radius: 0.2vw;
    padding: 0.65vw 1.5vw;
    text-decoration: none;
    font-weight: 700;
    border: none;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
    min-width: 7.5vw;
    min-height: 2.5vw;
    text-align: center;
}
.ms-btn-3.ms-btn-demo {
    background: var(--primary-blue);
    color: #fff;
    border: 2px solid var(--primary-blue);
}
.ms-btn-3.ms-btn-demo:hover {
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    color: #fff;
    border-color: #2b76b9;
}
.ms-btn-3.ms-btn-learn {
    background: #fff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}
.ms-btn-3.ms-btn-learn:hover {
    background: var(--primary-blue);
    color: #fff;
    border-color: #2b76b9;
}
.ms-section-3-cta {
    background: #eaf3fa;
    border-radius: 0.4vw;
    padding: 2vw 0;
    text-align: center;
    margin-top: 2vw;
}
.ms-section-3-cta-text {
    font-family: 'markProRegular', sans-serif;
    font-size: 1.1vw;
    color: #222;
    margin-right: 1vw;
}

/* ==================== SECTION CTA BOXES ==================== */
.ms-section-cta-box {
    position: absolute;
    top: 220vw;
    left: 50%;
    transform: translateX(-50%);
    width: 56vw;
    text-align: center;
    z-index: 10;
}

.ms-section-cta-text {
    font-family: "markProLight", sans-serif;
    font-size: 1.5vw;
    color: #333;
    margin: 0 0 2vw 0;
    line-height: 2vw;
}

.ms-cta-bold {
    font-family: "markProBold", sans-serif;
    color: #111;
}

.ms-cta-demo-btn {
    background: #345cad;
    color: #fff;
    padding: 0.7vw 2vw;
    border-radius: 0.3vw;
    border: none;
    font-family: 'markProBold', sans-serif;
    font-size: 1.1vw;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ms-cta-demo-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5vw 1.5vw rgba(61, 51, 147, 0.3);
}

/* ==================== RECOMMENDATIONS SECTION ==================== */
.ms-recommendations-section {
    position: relative;
    padding: 6.25vw 0;
    background: #fff;
}

.ms-recommendations-wrap {
    max-width: 75vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
    align-items: center;
}

.ms-recommendations-left {
    display: flex;
    align-items: center;
}

.ms-recommendations-heading {
    font-family: 'markProHeavy', sans-serif;
    font-size: 5.8854vw;
    margin: 0;
    line-height: 6.0938vw;
    letter-spacing: 0;
    font-weight: 800;
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ms-recommendations-right {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

.ms-recommendations-title {
    font-family: 'markProLight', sans-serif;
    font-size: 1.5625vw;
    color: #111;
    margin: 0;
    padding-bottom: 0.5vw;
    display: inline-block;
    align-self: flex-start;
    letter-spacing: 0.3125vw;
    font-weight: 400;
    position: relative;
}
.ms-recommendations-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #111;
    height: 0.05vw;
    width: 17.9688vw;
    animation: scale-up-hor-left 3s ease-in-out infinite alternate-reverse both;
}
@keyframes scale-up-hor-left {
    0% {
        transform: scaleX(0.4);
        transform-origin: 0% 100%;
    }
    100% {
        transform: scaleX(1);
        transform-origin: 0% 100%;
    }
}

.ms-recommendations-desc {
    font-family: 'markProLight', sans-serif;
    font-size: 0.9375vw;
    color: #111;
    margin: 0;
    line-height: 1.1719vw;
    letter-spacing: 0.0187vw;
}

.ms-btn-learn-more {
    background: linear-gradient(white, white) padding-box, linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
    color: #111;
    padding: 0.625vw 1.5625vw;
    text-decoration: none;
    font-family: 'markProRegular', sans-serif;
    font-weight: 400;
    font-size: 0.8333vw;
    border: 0.1042vw solid transparent;
    border-radius: 0.2083vw;
    display: inline-block;
    transition: background 1s ease-in-out;
    cursor: pointer;
    align-self: flex-start;
}

.ms-btn-learn-more:hover {
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
    color: #fff;
}

/* ==================== CASE STUDIES SECTION ==================== */
.ms-case-studies-section {
    padding: 6.25vw 0;
    background: #ffffff;
    text-align: center;
    position: relative;
}
/* Divider between Recommendations and Success Stories only on Microsoft Solutions */
body.page-template-page-microsoft-solutions .ms-case-studies-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(40, 84, 162, 0.45);
    box-shadow: none;
}

.ms-case-studies-heading {
    font-family: 'markProExtraLight', sans-serif !important;
    font-size: 5.8854vw !important;
    line-height: 6.0938vw !important;
    letter-spacing: -0.3531vw !important;
    margin: 0 0 5vw !important;
    font-weight: 200 !important;
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
}

.ms-case-studies-container {
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin: 0 auto 4vw;
    max-width: 80vw;
}

.ms-story-card {
    background: #fff;
    width: 17.1875vw;
    height: 19.8438vw;
    box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.ms-story-card:hover {
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
    transform: translateY(-0.5vw);
}

.ms-story-flag {
    position: absolute;
    top: 0;
    right: 1.0417vw;
    height: 19.8438vw;
    width: 2.3521vw;
}

.ms-story-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 0.3125vw rgba(0, 0, 0, 0.2);
}

.ms-story-content {
    position: relative;
    padding: 2.3438vw;
    padding-right: 4.5vw;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Divider between Section 2 and Section 3 only on Microsoft Solutions */
body.page-template-page-microsoft-solutions .ms-section-3-header::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -2vw;
    width: 100vw;
    height: 1px;
    background: rgba(40, 84, 162, 0.45);
    box-shadow: none;
}

.ms-story-label {
    font-family: 'markPro', sans-serif;
    font-size: 0.625vw;
    line-height: 0.7813vw;
    letter-spacing: 0.0781vw;
    margin: 1.5vw 0 auto 0; /* middle text block between logo and button */
    color: #111;
    text-transform: uppercase;
}

.ms-story-logo {
    margin: 0 0 1.5vw 0; /* logo near top of content */
    min-height: 4vw;
    display: flex;
    align-items: flex-start;
}

.ms-story-logo img {
    max-width: 10vw;
    max-height: 4vw;
    object-fit: contain;
}

.ms-story-btn {
    display: inline-block;
    padding: 0.5208vw 0.5208vw;
    background: linear-gradient(white, white) padding-box, linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
    border-radius: 0.2083vw;
    border: 0.1042vw solid transparent;
    font-size: 0.7813vw;
    font-family: 'markProBold', sans-serif;
    color: #111;
    text-decoration: none;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    align-self: flex-start;
    margin-top: 1.5vw;
}

.ms-story-card:hover .ms-story-btn {
    opacity: 1;
}

.ms-story-btn:hover {
    color: white;
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
}

.ms-case-studies-footer {
    margin-top: 3vw;
}

.ms-view-all-btn {
    display: inline-block;
    padding: 0.5208vw 2.0833vw;
    background: linear-gradient(white, white) padding-box, linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
    border-radius: 0.2083vw;
    border: 0.1042vw solid transparent;
    font-size: 1.0417vw;
    font-family: 'markProBold', sans-serif;
    color: #111;
    text-decoration: none;
    transition: background 1s ease-in-out;
}

.ms-view-all-btn:hover {
    color: white;
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
}

.ms-case-studies-footer {
    text-align: center;
}

.ms-case-studies-section h2 {
    font-family: 'markProBold', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 60px;
    color: var(--dark-text);
}

.ms-case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 40px;
}

.ms-case-study-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 40px 24px;
    border-radius: 3px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.ms-case-study-card::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0.1042vw;
    background-color: var(--primary-blue);
    transition: 0.4s ease-in-out;
    top: 0;
    right: 0;
}

.ms-case-study-card::after {
    content: '';
    position: absolute;
    height: 0.1042vw;
    width: 0;
    background-color: var(--primary-blue);
    transition: 0.4s ease-in-out;
    top: 0;
    right: 0;
}

.ms-case-study-card:hover::before {
    height: 100%;
}

.ms-case-study-card:hover::after {
    width: 100%;eeeeeeee
}

.ms-case-study-card:hover {
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
}

.ms-flag {
    height: 45px;
    width: auto;
    object-fit: contain;
}

.ms-logo {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.ms-case-study-card .btn-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    margin-top: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.ms-case-study-card .btn-link:hover {
    color: #084b9e;
    text-decoration: underline;
}

.ms-case-studies-footer {
    text-align: center;
}

.ms-case-studies-footer .btn-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.2s ease;
}

.ms-case-studies-footer .btn-link:hover {
    color: #084b9e;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
    .ms-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ms-products-grid-2 {
        grid-template-columns: 1fr;
    }

    .ms-case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-hero h1 {
        font-size: 2.8rem;
    }
    
    /* Success story cards - 2 per row on tablet */
    .ms-case-studies-container {
        flex-wrap: wrap;
        max-width: 90vw;
        gap: 3vw;
    }
    
    .ms-story-card {
        width: 42vw;
        height: auto;
        min-height: 35vw;
    }
    
    .ms-story-flag {
        height: 100%;
        width: 4vw;
    }
    
    .ms-story-content {
        padding: 4vw;
        padding-right: 6vw;
    }
    
    .ms-story-logo {
        min-height: 6vw;
    }
    
    .ms-story-logo img {
        max-width: 15vw;
        max-height: 6vw;
    }
    
    .ms-story-label {
        font-size: 1.2vw;
        line-height: 1.6vw;
        letter-spacing: 0.12vw;
    }
    
    .ms-story-btn {
        font-size: 1.4vw;
        padding: 1vw 1.5vw;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    /* Hero Section Mobile */
    #msPageSection1 {
        height: auto;
        min-height: 60vh;
        padding: 60px 20px 40px;
    }
    
    #msPageCopy {
        font-size: 12vw;
        line-height: 1.2;
        text-align: center !important;
        position: relative !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100%;
    }
    
    #msMicrosoftPartnerBadge {
        display: none !important;
    }
    
    .msScrollText {
        display: none;
    }
    
    #msSeor {
        display: none;
    }
    
    /* Unified Section Mobile */
    #ms-solutions-section-unified {
        padding: 60px 0 120px;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }
    
    /* Section Headers Mobile - CENTERED AND SAME SIZE */
    .ms-section-1-header,
    .ms-section-2-header,
    .ms-section-3-header {
        width: 90vw;
        max-width: 90vw;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
        margin-top: 30px;
        gap: 2vw;
    }
    
    /* All section background numbers - SAME SIZE AND CENTERED */
    .ms-section-1-bgnum,
    .ms-section-2-bgnum,
    .ms-section-3-bgnum {
        font-size: 20vw;
        font-family: "markProBlack", sans-serif;
        margin-right: 0;
        line-height: 1;
        color: #bcd1e7;
        opacity: 0.7;
    }
    
    /* All section slashes - SAME SIZE */
    .ms-section-1-slash,
    .ms-section-2-slash,
    .ms-section-3-slash {
        font-size: 7vw;
        font-family: "markProBold", sans-serif;
        margin: 0;
    }
    
    /* All section titles - SAME SIZE AND STYLE */
    .ms-section-1-title,
    .ms-section-2-title,
    .ms-section-3-title {
        font-size: 7vw;
        font-family: "markProRegular", sans-serif;
        line-height: 1.3;
    }
    
    /* Cards Container Mobile - ONE CARD PER LINE */
    .ms-cards-container-1,
    .ms-cards-container-2,
    .ms-products-grid-3 {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 60px !important;
        margin: 0 auto 80px !important;
        padding: 50px 0 !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }
    
    #ms-solutions-section-unified .ms-cards-container-1,
    #ms-solutions-section-unified .ms-cards-container-2 {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Section 1 Cards (Dynamics 365) Mobile - EXACT DESKTOP STYLE */
    .ms-card-parent {
        position: relative !important;
        width: 65vw !important;
        height: 0 !important;
        padding-bottom: 76% !important;
        background-color: white;
        box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
    }
    
    /* Maintain desktop hover border animations */
    .ms-card-anim::before {
        height: 100% !important;
        width: 0.5vw !important;
    }
    
    .ms-card-anim::after {
        height: 0.5vw !important;
        width: 100% !important;
    }
    
    .ms-pseudo-card {
        position: absolute !important;
        width: calc(100% - 2px) !important;
        height: calc(100% - 2px) !important;
        padding: 0 !important;
        top: 0 !important;
        right: 0 !important;
    }
    
    .ms-pseudo-anim::before {
        width: 0.5vw !important;
    }
    
    .ms-pseudo-anim::after {
        height: 0.5vw !important;
    }
    
    .ms-card-anim:hover .ms-pseudo-anim::before {
        height: 100% !important;
    }
    
    .ms-card-anim:hover .ms-pseudo-anim::after {
        width: 100% !important;
    }
    
    /* Card subheading - exact desktop proportions */
    .ms-card-subhead {
        position: relative;
        font-family: "markProRegular", sans-serif;
        font-size: 3.5vw;
        letter-spacing: 0.35vw;
        color: #222;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 30vw;
    }
    
    /* Card title/name - exact desktop proportions */
    .ms-card-name {
        position: relative;
        font-family: "markProBlack", sans-serif;
        font-size: 7vw;
        line-height: 1.2;
        color: #111;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 2vw;
    }
    
    .ms-card-lines {
        position: relative;
        display: flex;
        gap: 2vw;
        padding-left: 10vw;
        padding-top: 3.5vw;
    }
    
    /* Card decorative lines - exact desktop size */
    .ms-line-green {
        display: inline-block;
        width: 6.5vw;
        height: 1.3vw;
        background: #61c17e;
        border-radius: 2px;
    }
    
    .ms-line-blue {
        display: inline-block;
        width: 8.5vw;
        height: 1.3vw;
        background: #2172ba;
        border-radius: 2px;
    }
    
    /* Card buttons - exact desktop positioning */
    .ms-btn-demo {
        position: absolute !important;
        left: 9vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        background-color: #345cad;
        color: white;
        border: none;
        border-radius: 0.9vw;
        font-size: 3.5vw;
        padding: 2.2vw 2.2vw;
        font-family: "markProBold", sans-serif;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-demo:hover {
        background-color: #61c17e;
        color: white;
    }
    
    .ms-btn-learn {
        position: absolute !important;
        left: 39.5vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        color: #345cad;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        font-size: 3.5vw;
        font-family: "markProRegular", sans-serif;
        font-weight: 400;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-learn:hover {
        color: #61c17e;
    }
    
    .ms-card-anim:hover .ms-btn-hover {
        transition: 0.3s ease-in-out;
        bottom: 6.5vw !important;
        opacity: 1 !important;
    }
    
    .ms-card-anim:hover .ms-btn-hover-learn {
        transition: 0.3s ease-in-out;
        bottom: 8.5vw !important;
        opacity: 1 !important;
    }
    
    /* Section 2 Cards (Dynamics) Mobile - EXACT DESKTOP STYLE */
    .ms-card-parent-2 {
        position: relative !important;
        width: 65vw !important;
        height: 0 !important;
        padding-bottom: 76% !important;
        background-color: white;
        box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
    }
    
    .ms-card-anim-2::before {
        height: 100% !important;
        width: 0.5vw !important;
    }
    
    .ms-card-anim-2::after {
        height: 0.5vw !important;
        width: 100% !important;
    }
    
    .ms-pseudo-card-2 {
        position: absolute !important;
        width: calc(100% - 2px) !important;
        height: calc(100% - 2px) !important;
        padding: 0 !important;
        top: 0 !important;
        right: 0 !important;
    }
    
    .ms-pseudo-anim-2::before {
        width: 0.5vw !important;
    }
    
    .ms-pseudo-anim-2::after {
        height: 0.5vw !important;
    }
    
    .ms-card-anim-2:hover .ms-pseudo-anim-2::before {
        height: 100% !important;
    }
    
    .ms-card-anim-2:hover .ms-pseudo-anim-2::after {
        width: 100% !important;
    }
    
    .ms-card-subhead-2 {
        position: relative;
        font-family: "markProRegular", sans-serif;
        font-size: 3.5vw;
        letter-spacing: 0.35vw;
        color: #222;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 30vw;
    }
    
    .ms-card-name-2 {
        position: relative;
        font-family: "markProBlack", sans-serif;
        font-size: 7vw;
        line-height: 1.2;
        color: #111;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 2vw;
    }
    
    .ms-card-lines-2 {
        position: relative;
        display: flex;
        gap: 2vw;
        padding-left: 10vw;
        padding-top: 3.5vw;
    }
    
    .ms-line-green-2 {
        display: inline-block;
        width: 6.5vw;
        height: 1.3vw;
        background: #61c17e;
        border-radius: 2px;
    }
    
    .ms-line-blue-2 {
        display: inline-block;
        width: 8.5vw;
        height: 1.3vw;
        background: #2172ba;
        border-radius: 2px;
    }
    
    .ms-btn-demo-2 {
        position: absolute !important;
        left: 9vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        background-color: #345cad;
        color: white;
        border: none;
        border-radius: 0.9vw;
        font-size: 3.5vw;
        padding: 2.2vw 2.2vw;
        font-family: "markProBold", sans-serif;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-demo-2:hover {
        background-color: #61c17e;
        color: white;
    }
    
    .ms-btn-learn-2 {
        position: absolute !important;
        left: 39.5vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        color: #345cad;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        font-size: 3.5vw;
        font-family: "markProRegular", sans-serif;
        font-weight: 400;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-learn-2:hover {
        color: #61c17e;
    }
    
    .ms-card-anim-2:hover .ms-btn-hover-2 {
        transition: 0.3s ease-in-out;
        bottom: 6.5vw !important;
        opacity: 1 !important;
    }
    
    .ms-card-anim-2:hover .ms-btn-hover-learn-2 {
        transition: 0.3s ease-in-out;
        bottom: 8.5vw !important;
        opacity: 1 !important;
    }
    
    /* Section 3 Cards (Other Solutions) Mobile - EXACT DESKTOP STYLE */
    .ms-card-parent-3 {
        position: relative !important;
        width: 65vw !important;
        height: 0 !important;
        padding-bottom: 76% !important;
        background-color: white;
        box-shadow: 0 0 12px 0.5px rgba(0, 0, 0, 0.2);
    }
    
    .ms-card-anim-3::before {
        height: 100% !important;
        width: 0.5vw !important;
    }
    
    .ms-card-anim-3::after {
        height: 0.5vw !important;
        width: 100% !important;
    }
    
    .ms-pseudo-card-3 {
        position: absolute !important;
        width: calc(100% - 2px) !important;
        height: calc(100% - 2px) !important;
        padding: 0 !important;
        top: 0 !important;
        right: 0 !important;
    }
    
    .ms-pseudo-anim-3::before {
        width: 0.5vw !important;
    }
    
    .ms-pseudo-anim-3::after {
        height: 0.5vw !important;
    }
    
    .ms-card-anim-3:hover .ms-pseudo-anim-3::before {
        height: 100% !important;
    }
    
    .ms-card-anim-3:hover .ms-pseudo-anim-3::after {
        width: 100% !important;
    }
    
    .ms-product-subhead-3 {
        position: relative;
        font-family: "markProRegular", sans-serif;
        font-size: 3.5vw;
        letter-spacing: 0.35vw;
        color: #222;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 30vw;
    }
    
    .ms-product-name-3 {
        position: relative;
        font-family: "markProBlack", sans-serif;
        font-size: 7vw;
        line-height: 1.2;
        color: #111;
        margin: 0;
        padding: 0;
        padding-left: 10vw;
        padding-top: 2vw;
    }
    
    .ms-card-lines-3 {
        position: relative;
        display: flex;
        gap: 2vw;
        padding-left: 10vw;
        padding-top: 3.5vw;
    }
    
    .ms-line-green-3 {
        display: inline-block;
        width: 6.5vw;
        height: 1.3vw;
        background: #61c17e;
        border-radius: 2px;
    }
    
    .ms-line-blue-3 {
        display: inline-block;
        width: 8.5vw;
        height: 1.3vw;
        background: #2172ba;
        border-radius: 2px;
    }
    
    .ms-btn-demo-3 {
        position: absolute !important;
        left: 9vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        background-color: #345cad;
        color: white;
        border: none;
        border-radius: 0.9vw;
        font-size: 3.5vw;
        padding: 2.2vw 2.2vw;
        font-family: "markProBold", sans-serif;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-demo-3:hover {
        background-color: #61c17e;
        color: white;
    }
    
    .ms-btn-learn-3 {
        position: absolute !important;
        left: 39.5vw !important;
        bottom: 0 !important;
        opacity: 0 !important;
        color: #345cad;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        font-size: 3.5vw;
        font-family: "markProRegular", sans-serif;
        font-weight: 400;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    
    .ms-btn-learn-3:hover {
        color: #61c17e;
    }
    
    .ms-card-anim-3:hover .ms-btn-hover-3 {
        transition: 0.3s ease-in-out;
        bottom: 6.5vw !important;
        opacity: 1 !important;
    }
    
    .ms-card-anim-3:hover .ms-btn-hover-learn-3 {
        transition: 0.3s ease-in-out;
        bottom: 8.5vw !important;
        opacity: 1 !important;
    }
    
    /* Separator Text Mobile - STANDARDIZED */
    .ms-separator-text {
        width: 90vw;
        max-width: 90vw;
        margin: 80px auto 100px;
        padding: 0 20px;
        position: relative;
        z-index: 1;
    }
    
    /* Separator body text - STANDARDIZED */
    .ms-separator-copy {
        font-size: 4vw;
        font-family: "markProRegular", sans-serif;
        line-height: 1.5;
        margin-bottom: 20px;
        font-weight: 400;
        color: #111;
    }
    
    /* Separator buttons - STANDARDIZED */
    .ms-separator-demo-btn {
        font-size: 4vw;
        font-family: "markProBold", sans-serif;
        padding: 12px 30px;
        border-radius: 6px;
        font-weight: 700;
    }
    
    /* Recommendations Section Mobile - STANDARDIZED */
    .ms-recommendations-section {
        padding: 100px 20px;
        position: relative;
        z-index: 2;
        background: #fff;
        margin-top: 100px;
    }
    
    .ms-recommendations-wrap {
        flex-direction: column;
        gap: 30px;
    }
    
    /* Main heading - STANDARDIZED */
    .ms-recommendations-heading {
        font-size: 8vw;
        font-family: "markProBlack", sans-serif;
        text-align: center;
        line-height: 1.2;
    }
    
    /* Section subheading - STANDARDIZED */
    .ms-recommendations-title {
        font-size: 4.5vw;
        font-family: "markProBold", sans-serif;
        text-align: center;
        letter-spacing: 0.2vw;
    }
    
    /* Body text - STANDARDIZED */
    .ms-recommendations-desc {
        font-size: 4vw;
        font-family: "markProRegular", sans-serif;
        text-align: center;
        line-height: 1.5;
    }
    
    /* Case Studies Section Mobile - STANDARDIZED */
    .ms-case-studies-section {
        padding: 100px 20px;
        position: relative;
        z-index: 2;
        background: #ffffff;
        margin-top: 100px;
    }
    
    /* Main heading - STANDARDIZED */
    .ms-case-studies-heading {
        font-size: 8vw;
        font-family: "markProBlack", sans-serif;
        text-align: center;
        margin-bottom: 30px;
        line-height: 1.2;
    }
    
    /* Success story cards - 1 per row on tablet portrait */
    .ms-case-studies-container {
        flex-direction: column;
        align-items: center;
        max-width: 85vw;
        gap: 4vh;
    }
    
    .ms-story-card {
        width: 85vw;
        height: auto;
        min-height: 45vw;
    }
    
    .ms-story-flag {
        width: 5vw;
    }
    
    .ms-story-content {
        padding: 5vw;
        padding-right: 8vw;
    }
    
    .ms-story-logo {
        min-height: 8vw;
        margin-bottom: 2vw;
    }
    
    .ms-story-logo img {
        max-width: 25vw;
        max-height: 8vw;
    }
    
    .ms-story-label {
        font-size: 2.2vw;
        line-height: 3vw;
        letter-spacing: 0.2vw;
        margin: 2vw 0 auto 0;
    }
    
    .ms-story-btn {
        font-size: 2.5vw;
        padding: 2vw 4vw;
        border-radius: 1vw;
        opacity: 1;
        margin-top: 2vw;
    }
    
    .ms-view-all-btn {
        font-size: 2.5vw;
        padding: 2vw 5vw;
        border-radius: 1vw;
    }
}

@media (max-width: 480px) {
    .ms-hero {
        padding: 60px 16px;
    }

    .ms-hero h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .ms-hero-cta {
        flex-direction: column;
        gap: 10px;
    }

    .ms-hero-cta .btn {
        padding: 11px 20px;
        font-size: 0.9rem;
    }

    .ms-badge img {
        height: 50px;
    }

    .ms-scroll img {
        height: 35px;
    }

    .ms-scroll p {
        font-size: 0.7rem;
    }

    .ms-section-title {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }

    .ms-product-card {
        padding: 20px 16px;
    }

    .ms-product-header h3 {
        font-size: 0.75rem;
    }

    .ms-product-name {
        font-size: 1.1rem;
    }

    .ms-product-cta {
        gap: 10px;
    }

    .ms-product-cta .btn-link {
        font-size: 0.9rem;
    }

    .ms-case-study-card {
        padding: 24px 16px;
        gap: 12px;
    }

    .ms-flag {
        height: 35px;
    }

    .ms-logo {
        height: 50px;
    }

    .ms-recommendations-section,
    .ms-case-studies-section {
        padding: 60px 16px;
    }

    .ms-recommendations-section h2,
    .ms-case-studies-section h2 {
        font-size: 1.5rem;
    }

    .ms-section-cta {
        padding: 30px 16px;
        margin-top: 40px;
    }

    .ms-section-cta p {
        font-size: 0.95rem;
    }
    
    /* Success story cards - 1 per row on mobile */
    .ms-case-studies-container {
        max-width: 90vw;
        gap: 5vh;
    }
    
    .ms-story-card {
        width: 90vw;
        min-height: 55vw;
    }
    
    .ms-story-flag {
        width: 6vw;
        right: 2vw;
    }
    
    .ms-story-content {
        padding: 6vw;
        padding-right: 10vw;
    }
    
    .ms-story-logo {
        min-height: 10vw;
        margin-bottom: 3vw;
    }
    
    .ms-story-logo img {
        max-width: 35vw;
        max-height: 10vw;
    }
    
    .ms-story-label {
        font-size: 3.2vw;
        line-height: 4.5vw;
        letter-spacing: 0.3vw;
        margin: 3vw 0 auto 0;
    }
    
    .ms-story-btn {
        font-size: 3.5vw;
        padding: 3vw 6vw;
        border-radius: 1.5vw;
        margin-top: 3vw;
    }
    
    .ms-view-all-btn {
        font-size: 3.5vw;
        padding: 3vw 7vw;
        border-radius: 1.5vw;
    }
    
    .ms-case-studies-heading {
        font-size: 9vw !important;
        line-height: 10vw !important;
    }
}

/* ==================== MICROSOFT SOLUTIONS UNIFIED LAYOUT FIX ==================== */
/*
   The original unified section used heavy absolute positioning with fixed `top` values,
   which caused overlapping when fonts, viewport, or card heights differ slightly.
   The rules below keep the visual idea (big 1/2/3 + slash + title) but let
   headers, cards, separator texts, and the CTA box flow naturally in document order.
*/

/* Let the unified section grow with its content instead of relying on min-height + absolutes */
#ms-solutions-section-unified {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 8vw 0 8vw;
    overflow: visible;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
}

.ms-content-wrapper {
    padding: 0 0 6vw;
}

/* Section headers: big number, slash, and title inline, not absolutely placed */
.ms-section-1-header,
.ms-section-2-header,
.ms-section-3-header {
    position: relative;
    top: 0;
    left: auto;
    transform: none;
    width: 75vw;
    max-width: 75vw;
    margin: 0 auto 4vw;
    font-size: inherit;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: left;
}

.ms-section-1-bgnum,
.ms-section-2-bgnum,
.ms-section-3-bgnum {
    position: static;
    display: inline-block;
    font-family: 'markProBlack', sans-serif;
    font-size: 26vw;
    color: #bcd1e7;
    opacity: 0.7;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    vertical-align: bottom;
    margin-right: 8vw;
}

.ms-section-1-slash,
.ms-section-2-slash,
.ms-section-3-slash {
    position: static;
    display: inline-block;
    font-family: 'markProBold', sans-serif;
    font-size: 8vw;
    line-height: 1;
    margin: 0 3vw 0 0;
    vertical-align: bottom;
}

.ms-section-1-title,
.ms-section-2-title,
.ms-section-3-title {
    position: static;
    display: inline-block;
    font-family: 'markProRegular', sans-serif;
    font-size: 3.8vw;
    line-height: 1.3;
    letter-spacing: 0.02vw;
    vertical-align: bottom;
}

/* Card containers now flow vertically with margins instead of fixed `top` offsets */
.ms-cards-container-1,
.ms-cards-container-2,
.ms-products-grid-3 {
    position: relative;
    width: 75vw;
    max-width: 75vw;
    margin: 0 auto 4vw;
    left: auto;
    top: auto;
    transform: none;
}

/* Limit Dynamics (Section 2) container width so flex-wrap creates a 3+2 layout */
#ms-solutions-section-unified .ms-cards-container-2 {
    width: 60vw;
    max-width: 60vw;
}

/* Limit Section 1 container width so card spacing matches Section 2 */
#ms-solutions-section-unified .ms-cards-container-1 {
    width: 60vw;
    max-width: 60vw;
}

/* Separator texts sit between sections with normal margin */
.ms-separator-text {
    position: relative;
    top: auto;
    width: 75vw;
    max-width: 75vw;
    margin: 2.5vw auto 4vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2vw;
}

.ms-separator-copy {
    font-family: 'markProRegular', sans-serif;
    font-size: 1.1vw;
    line-height: 1.6;
    font-weight: 400;
    color: #333;
}

/* Override for mobile - ensure separator text is highly visible */
@media (max-width: 768px) {
    .ms-separator-copy {
        font-size: 4vw !important;
        font-weight: 400 !important;
        color: #111 !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    
    .ms-separator-demo-btn {
        font-size: 4vw !important;
        padding: 12px 30px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }
}

.ms-separator-demo-btn {
    background: #345cad;
    color: #fff;
    border: none;
    border-radius: 0.25vw;
    padding: 0.6vw 1.8vw;
    font-family: 'markProBold', sans-serif;
    font-size: 0.9vw;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-block;
}

.ms-separator-demo-btn:hover {
    transform: translateY(-0.1vw);
    box-shadow: 0 0.5vw 1.5vw rgba(61, 51, 147, 0.25);
}

/* CTA box at the bottom of the unified section */
.ms-section-cta-box {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 56vw;
    margin: 4vw auto 0;
}