:root{
    --node-outline: rgba(88, 166, 255, 0.69);
    --deep-blue: #21304E;
    --dark-blue: #0055A3;
    --light-blue: #88BAF4;
    --light-blue-25: rgba(136, 186, 244, 0.25);
    --light-blue-gray: #DDE7FF;
    --light-blue-gray-95: rgba(221, 231, 255, 0.95);
    /*--light-gray: #EEEEEE;*/
    --light-gray: #f8faff;
    --gray: #BCBCBC;
    --accent: #FF8C42;
    --accent-blue: #007bff;
    --nav-height: 100px;
    --paragraph-color: #333333;
}

html {
    /*scroll-behavior: smooth;*/
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: var(--light-gray);
    overflow: hidden;
    height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 65ch;
    color: var(--paragraph-color);
}

.main{
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    /*top: var(--nav-height);*/
    /*height: calc(100vh - var(--nav-height));*/
    top: calc(var(--nav-height) + 40px); /* with Announce Banner */
    height: calc(100dvh - (var(--nav-height) + 40px)); /* with Announce Banner */
    width: 100vw;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

/* For Chrome, Edge, and Safari */
.main::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.main::-webkit-scrollbar-track {
    background: transparent; /* Background of the scrollbar track */
    border-radius: 5px; /* Rounded corners on the track */
}

.main::-webkit-scrollbar-thumb {
    background-color: var(--light-blue); /* Color of the scrollbar thumb */
    border-radius: 5px; /* Rounded corners on the thumb */
    border: 2px solid #f0f0f0; /* Adds space around the thumb */
}

.main::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3; /* Darker color when hovered */
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.box-shadow {
    border-radius: 8px;
    border: 1px solid #c2c2c2;
    box-shadow: -4px 4px 4px 0px rgb(150 150 150 / 25%);
}


/*--- Fonts ---*/
h1, .h1 {
    font-size: 48px;
    font-weight: normal;
    margin-bottom: 0;
}

h2, .h2 {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 300;
}

h3, .h3 {
    font-size: 24px;
    font-weight: normal;
}

.subhead {
    font-size: 24px;
    text-transform: lowercase;
    font-weight: 300;
    margin-bottom: -30px;
}


/*--- Buttons and Links ---*/
button,
.btn {
    background-color: var(--dark-blue);
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

button:hover,
.btn:hover,
.email-signup button:hover {
    cursor: pointer;
    background-color: var(--accent-blue);
    text-decoration: none;
}

.btn.secondary {
    background-color: #f4f4f4;
    color: var(--paragraph-color);
    outline: 1px solid var(--gray);
}

.btn.secondary:hover {
    background-color: var(--light-blue-gray);
}

.txt-link {
    text-decoration: none;
    color: #000;
}

.txt-link.btn-txt {
    padding: 10px;
}

.txt-link:hover {
    cursor: pointer;
    text-decoration: underline;
}

.txt-link.no-link:hover {
    /*text-decoration: none;*/
    cursor: default;
}

.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    /*justify-content: center;*/
}

a {
    text-decoration: none;
    color: #000;
}

a:hover, a:focus {
    text-decoration: underline;
    cursor: pointer;
}

/*--- Shapes ---*/
.triangle,
.tilt {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.tri-up,
.tilt {
    transform: rotate(180deg);
}

.tri-up svg,
.tilt svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 78px;
    transform: rotateY(180deg);
}

.tilt svg {
    height: 120px;
}

.tri-up .shape-fill,
.tri-up-lf .shape-fill {
    fill: #FFFFFF;
}

.tri-dn .shape-fill {
    fill: var(--light-gray);
}

.tilt .shape-fill {
    fill: #1f53ba;
}

.tri-dn {
    position: absolute;
    top: -78px;
    bottom: unset;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: var(--light-blue);
}

.tri-dn.darkBlue {background-color: var(--deep-blue);}
.tri-dn.invertedLightBlue {background-color: transparent;}
.tri-dn.invertedLightBlue path{fill: var(--light-blue)}

.tri-dn svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 78px;
    transform: rotateY(180deg);
}


/*--- Header + Nav ---*/
#announce-banner {
    text-align: center;
    padding: 10px;
    background: var(--deep-blue);
    color: #fff;
}

#announce-banner a, #announce-banner span {
    color: var(--light-blue)
}

#announce-banner br { display: none; }

header {
    position: fixed;
    width: 100dvw;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    /*padding: 0 30px;*/
    height: var(--nav-height);
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    z-index: 100;
    /*box-sizing: border-box;*/
}

.header-content {
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    gap: 40px;
}

.headerSpacer {
    height: 100px;
}

.header-logo-nav {
    display: flex;
    align-items: center;
}

.header-logo-nav img {
    width: 40px;
    margin-right: 10px;
}

.nav-burger {
    display: none;
}

nav {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 40px;
    margin: 0;
    padding: 0;
}

/*--- Mega Menu ---*/
.has-mega-menu {
    position: relative;
}

.mega-menu {
    position: fixed;
    top: 140px;
    left: 0;
    width: 100vw;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
    z-index: 1000;
    transform: translateY(-10px);
}

.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.mega-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mega-menu-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none !important;
    color: #21304E;
}

.mega-menu-item:hover {
    background-color: #f5f8ff;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.mega-menu-item.mega-menu-item-highlight {
    background-color: #0055A3;
    color: #ffffff;
}

