/* ==================================================
   DYNAMICS 365 BUSINESS CENTRAL PAGE
   Complete styling matching live site
   Last updated: Nov 24, 2025
   ================================================== */

/* ==================== SECTION 1 - HERO ==================== */
/* Business Central hero section (independent from homepage) */
#bcHeroSection {
    position: relative;
    width: 100vw;
    height: 92vh;
    overflow: hidden;
}

#bcHeroCopy {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    top: 24vh;
    text-align: left;
    width: auto;
}

/* Small text on top - all on one line */
.bcSubTitle {
    font-family: "markProLight";
    font-size: 1.1vw;
    letter-spacing: 0.25vw;
    color: #000;
    display: block;
    margin: 0 0 2vh 0;
    position: relative;
    white-space: nowrap; /* prevent MICROSOFT DYNAMICS 365 from wrapping */
}

/* Large text below */
.bcMainTitle {
    font-family: "markProBlack";
    font-size: 6vw;
    line-height: 1;
    letter-spacing: -0.15vw;
    color: #000;
    display: inline-block;
    margin: 0;
    position: relative;
}

/* Green bar after BUSINESS */
.bcMainTitle:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 2.4vw;
    height: 0.6vw;
    background: #61c17e;
    margin-left: 1.2vw;
}

/* Blue bar after CENTRAL */
.bcMainTitle:nth-of-type(3)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 2.4vw;
    height: 0.6vw;
    background: #2b76b9;
    margin-left: 1.2vw;
}

/* Generic section divider for Business Central */
.bc-divider {
    width: 100%;
    padding: 8vh 0 4vh;
    text-align: center;
}

.bc-divider-text {
    display: inline-block;
    font-family: "markProExtraLight";
    font-size: 4.2vw;
    line-height: 1.1;
    letter-spacing: -0.3vw;
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
    background-repeat: repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient text styling for section heads - from live site */
.gradientType {
    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;
}

/* ==================== SECTION 2 - WHAT IS BC ==================== */
#bizSolSec2 {
    position: relative;
    height: auto;
    width: 99.375vw;
    background-color: #F5F8F5;
    box-shadow: 0 0 12px 0.5px rgba(111, 185, 126, 0.8) !important;
    display: inline-block;
    overflow-y: visible !important;
    overflow-x: clip;
    padding-bottom: 10vh;
}

.sectionTitleSpan {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: auto;
    width: 64.53vw;
    margin-top: 7.45vw;
    margin-left: 21.56vw;
}

.sectionHead {
    position: relative;
    font-family: "markProHeavy", sans-serif;
    font-size: 5.89vw;
    line-height: 6.0938vw;
    left: 0;
    top: 0;
    width: 28.54vw;
}

.titleRightDiv {
    position: relative;
    height: auto;
    width: 31.82vw;
    margin-top: 1.67vw;
}

/* WHAT IS MICROSOFT DYNAMICS 365 BC? */
.sectionSubHead {
    text-transform: uppercase;
    position: relative;
    font-family: "markProRegular", sans-serif;
    font-size: 1.56vw;
    letter-spacing: 0.3125vw;
    line-height: 2.29vw;
    margin-top: 0;
    margin-left: 7.97vw;
}

/* Animated underline under the sub-head */
.sectionTitleLine {
    position: relative;
    margin-top: 1.46vw;
    height: 0.05vw;
    width: 17.97vw;
    background-color: black;
    animation: scale-up-hor-left 3s ease-in-out infinite alternate-reverse both;
}

.sectionDescription {
    position: relative;
    font-family: "markProRegular", sans-serif;
    font-size: 0.94vw;
    letter-spacing: 0.0187vw;
    line-height: 1.1719vw;
    margin-top: 1.56vw;
    margin-left: 7.97vw;
    width: 19.79vw;
}