.mega-menu-item.mega-menu-item-highlight:hover {
    background-color: #004080;
}

.menu-item-icon {
    width: 40px;
    height: 40px;
    /*background-color: #88BAF4;*/
    /*border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 18px;
    color: #0055A3;
}

.mega-menu-item-highlight .menu-item-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

.menu-item-text {
    padding: 10px 3px 10px 0;
}

.mega-menu-item h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.mega-menu-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.8;
}

.mega-menu-item-highlight p {
    opacity: 0.9;
}

/* Specific menu adjustments */
.modules-menu .mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
}

.modules-menu .mega-menu-item:nth-child(10) {
    grid-column: 1;
}

.roles-menu .mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Bridge gap for smooth hover - extends hover area to prevent accidental closing */
.has-mega-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -50px;
    right: -50px;
    height: calc(var(--nav-height) + 10px);
    background: transparent;
    z-index: 999;
}

/* Keep menu open when hovering over the mega menu itself */
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/*--- Hero ---*/
.hero-wrapper {
    padding: 0;
    color: #000000;
    background-color: var(--deep-blue);
    /* scroll-snap-align: start; */
}

.hero {
    position: relative;
    background-image: url("/content/img/hero/contact-hero-blue.jpg"); /* default image */
    background-size: cover;
    background-position: center;
    max-width: 1600px;
    margin: 0 auto;
}

.hero:after {
    content: "";
    background-color: rgb(33 48 78 / 70%);
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
}

.hero-phrase {
    margin: 0;
    font-size: 3em;
    line-height: 1em;
}

.hero h1 {
    margin: 0;
}

.hero-content p {
    margin: 0;
    font-size: 1.2em;
    color: #FFFFFF;
}

.hero .txt-link {
    color: #FFFFFF;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 30px;
    height: 400px;
    position: relative;
    /* padding: 100px 50px; */
    box-sizing: border-box;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    z-index: 1;
}

/* ============================================================== */
/*  Home Page */
/* ============================================================== */
/*--- Home Hero ---*/
#home .hero-wrapper {
    background-color: var(--light-blue-gray);
}

#home .hero {
    background-image: url("/content/img/hero/mfg-prod-equip_2000.webp");
    background-size: cover;
    background-position: center;
    padding: 80px 0;

}

/* #home .hero:before { */
/*     content: ''; */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     width: 50%; */
/*     height: 100%; */
/*     background: linear-gradient(198deg, rgba(136, 186, 244, 0.90) -3.55%, rgba(236, 245, 255, 0.90) 80.41%); */
/*     z-index: 1; */
/* } */

#home .hero:after {
     background-color: unset;
 }

#home .hero-content {
    width: 50vw;
    z-index: 2;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 0 0 50px;
    text-align: left;
    color: #000000;
    height: clamp(300px, 60dvh, 400px);
    border-radius: 8px;
    background: linear-gradient(198deg, rgba(136, 186, 244, 0.80) -3.55%, rgba(236, 245, 255, 0.80) 80.41%);
    /* background: rgba(172,196,232,0.8); */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(94, 152, 255, 0.8);
}

#home .hero-content p {
    color: var(--paragraph-color);
}


/*--- Email Signup ---*/
.email-signup {
    display: flex;
}

.email-signup input:focus {
    outline: 1px solid var(--dark-blue);
}

.email-signup input {
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px 0 0 5px;
    width: 100%;
}

.email-signup button {
    background-color: var(--dark-blue);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}


/*--- Home Features ---*/
.features {
    background-color: var(--light-gray);
    display: flex;
    justify-content: center;
    position: relative;
    padding-bottom: 100px;
    flex-direction: column;
    align-items: center;
}