/* Video iframe */
#solutionVideo {
    position: relative;
    height: 37.71vw;
    width: 56.56vw;
    margin-left: 21.67vw;
    margin-top: 5.42vw;
}

/* CTA Section */
.solutionsCtaDiv {
    position: relative;
    height: auto;
    width: 32.29vw;
    margin-left: 33.85vw;
    margin-top: 8.85vw;
    margin-bottom: 11.3vw;
}

.ctaType {
    position: relative;
    font-family: "markProRegular", sans-serif;
    font-size: 2.08vw;
    line-height: 2.08vw;
    text-align: center;
}

.ctaBtnDiv {
    position: relative;
    height: auto;
    width: 19.27vw;
    display: flex;
    justify-content: space-between;
    margin-top: 2.03vw;
    margin-left: 6.51vw;
}

.ctaBtnPos {
    position: relative;
}

/* Match global mpBtnDesign / lpBtnDesign styles from main.css */
.mpBtnDesign {
    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;
    color: black;
}

.mpBtnDesign:hover {
    color: white;
    background: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) border-box;
    transition: background 1s ease-in-out;
}

.lpBtnPos {
    position: relative;
    align-self: center;
    margin-left: 2vw;      /* spacing between Get Demo button and BC Resources link */
    padding: 0;            /* let .lpBtnDesign control text size only */
    background: transparent;
    border: none;
    cursor: pointer;
}

.lpBtnPos:hover {
    background: transparent;  /* keep hover color from .lpBtnDesign only */
}

/* ==================== SECTION 3 - FEATURES ==================== */
#bizSolSec3 {
    position: relative;
    height: auto;
    width: 99.375vw;
    background-color: #F4F8FC;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8) !important;
    display: inline-block;
    overflow-y: visible !important;
    overflow-x: clip;
    padding-bottom: 10vh;
}

#expandFeatures {
    text-align: center;
    margin: 6vh 0 8vh 0;
}

#expandFeatures p {
    font-family: "markProLight", sans-serif;
    font-size: 1vw;
    color: #555;
    margin: 0 0 2.5vh 0;
}

/* Features Grid - matching live site exactly */
.featuresGrid {
    position: relative;
    height: auto;
    width: 56.67vw;
    margin-left: 21.56vw;
    margin-top: 8vh;
    overflow-x: clip;
}

/* Feature Div wrapper */
.featureDiv {
    position: relative;
    height: auto;
    width: 56.67vw;
    margin-top: 17.19vw;
    overflow-x: clip;
}

/* Serial Number (01, 02, etc) with line after */
.serialNumber {
    position: relative;
    top: 0;
    left: 0;
    font-family: "markProBlack", sans-serif;
    font-size: 5.89vw;
    color: #345cad;
}

.serialNumber::after {
    content: "";
    position: absolute;
    background-color: black;
    height: 0.05vw;
    width: 43.65vw;
    margin-left: 6.51vw;
    margin-top: 3.65vw;
}

/* Content Container (flex for text + icon) */
.contentContainer {
    position: relative;
    margin-top: 2.86vw;
    display: flex;
    justify-content: space-between;
    height: 10.16vw;
    width: inherit;
}

/* Copy Container (text content) */
.copyContainer {
    height: auto;
    align-self: center;
    width: 37.03vw;
}

.featureSubHead {
    font-family: "markProRegular", sans-serif;
    color: #345cad;
    text-transform: uppercase;
    font-size: 1.3vw;
    letter-spacing: 0.31vw;
}

.featureCopy {
    margin-top: 0.89vw;
    font-family: "markProHeavy", sans-serif;
    font-size: 3.65vw;
    line-height: 4.17vw;
}

.featureDescription {
    margin-top: 2.76vw;
    font-family: "markProRegular", sans-serif;
    font-size: 1.56vw;
    line-height: 1.98vw;
}

/* Icon Container - using object tag like live site */
.iconContainer {
    height: auto;
    width: auto;
}