.features .features-head {
    background-color: var(--light-gray);
    z-index: 10;
    padding: 40px 0 60px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.features .container {
    display: flex;
    width: clamp(300px, 80%, 1200px);
    padding: 50px 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 120px;
    scroll-snap-type: y mandatory;
}

.features .container .feature {
    width: 100%;
    height: 450px;
    /* height: clamp(200px, calc(100vh - var(--nav-height)), 450px); */
    box-sizing: border-box;
    /* padding-top: 200px; */
    display: flex;
    flex-direction: row;
    gap: 30px;
    position: relative;
    /* scroll-snap-align: center; */
}

.features .container .feature .text {
    width: 60%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    /*align-items: flex-start;*/
}

.features .container .feature .img {
    width: 40%;
    text-align: center;
}

.features .container .feature .img > img {
    border-radius: 25px;
    border: 1px solid #C2C2C2;
    background: #FFF;
    box-shadow: -4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    max-height: 100%;
}


.features .container .feature:last-of-type {
    padding-bottom: 60px;
}

.feature * {
    z-index: 5;
    margin: 0;
    /*text-align: left;*/
}

.feature .stats {
    font-style: italic;
}

.feature .stats span {
    background-color: var(--light-blue);
    border-radius: 65px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-size: 1.8em;
    user-select: none;
    margin-right: 5px;
    font-style: normal;
    font-weight: 400;
}

.feature .disclaimer {
    font-size: .7em;
    font-style: italic;
    max-width: 370px;
    margin-top: 50px;
}

.feature .kpi-list {
    display: flex;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.feature .kpi i {
    font-size: 3em;
    color: var(--light-blue);
    padding-bottom: 15px;
}

.feature .kpi .stats {
    margin: 20px auto;
}

/*.features .feature p {*/
/*    max-width: 600px;*/
/*    text-align: center;*/
/*}*/

.network {
    position: absolute;
    width: 80%;
    height: 450px;
    z-index: 0;
    opacity: 0.4;
}

.network.cube {
    position: absolute;
    width: 650px;
    height: 450px;
    z-index: 0;
}

.features .container .feature .node {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--light-gray);
    border: 1px solid var(--node-outline);
    border-radius: 50%;
    animation: pulse 2s infinite;
    transform: translateX(-50%) translateY(-50%);
    transform-origin: center;
    z-index: 2;
}

.features .container .feature *.lines {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.lines line {
    stroke: var(--node-outline);
    stroke-width: 1;
    animation: draw 6s infinite;
}

@keyframes draw {
    0% {
        stroke-dasharray: 0, 500;
    }
    50% {
        stroke-dasharray: 500, 500;
    }
    100% {
        stroke-dasharray: 0, 500;
    }
}

/*--- Home Sections ---*/

.section-head p {
    max-width: 600px;
    text-align: center;
}

/* --- Testimonials --- */
.testimonial-container {
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 80px 0;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 10px 10px 0 var(--dark-blue);
    border-radius: 25px;
}

.left-section {
    width: 50%;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

.quote-icon {
    font-size: 100px;
    color: var(--light-blue);
    opacity: 0.25;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 1;
}

.focus-text {
    font-size: 2.5em;
    color: var(--deep-blue);
    margin: 20px 0;
    z-index: 2;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 4.8px;
    text-transform: uppercase;
    position: relative;
}

.quote-icon.end {
    top: unset;
    left: unset;
    bottom: -30px;
    right: 0;
}

.right-section {
    width: 50%;
    padding: 20px;
}

.testimonial-text {
    color: var(--paragraph-color);
    font-style: italic;
    text-align: left;
}

.testimonial-author {
    font-size: 1em;
    color: #1e2b49;
    font-weight: normal;
    text-align: left;
}


/*--- Client Videos ---*/
.client-vid-wrapper {
    background: var(--light-blue);
    padding: 80px 20px;
    text-align: center;
}

.testimonial-container.client-video {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.testimonial-container.client-video .left-section {
    aspect-ratio: 19 / 10;
    width: 60%;
}

.testimonial-container.client-video .left-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-container.client-video .right-section {
    width: 40%;
}


/* --- Home Modules --- */
.module-section {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--deep-blue);
    color: #000000;
    padding: 50px 20px;
    text-align: center;
}

.module-section .section-head,
.module-section .section-head p {
    color: var(--light-gray)
}

.section-head {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px 0;
}

section.slideParent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.slides-wrapper {
    margin: 0 auto 120px;
    max-width: 1600px;
}

.section-slide {
    /*justify-self: center;*/
    width: clamp(300px, 80%, 1200px);
    margin: 0 auto 0 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 600px;
    /*height: clamp(500px, calc(100vh - var(--nav-height)), 1000px);*/
    /*scroll-snap-align: center;*/

    h2, p {
        margin: 0;
    }

    .content {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        padding-right: 40px;
        overflow: hidden;
        flex-direction: column;
        max-width: 600px;
    }

    .content h2 {
        font-size: 36px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        letter-spacing: 3.6px;
        text-transform: uppercase;
    }

    .sliderOuter {
        height: 400px;
        width: 60vw;
        position: relative;
        padding: 50px 0;
    }

    .sliderOuter .slider {
        position: absolute;
        left: 150px;
        transition: left 1s ease-in-out 300ms;
        border-radius: 25px;
        border: 1px solid #C2C2C2;
        background: #FFF;
        box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.25);
        max-height: 100%;
    }

    .sliderOuter.active .slider {
        left: 0;
        /*max-height: 420px;*/
    }
}

.carousel-container {
    display: flex;
    align-items: center;
    width: clamp(600px, 100%, 1000px);
    /*max-width: 1000px;*/
    gap: 20px;
}

.carousel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    overflow: hidden;
    width: 100%;
    height: 300px;
}

.carousel-item {
    width: calc(33.33% - 40px);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 20px;
    color: #fff;
    transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
    opacity: 30%;
}

.carousel-item.active {
    opacity: 100%;
}

.carousel-item i {
    font-size: 2em;
}

.carousel-item svg {
    max-height: 40px;
    opacity: 60%;
}

.carousel-item svg path {
    fill: #ffffff;
}

.carousel-item h3 {
    font-size: 1.5em;
    margin: 10px 0;
    color: #ffffff;
}

.carousel-item p {
    font-size: 1em;
    color: #d4d4d4;
    margin-bottom: 20px;
}

.carousel-item .ci-info {
    max-height: 0;
    overflow: hidden;
}

.carousel-item.active .ci-info {
    max-height: 80px;
    transition: max-height 300ms;
    overflow: unset;
}

.learn-more-btn {
    display: inline-block;
    background-color: var(--accent-blue);
    /*padding: 10px 20px;*/
    /*color: #fff;*/
    /*border-radius: 5px;*/
    /*text-decoration: none;*/
}

.learn-more-btn:hover {
    background-color: var(--dark-blue);
}

.arrow {
    /* width: 40px; */
    aspect-ratio: 1;
    height: 40px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
}

.left-arrow {
}

.right-arrow {
}

/* ============================================================== */
/*  Modules Suppage */
/* ============================================================== */
#modules .hero {
    background-image: url("/content/img/hero/mfg-making_2000.webp");
    background-size: cover;
    background-position: center;
}

.mod-diagram, .mod-screenshot-mobile { display: none; }

.mod-list {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--light-gray);
    color: #000000;
    padding: 50px 20px;
    text-align: center;

    .mod-list-img {
        position: sticky;
        top: 60px;
        width: 100%;
        max-width: 1200px;
        height: 600px;
        left: -50%;
        overflow: hidden;
        /*background-color: #5e8aa1;*/
    }

    .mod-list-img img:first-child {
        max-width: 1000px;
        margin: 0 auto;
    }

    .mod-list-img img {
        width:100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 500ms ease-in-out;
        border-radius: 10px;
    }

    .mod-list-img img:not(:first-child) {
        padding: 30px 280px 0 30px;
        box-sizing: border-box;
        min-height: 480px;
        background-color: #FFFFFF;
        object-fit: cover;
        object-position: left top;
    }

    .mod-list-img img.active {opacity: 1}

    .mod-list-content {
        position: relative;
        margin: 50px 0 0 auto;
        width: 50%;
        overflow: visible;
        border-radius: 30px;
        background-color: var(--light-blue-gray-95);
        text-align: left;
        padding: 25px 50px 150px;
        box-sizing: border-box;
        bottom: -100px;
        box-shadow: -4px -4px 4px 0 rgba(31, 83, 186, 0.25);
    }

    .mod-list-content > div {
        display: flex;
        flex-direction: column;
        overflow: visible;
        max-width: 800px;
        gap: 0;
    }

    .mod-list-content .mod-list-item {
        min-height: 400px;
        width: 100%;
        padding-bottom: 120px;
    }

    .mod-list-content .mod-list-item:last-child {padding-bottom: 0;}

        .mod-list-item ul{
        list-style-type: none;
        padding-left: 20px;
        display: flex;
        column-gap: 30px;
        row-gap: 15px;
        flex-wrap: wrap;
    }

    .mod-list-item ul.color-key {
        margin-top: 0;
        background: var(--light-gray);
        width: fit-content;
        padding: 5px 10px;
        font-size: .75em;
        min-width: 160px;
    }

    .mli-submods .submods-heading {
        display: flex;
        align-items: flex-start;
        margin-top: 24px;
        justify-content: space-between;
    }

    .mli-submods .submods-heading h3 {
        margin: 0;
    }

    .mli-submods li:before {
        content: '\f111'; /* FontAwesome Unicode */
        color: var(--dark-blue);
        font-family: 'Font Awesome 5 Pro';
        font-size: .5em;
        font-weight: 900;
        padding-right: 5px;
        position: relative;
        top: -2px;
    }

    .mli-submods li.upcoming:before {
        color: var(--accent);
    }

    .mli-other-mods li:after {
        content: '\f08e'; /* FontAwesome Unicode */
        color: var(--dark-blue);
        font-family: 'Font Awesome 5 Pro';
        font-size: .8em;
        padding-left: 5px;
    }

    /* .mod-list-content .mod-list-item:first-child{ border-radius: 30px 0 0 ;} */
    /* .mod-list-item{position: sticky; top: 100px; height: 400px; background-color: #1fad1f;} */
}

/* ============================================================== */
/*  Deployment Suppage */
/* ============================================================== */
#deployment .hero {
    background-image: url("/content/img/hero/warehouse-forklift_2000.webp");
    background-size: cover;
    background-position: center;
}

#deployment .tri-dn {
    background-color: var(--deep-blue);
}

/* ============================================================== */
/*  Pilot Suppage */
/* ============================================================== */
#pilot .hero {
    background-image: url("/content/img/hero/shop-floor_2000.webp");
    background-size: cover;
    background-position: center;
}

#trial h2 br { display: none; }


/* ============================================================== */
/*  Contact Suppage */
/* ============================================================== */
#contact .hero {
    background-image: url("/content/img/hero/contact-hero-blue.jpg");
    background-size: cover;
    background-position: center;
}

#contact .hero:after {
    background-color: unset;
}

/* --- Contact Intro --- */
.dual-block-container {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    margin: 80px auto;
    gap: 50px;
}

.dual-block-container .block {
    padding: 5px 50px 50px;
    background-color: #ffffff;
    box-shadow: 10px 10px 0 var(--dark-blue);
    border-radius: 25px;
    border: 1px solid #c2c2c2;
}

.dual-block-container .block-right {
    box-shadow: 10px 10px 0 var(--light-blue);
}


/* --- Contact Form --- */
.form-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 80px auto;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-container button {
    width: auto;
}

.form-subject {
    margin-bottom: 30px;
}

.form-row {
    display: flex;
    margin-bottom: 15px;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}

.form-input, .form-textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
}

.form-textarea {
    width: 100%;
    height: 100px;
    resize: none;
}

.submit-button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 0;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}


/* --- Contact Map --- */

#contact #map {
    background-image: unset;
    padding: 0;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

#map iframe {
    width: 100%;
    height: 100%;
    position: absolute;
}