/* ==================== SECTIONS 4-7 - RESOURCES ==================== */
#bizSolSec4,
#bizSolSec5,
#bizSolSec6,
#bizSolSec7 {
    position: relative;
    height: auto;
    width: 99.375vw;
    display: inline-block;
    overflow-y: visible;
    overflow-x: clip;
}

#bizSolSec4 {
    background: white;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8) !important;
    padding-top: 8vh;
    padding-bottom: 10vh;
}

#bizSolSec5 {
    background-color: #F4F8FC;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8) !important;
    padding-top: 8vh;
    padding-bottom: 10vh;
}

#bizSolSec6 {
    background: white;
    padding-top: 8vh;
    padding-bottom: 10vh;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8) !important;
}

/* Unified shadow divider between Business Central sections */
#bizSolSec2::after,
#bizSolSec3::after,
#bizSolSec4::after,
#bizSolSec5::after,
#bizSolSec6::after,
#bizSolSec7::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #8fb5e2;
    box-shadow: 0 12px 24px -12px rgba(40, 84, 162, 0.6);
}

#bizSolSec7 {
    background-color: #F4F8FC;
    box-shadow: 0 0 12px 0.5px rgba(40, 84, 162, 0.8);
    padding-top: 8vh;
    padding-bottom: 10vh;
}


.resourceCard {
    background: white;
    padding: 5vh 4vw;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-top: 5vh;
    max-width: 70vw;
}

.resourceCard h3 {
    font-family: "markProLight", sans-serif;
    font-size: 1.5vw;
    color: #888;
    margin: 0 0 1vh 0;
}

.resourceCard h2 {
    font-family: "markProBold", sans-serif;
    font-size: 2.5vw;
    color: #2b76b9;
    margin: 0 0 3vh 0;
}