#map .hero-content {
    width: 45%;
    z-index: 2;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
    max-width: 600px;
    margin: 0 auto 0 0;
    text-align: left;
    color: #000000;
    height: clamp(300px, 60dvh, 400px);
    background: linear-gradient(198deg, rgba(136, 186, 244, 0.80) -3.55%, rgba(236, 245, 255, 0.80) 80.41%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(94, 152, 255, 0.8);
}

#map .hero-content p {
    color: var(--paragraph-color);
}


/* --- Home Modules --- */
.packages-section {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--light-blue);
    color: #000000;
    padding: 50px 20px;
    text-align: center;
}


.pricing-table {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    padding: 0 20px;
    box-sizing: border-box;
}

.pricing-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: clamp(200px, 100vw, 300px);
    text-align: center;
}

.pricing-header {
    background-color: #1e3a72;
    color: #fff;
    padding: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

.pricing-card.starter .pricing-header {
    background-color: #007bff;
}

.pricing-card.enterprise .pricing-header {
    background-color: #007bff;
}

.pricing-features {
    list-style: none;
    padding: 20px;
    margin: 0;
    font-size: 1em;
    color: var(--paragraph-color);
    text-align: left;
    background-color: #ffffff;
}

.pricing-features li {
    padding: 10px 0;
}

.checkmark {
    color: #007bff;
    margin-right: 10px;
}



/* --- Getting Started --- */
.starting-section {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--light-gray);
    color: #000000;
    padding: 50px 20px 100px;
    text-align: center;
}

.stepContainer{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 50px;
}

.step {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.circle {
    width: 30px;
    height: 30px;
    background-color: #cccccc;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    margin-right: 20px;
    position: relative;
    z-index: 1;
}

.circle.active {
    background-color: var(--dark-blue);
}

.step-content {
    flex: 1;
}

.step-content h3 {
    margin: 0;
    color: var(--paragraph-color);
    font-size: 1.2em;
    font-weight: normal;
    text-align: left;
}

.step-content p {
    margin: 10px 0 20px;
    color: #666;
    line-height: 1.6;
    text-align: left;
    max-width: 600px;
}

.step-content .btn-group {
    justify-content: center;
}

.step:not(:last-child)::before {
    content: '';
    position: absolute;
    width: 2px;
    height: calc(100% + 30px);
    background-color: #cccccc;
    left: 14px;
    top: 30px;
    z-index: 0;
}

.step:last-child::before {
    height: 50px; /* Adjust height to match your content spacing */
}

.timeLine{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #000000;
    padding: 50px 20px 150px;
    text-align: center;
    background-color: var(--light-gray);

    .stepContainer{
        width: clamp(900px, 80%, 1200px);
        display: grid;
        grid-template-columns: 1fr 100px 100px 1fr;
        row-gap: 80px;
    }

    .circle{width: 25px; height: 25px; justify-self: center; z-index: 5}
    .circle.lightBlue,
    .circle.lightBlue::after{background-color: var(--light-blue)}
    .circle.darkBlue,
    .circle.darkBlue::after{background-color: var(--dark-blue)}
    .circle.orange,
    .circle.orange::after{background-color: var(--accent)}
    .circle.end::after{background: var(--light-gray); z-index: 1; width: 6px;}

    .step {
        display: flex;
        align-items: flex-start;
        position: relative;
    }

    h3{ font-weight: bold;}
    .rightAlign h3{text-align: right;}
    .rightAlign p{text-align: right;}

    .rightAlign{margin: -50px 0 0 0;}
    .circle.lightBlue{margin: -50px 0 0 0;}

    .circle::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 300px; /* Adjust as necessary */
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(12.5px);
        z-index: 0;
    }
}

.pre-footer-cta {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--light-blue);
    color: #000000;
    padding: 80px 20px;
    text-align: center;
    z-index: 10;

    p {
        max-width: 800px;
    }
}

.pre-footer-cta.dark {
    background-color: var(--deep-blue);
    color: #ffffff;
}

.pre-footer-cta.dark p {
    color: #ffffff;
}


/* --- Home Modules --- */
.packages-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px 20px;
    text-align: center;
    background-color: #ffffff;
}

.packages-table {
    display: grid;
    /* grid-template-columns: 300px repeat(3, minmax(200px, 1fr)); */
    grid-template-columns: 300px repeat(3, minmax(200px, 1fr));
    width: clamp(300px, 80%, 1200px);
    border-radius: 10px;
    overflow: hidden;
}

.header-row {
    display: flex;
}

.plan-header {
    flex: 1;
    padding: 20px;
    text-align: center;
    color: #fff;
    background-color: #007bff;
}

.plan-header h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
}

.plan-header .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
}

.standard {
    background-color: var(--deep-blue);
    box-shadow: 0px 0px 13px 0px #0A2860;
}

.item-category{
    font-weight: bold;
    font-size: 1.2em;
    background-color: var(--light-blue);
    height: 30px;

    &.spacer{grid-column: span 3;}
}

.packages-table > div:nth-child(5){border-radius: 10px 0 0 0;}


.item-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #007bff;
}

.item-name {
    flex: 1;
    color: #34495e;
    background-color: var(--light-blue-25);
}

.item-value {
    flex: 1;
    text-align: center;
    background-color: #f8f9fa;
    padding: 10px;
    color: #34495e;
}

.item-value:nth-child(even) {
    background-color: var(--light-gray);;
}

.item-row + .item-row {
    border-top: 0;
}


/* --- Footer --- */
.footer {
    /*background: linear-gradient(135deg, #1e3a72, #2a5298);*/
    background-image: url("/content/img/blurry-gradient-top.svg");
    background-size: cover;
    color: #fff;
    padding: 50px 20px;
    position: relative;
    /* scroll-snap-align: start; */
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    position: relative;

    img#ptb-icon {
        position: absolute;
        max-height: 350px;
        left: -50px;
        z-index: 1;
    }
}

.footer-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 15px;
}

.footer-links {
    flex: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}

.footer-column {
    flex: 1;
    padding: 0 15px;
}

.footer-column:last-of-type {
    border-left: 1px solid #ffffff;
}

.footer-column h3 {
    font-size: 1.2em;
    margin: 15px 0;
}

.footer-column h3 a, .footer a {
    color: #FFFFFF;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
    font-size: 1em;
}

.footer-column ul li a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #b0c4de;
}

.footer-contact-info {
    line-height: 1.6;
    margin-top: 40px;
}

.footer-contact-info address {
    font-style: normal;
}

.footer-bottom {
    background-color: #1b3a57;
    padding: 20px 20px;
    text-align: center;
}

.footer-bottom p {
    margin: 0 auto;
    color: var(--light-blue-gray);
    font-size: 0.9em;
}


/* ============================================================== */
/*  Media Queries */
/* ============================================================== */

/* --- Desktop Small --- */
@media (max-width: 1199px) {
    .header-content, nav, nav ul { column-gap: 30px; }

    .features .features-head { padding: 40px 0; }
    .feature .kpi-list {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 23px;
        row-gap: 40px;
        align-content: center;
    }
    .kpi-list .kpi { max-width: 150px; }
    .kpi-list #equals { display: none; }
    .kpi-list #oee { width: 100%; font-size: 1.5em; }

    .section-head {padding-top: 0;}
    #home #modules { padding: 0; }
    .carousel { height: 400px; }

    .section-slide { height: 500px; }
    .section-slide .content { max-width: 400px; }
    .section-slide .sliderOuter {
        height: 355px;
        padding: 0;
        box-sizing: border-box;
    }
    #trial h2 br { display: block; }
}


/* --- Tablet --- */
@media (max-width: 991px) {
    .header-content { flex-direction: column; background-color: #FFFFFF; height: var(--nav-height); transition: height 0.2s ease; gap: 20px; padding: 20px 30px; }
    .logo-burger { display: flex; justify-content: space-between; width: 100%; align-items: center; }
    .nav-burger { display: block; }
    nav { display: none; }
    nav ul { flex-direction: column; gap: 10px; align-items: flex-end; padding-right: 20px; }
    nav .btn-group { flex-direction: column; align-items: flex-end; }
    .header-content.open { height: calc(var(--nav-height) + 280px); justify-content: flex-start; align-items: flex-end; }
    .header-content.open nav { display: flex; flex-direction: column; width: fit-content; gap: 20px; align-items: flex-end; padding-right: 30px; }
    .header-content.open nav .btn-group .txt-link.btn-txt { padding: 0 20px 0 0; }
    
    /* Mega Menu Mobile Styles */
    .mega-menu { display: none !important; }
    .has-mega-menu::after { display: none; }

    h1, .h1 { font-size: 2.5em; }
    h2, .h2 { font-size: 1.75em; }

    .hero-content, .hero:after { height: 300px; }
    #home .hero-content {
        width: 75%;
        max-width: 600px;
        margin: 0 auto;
    }
    .hero-content p { font-size: revert; }

    .testimonial-container.client-video { flex-direction: column; }
    .testimonial-container.client-video .left-section { width: 100%; }
    .testimonial-container.client-video .right-section { width: 90%; }

    .features .features-head { position: static; }
    .features .container .feature { justify-content: space-between; }
    .feature .kpi-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    #cont-improve .kpi-list { gap: unset; }
    .kpi-list #equals { display: unset; }

    .carousel-container {
        width: 100%;
        max-width: 600px;
    }
    .carousel-item:first-of-type { display: none; }
    .carousel-item { width: calc(100% - 40px); }

    .pricing-table { flex-direction: column; }

    .mod-list .mod-list-item ul { flex-direction: column; }

    .timeLine {
        padding-top: 0;
        .stepContainer {grid-template-columns: 1fr; width: clamp(10px, 100%, 450px); padding: 0; row-gap: 40px; box-sizing: border-box;}
        .rightAlign {margin: 0;}
        .rightAlign h3 {text-align: left;}
        .rightAlign p {text-align: left;}
        .circle, div:empty {display: none;}
    }

    .section-slide { margin-left: 50px; }
    .section-slide .content { max-width: 350px; }
    .section-slide .content h2 { font-size: 1.75em; }

    .form-container {
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        padding: 60px 40px 80px;
        max-width: none;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .footer-container img#ptb-icon { bottom: -50px; }
    .footer-logo { margin: 15px auto 0 0; }

}


/* --- Mobile --- */
@media (max-width: 767px) {
    :root{ --nav-height: 60px; }

    #announce-banner span:first-of-type { display: none; }
    #announce-banner br { display: block; }
    .main{
        top: calc(var(--nav-height) + 60px); /* with Announce Banner */
        height: calc(100dvh - (var(--nav-height) + 60px)); /* with Announce Banner */
    }

    .header-content { padding: 15px 20px; }
    .logo-burger { align-items: flex-start; }
    .logo img { max-width: 200px; }
    .header-content.open nav { padding: 0; }

    h1, .h1 { font-size: 2em; }

    .hero-content p { padding: 0 20px; text-align: left; }
    #home .hero { padding: 0; }
    #home .hero-content {
        width: 100%;
        height: auto;
        border-radius: 0;
        border: none;
        padding: 20px 20px 50px;
        max-width: none;
    }
    .hero-phrase { font-size: 2.4em; }

    .testimonial-container.client-video .testimonial-author { text-align: right; }

    .section-head p { text-align: left; }

    .features-head { text-align: center; }
    .network { width: 100%; height: 200px; }
    .features .container { gap: 80px; padding: 20px 0; }
    .features .container .feature { flex-direction: column; height: auto; }
    .features .container .feature .text { width: auto; }
    .feature .disclaimer { margin-top: 0; }
    .features .container .feature .img { width: 100%; }
    .features .container .feature .img > img { max-height: 400px; }

    .testimonial-container { flex-direction: column; }
    .packages-section .testimonial-container { flex-direction: column-reverse; }
    .left-section { width: 100%; padding: 0; }
    .right-section { width: 90%; }
    .focus-text { font-size: 2em; }
    .quote-icon { font-size: 50px; }

    .carousel-item { padding: 0; width: 100%; }
    .carousel { height: 350px; }
    .carousel-item.active .ci-info { max-height: none; }

    .step-content .btn-group { justify-content: left; }

    .mod-list { padding: 50px 0; }
    .mod-list .section-head { padding: 0 20px 30px; }
    .mod-list .mod-list-content .mod-list-item { padding: 60px 0; border-top: 1px solid var(--gray); }
    .mod-list-item h2 { padding: 0 20px; text-align: center; }
    .mod-list-item h3, .mod-list-item p { padding: 0 20px; }
    .mod-list .mod-list-img { display: none; }
    .mod-list .mod-list-content {
        width: 100%;
        max-width: 600px;
        padding: 50px 0;
        background: none;
        border: none;
        box-shadow: none;
        bottom: 0;
        margin: 0 0 50px;
    }
    .mod-diagram { display: block; }
    .mod-diagram img { width: 90%; }
    .mod-screenshot-mobile { display: block; height: 400px; }
    .mod-screenshot-mobile img { height: 100%; }

    .section-slide { margin: 50px 20px; flex-direction: column; height: auto; }
    .section-slide .content { max-width: none; padding: 0; }

    .dual-block-container {
        margin: 80px 25px;
        flex-direction: column;
    }

    .dual-block-container .block {
        padding: 5px 30px 50px;
    }

    .form-row { flex-wrap: wrap; }
    #map .hero-content { visibility: hidden; }

    .footer-logo { margin: 0; }
    .footer-links { flex-direction: column; }
    .footer-column { padding: 0; }
    .footer-column:last-of-type { border: none; }
    #mods-cont h3 { display: none; }
    .footer-column ul { margin: 0; }
    .footer-column:last-of-type ul { margin: 30px 0; }
}