.resourceCard p {
    font-family: "markProLight", sans-serif;
    font-size: 1.1vw;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* ==================== RESPONSIVE ==================== */

/* Tablet landscape and smaller desktops */
@media (max-width: 1024px) {
    #bcHeroCopy {
        left: 50%;
        top: 20vh;
    }
    
    .bcSubTitle {
        font-size: 1.4vw;
        letter-spacing: 0.2vw;
    }
    
    .bcMainTitle {
        font-size: 7vw;
    }
    
    .sectionTitleSpan {
        width: 75vw;
        margin-left: 12.5vw;
        margin-top: 6vw;
    }
    
    .sectionHead {
        font-size: 6.5vw;
        line-height: 7vw;
        width: 35vw;
    }
    
    .titleRightDiv {
        width: 35vw;
    }
    
    .sectionSubHead {
        font-size: 1.8vw;
        margin-left: 5vw;
    }
    
    .sectionDescription {
        font-size: 1.2vw;
        line-height: 1.6vw;
        margin-left: 5vw;
        width: 28vw;
    }
    
    #solutionVideo {
        width: 70vw;
        height: 39.375vw;
        margin-left: 15vw;
    }
    
    .featuresGrid {
        width: 70vw;
        margin-left: 15vw;
    }
    
    .featureDiv {
        width: 70vw;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    #bcHeroSection {
        height: 70vh;
    }
    
    #bcHeroCopy {
        left: 50%;
        top: 18vh;
        text-align: center;
    }
    
    .bcSubTitle {
        font-size: 2.5vw;
        letter-spacing: 0.3vw;
        margin-bottom: 1.5vh;
    }
    
    .bcMainTitle {
        font-size: 9vw;
        display: block;
        letter-spacing: -0.2vw;
    }
    
    .bcMainTitle:nth-of-type(2)::after,
    .bcMainTitle:nth-of-type(3)::after {
        display: none;
    }

    #bcHeroSection .scrollText {
        display: none;
    }
    
    #microsoftPartnerBadge {
        width: 35vw;
        height: auto;
    }
    
    .sectionTitleSpan {
        flex-direction: column;
        width: 85vw;
        margin-left: 7.5vw;
        margin-top: 8vh;
        gap: 3vh;
    }
    
    .sectionHead {
        font-size: 8vw;
        line-height: 8.5vw;
        width: 100%;
        text-align: center;
    }
    
    .titleRightDiv {
        width: 100%;
        margin-top: 0;
    }
    
    .sectionSubHead {
        font-size: 3vw;
        letter-spacing: 0.4vw;
        line-height: 4vw;
        margin-left: 0;
        text-align: center;
    }
    
    .sectionTitleLine {
        margin-left: auto;
        margin-right: auto;
        width: 30vw;
        height: 2px;
    }
    
    .sectionDescription {
        font-size: 2.2vw;
        line-height: 3.2vw;
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    #solutionVideo {
        width: 85vw;
        height: 47.8125vw;
        margin-left: 7.5vw;
        margin-top: 4vh;
    }
    
    .solutionsCtaDiv {
        width: 85vw;
        margin-left: 7.5vw;
        margin-top: 6vh;
        margin-bottom: 8vh;
    }
    
    .ctaType {
        font-size: 3.5vw;
        line-height: 4vw;
    }
    
    .ctaBtnDiv {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        gap: 2vh;
    }
    
    .mpBtnDesign {
        font-size: 2.5vw;
        padding: 2vw 5vw;
        border-radius: 1vw;
    }
    
    .lpBtnPos {
        margin-left: 0;
    }
    
    .featuresGrid {
        width: 85vw;
        margin-left: 7.5vw;
        margin-top: 5vh;
    }
    
    .featureDiv {
        width: 85vw;
        margin-top: 12vh;
    }
    
    .serialNumber {
        font-size: 10vw;
    }
    
    .serialNumber::after {
        width: 60vw;
        margin-left: 4vw;
        margin-top: 5vw;
        height: 2px;
    }
    
    .contentContainer {
        flex-direction: column;
        height: auto;
        gap: 3vh;
    }
    
    .copyContainer {
        width: 100%;
    }
    
    .featureSubHead {
        font-size: 2.5vw;
        letter-spacing: 0.4vw;
    }
    
    .featureCopy {
        font-size: 6vw;
        line-height: 6.5vw;
        margin-top: 1.5vh;
    }
    
    .featureDescription {
        font-size: 2.5vw;
        line-height: 3.5vw;
        margin-top: 2vh;
    }
    
    .iconContainer {
        width: 30vw;
        height: auto;
        margin: 0 auto;
    }
    
    .resourceCard {
        max-width: 85vw;
        padding: 4vh 6vw;
    }
    
    .resourceCard h3 {
        font-size: 2.5vw;
    }
    
    .resourceCard h2 {
        font-size: 4vw;
    }
    
    .resourceCard p {
        font-size: 2.2vw;
    }
}