/* =====================================================
   ROLES TEMPLATE STYLES
   ===================================================== */

/* Day in the Life Section */
.day-in-life-section {
    padding: 80px 20px;
    background: white;
}

.day-in-life-section .container,
.connected-modules-section .container,
.benefits-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--deep-blue);
    margin-bottom: 60px;
    letter-spacing: 2px;
}

/* Timeline Container */
.timeline-container {
    position: relative;
    padding: 40px 0;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
}

.timeline-item.left {
    justify-content: flex-start;
    padding-right: 50%;
}

.timeline-item.right {
    justify-content: flex-end;
    padding-left: 50%;
}

.timeline-marker {
    width: 20px;
    height: 20px;
    background: #bcbcbc;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-content {
    background: white;
    padding: 30px;
    max-width: 450px;
}

.timeline-content h3 {
    font-size: 1.5rem;
    color: var(--deep-blue);
    margin-bottom: 15px;
    font-weight: 600;
}

.timeline-content p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Connected Modules Section */
.connected-modules-section {
    padding: 80px 20px;
    background: #f8f8f8;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.module-item {
    text-align: center;
}

.module-box {
    width: 100%;
    height: 200px;
    background: #d3d3d3;
    border-radius: 8px;
    margin-bottom: 20px;
}

.module-item p {
    color: #666;
    line-height: 1.6;
    padding: 0 20px;
}

/* Benefits Section */
.benefits-section {
    padding: 80px 20px;
    background: #e8e8e8;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 60px;
    margin-top: 60px;
}

.benefits-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.benefit-item i {
    color: var(--dark-blue);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.benefit-item p {
    color: var(--paragraph-color);
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .timeline-container::before {
        left: 30px;
    }
    
    .timeline-item {
        padding-left: 80px !important;
        padding-right: 20px !important;
    }
    
    .timeline-item.left,
    .timeline-item.right {
        justify-content: flex-start;
    }
    
    .timeline-marker {
        left: 30px;
    }
    
    .timeline-content {
        max-width: 100%;
    }
    
    .modules-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* =====================================================
   ALL MODULES PAGE STYLES
   ===================================================== */

#all-modules .module-title {
    margin-bottom: 0;
}

.all-mods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 20px auto 50px;
    justify-items: center;
}

.all-mod-item {
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 500px;
}

.all-mod-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.all-mod-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #007cba; /* Adjust to match your brand */
}

.all-mod-icon i {
    display: block;
}

.all-mod-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #333;
    line-height: 1.3;
}

.all-mod-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .all-mods-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
    }

    .all-mod-item {
        padding: 1.25rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .all-mods-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

@media (min-width: 1025px) {
    .all-mods-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================
   MODULE PAGE STYLES
   ===================================================== */

/* Module Hero Section */
.module-hero-section {
    /*padding: 40px 20px 150px;*/
    padding: 40px 20px 60px;
    background: var(--light-blue);
    background: radial-gradient(circle, rgba(136, 186, 244, 0.2) 46%, rgba(136, 186, 244, 1) 100%);
    text-align: center;
}

.module-hero-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.module-title {
    font-size: 3rem;
    font-weight: 300;
    color: var(--deep-blue);
    margin-bottom: 40px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.testimonial-quote {
    max-width: fit-content;
    margin: 0 auto;
}

/*.testimonial-quote p { font-style: italic; }*/

.testimonial-quote cite {
    display: block;
    font-size: 0.95rem;
    color: #666;
    font-style: normal;
    font-weight: 600;
}

/* Module Screenshot Section */
.module-screenshot-section {
    padding: 0;
    background: white;
}

.module-screenshot-section > div {
    max-width: 1000px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid #C2C2C2;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    top: -100px;
    overflow: hidden;
}

.module-screenshot-section > div img {
    width: 100%;
}

.module-screenshot-section .container {
    max-width: 100%;
    padding: 0;
}

.screenshot-placeholder {
    width: 100%;
    height: 500px;
    background: #b8b8b8;
    position: relative;
}

/* Feature Carousel Section */
.feature-carousel-section {
    padding: 60px 20px 0;
}

.feature-carousel-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px;
    background: var(--light-blue-gray);
    border-radius: 8px;
}

.feature-carousel {
    position: relative;
    min-height: 150px;
}

.carousel-content {
    display: none;
    gap: 50px;
    align-items: center;
    /*max-height: 450px;*/
    box-sizing: border-box;
}

.carousel-content.active {
    display: flex;
}

.reverse .carousel-content {
    flex-direction: row-reverse;
}

.carousel-main {
    flex: 1;
}

.carousel-main h2 {
    font-size: 2rem;
    color: var(--deep-blue);
    margin-bottom: 30px;
    font-weight: 400;
}

.carousel-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
    padding-top: 30px;
}

.carousel-prev,
.carousel-next {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s;
}

.carousel-prev:hover,
.carousel-next:hover {
    color: var(--dark-blue);
}

.carousel-dots {
    display: flex;
    gap: 10px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--light-gray);
    border: 1px solid var(--deep-blue);
    cursor: pointer;
    transition: background 0.3s;
}

.carousel-dot.active {
    background: var(--dark-blue);
}

.carousel-preview {
    width: 50%;
    flex-shrink: 0;
    padding: 20px 0 0 20px;
    background-color: #ffffff;
}

.carousel-preview img {
    width: 100%;
    object-fit: contain;
}

.preview-box {
    width: 100%;
    height: 250px;
    background: #c8c8c8;
    border-radius: 8px;
}

/* KPIs Section */
.kpi-section {
    padding: 60px 20px 0;
}

.kpis-list {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 40px;
}

.kpi-item {
    text-align: center;
    max-width: 200px;
}

.kpi-icon {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.kpi-icon i {
    font-size: 3rem;
    color: var(--dark-blue);
}

.kpi-item h3 {
    font-size: 1.2rem;
    color: var(--deep-blue);
    font-weight: 400;
    line-height: 1.4;
}

/* Module Combinations Section */
.module-combinations-section {
    padding: 60px 20px 80px;
}

.module-combinations-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.module-combinations-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--deep-blue);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.section-description {
    text-align: center;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 60px;
}

.combinations-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    flex-direction: row;
}

.combination-item {
    flex: 1;
    max-width: 300px;
    text-align: center;
    background: #ffffff;
    padding: 20px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.combination-item:hover {
    background-color: #f5f8ff;
    transform: translateY(-2px);
    text-decoration: none;
}


.combination-item .mod-icon {
    font-size: 18px;
    color: #0055A3;
}

.combination-item h3 {
    font-size: 1.3rem;
    color: var(--deep-blue);
    margin-bottom: 20px;
    font-weight: 400;
}

.combination-item p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

.combination-connector {
    font-size: 2rem;
    font-weight: 300;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Responsive Design for Module Pages */
@media (max-width: 768px) {
    .module-title {
        font-size: 2rem;
    }

    .feature-carousel-section .container {
        padding: 25px;
    }

    .carousel-preview {
        padding: 5px;
    }
    
    .kpis-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .kpi-item {
        width: 45%;
    }

    .combinations-grid {
        flex-direction: column;
        align-items: center;
    }

    .combination-connector {
        transform: rotate(90deg);
        margin: 20px 0;
    }

    .combination-item {
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .carousel-content,
    .reverse .carousel-content {
        flex-direction: column;
        max-height: none;
    }

    .carousel-navigation {
        padding-right: 30px;
    }

    .carousel-preview {
        width: 100%;
        max-width: 800px;
    }
}