/* Mobile landscape and large phones */
@media (max-width: 480px) {
    #bcHeroSection {
        height: 60vh;
    }
    
    #bcHeroCopy {
        top: 15vh;
        width: 90vw;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bcSubTitle {
        font-size: 3.5vw;
        letter-spacing: 0.5vw;
        margin-bottom: 2vh;
        white-space: normal;
    }
    
    .bcMainTitle {
        font-size: 11vw;
        letter-spacing: -0.3vw;
    }
    
    #microsoftPartnerBadge {
        width: 45vw;
        bottom: 8vh;
    }
    
    .scrollText {
        font-size: 3.5vw;
        bottom: 3vh;
    }
    
    #seor {
        width: 50vw;
        height: auto;
    }
    
    .sectionTitleSpan {
        width: 90vw;
        margin-left: 5vw;
        margin-top: 6vh;
        flex-direction: column;
        gap: 3vh;
    }
    
    .sectionHead {
        font-size: 9vw;
        line-height: 10vw;
        width: 100%;
        text-align: center;
    }
    
    .sectionSubHead {
        font-size: 3.8vw;
        letter-spacing: 0.5vw;
        line-height: 5vw;
        margin-left: 0;
        text-align: center;
    }
    
    .sectionTitleLine {
        width: 40vw;
        margin-top: 2vh;
        margin-left: auto;
        margin-right: auto;
    }
    
    .sectionDescription {
        font-size: 3.5vw;
        line-height: 5vw;
        margin-top: 2vh;
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    #solutionVideo {
        width: 90vw;
        height: 50.625vw;
        margin-left: 5vw;
        margin-top: 5vh;
        display: block;
        order: 2;
    }
    
    .solutionsCtaDiv {
        width: 90vw;
        margin-left: 5vw;
        margin-top: 5vh;
        margin-bottom: 6vh;
        order: 3;
    }
    
    .ctaType {
        font-size: 4.5vw;
        line-height: 5.5vw;
    }
    
    .ctaBtnDiv {
        margin-top: 3vh;
    }
    
    .mpBtnDesign {
        font-size: 3.5vw;
        padding: 3vw 7vw;
        border-radius: 1.5vw;
        white-space: nowrap;
    }
    
    .lpBtnDesign {
        font-size: 3.5vw;
    }
    
    .featuresGrid {
        width: 90vw;
        margin-left: 5vw;
    }
    
    .featureDiv {
        width: 90vw;
        margin-top: 10vh;
    }
    
    .serialNumber {
        font-size: 12vw;
    }
    
    .serialNumber::after {
        width: 70vw;
        margin-left: 3vw;
        margin-top: 6vw;
    }
    
    .featureSubHead {
        font-size: 3.2vw;
        letter-spacing: 0.5vw;
    }
    
    .featureCopy {
        font-size: 7vw;
        line-height: 7.5vw;
    }
    
    .featureDescription {
        font-size: 3.5vw;
        line-height: 5vw;
    }
    
    .iconContainer {
        width: 40vw;
    }
    
    .resourceCard {
        max-width: 90vw;
        padding: 3vh 5vw;
        margin-top: 4vh;
    }
    
    .resourceCard h3 {
        font-size: 3.5vw;
    }
    
    .resourceCard h2 {
        font-size: 5.5vw;
        margin-bottom: 2vh;
    }
    
    .resourceCard p {
        font-size: 3.5vw;
        line-height: 1.6;
    }
}

/* Small mobile phones */
@media (max-width: 320px) {
    #bcHeroSection {
        height: 55vh;
    }
    
    #bcHeroCopy {
        top: 12vh;
    }
    
    .bcSubTitle {
        font-size: 4vw;
        letter-spacing: 0.6vw;
    }
    
    .bcMainTitle {
        font-size: 12vw;
    }
    
    #microsoftPartnerBadge {
        width: 50vw;
    }
    
    .sectionHead {
        font-size: 10vw;
        line-height: 11vw;
    }
    
    .sectionSubHead {
        font-size: 4.2vw;
        line-height: 5.5vw;
    }
    
    .sectionDescription {
        font-size: 4vw;
        line-height: 5.5vw;
    }
    
    .ctaType {
        font-size: 5vw;
    }
    
    .mpBtnDesign {
        font-size: 4vw;
        padding: 3.5vw 8vw;
    }
    
    .serialNumber {
        font-size: 14vw;
    }
    
    .featureSubHead {
        font-size: 3.8vw;
    }
    
    .featureCopy {
        font-size: 8vw;
        line-height: 8.5vw;
    }
    
    .featureDescription {
        font-size: 4vw;
        line-height: 5.5vw;
    }
}

/* ==================== ANIMATIONS ==================== */
.scale-up-br {
    animation: scale-up-br 1.5s ease-out infinite;
}

@keyframes scale-up-br {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.buttonStructure {
    transition: all 0.3s ease;
}

.buttonStructure:active {
    transform: scale(0.95);
}