/* OptiSoft Systems | pageelements.css */

/* Section heading and intro (shared) */
.oss-section-heading {
    font-size: 34px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.8px;
    color: #082c68;
    margin: 0 0 12px;
}

    .oss-section-heading::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 1px;
        background: #0868d5;
        margin-left: 24px;
    }

.oss-section-intro {
    font-size: 17px;
    line-height: 1.6;
    color: #4a5668;
    max-width: 1000px;
    margin: 0 0 28px;
}

/* Icon circle (shared) */
.oss-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #e0efff;
    color: #006be9;
}

    .oss-icon-circle i {
        font-size: 42px;
        line-height: 1;
    }

/* Pill button (shared) */
.oss-pill-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 15px 34px;
    border-radius: 32px;
    background: var(--oss-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

    .oss-pill-button:hover {
        background: #0057c2;
        color: #fff;
    }

.oss-pill-button-light {
    background: #fff;
    color: #0065d9;
}

    .oss-pill-button-light:hover {
        background: #e8f2ff;
        color: #0057c2;
    }

/* Outline button (shared) */
.oss-outline-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 26px;
    border: 2px solid var(--oss-blue);
    border-radius: 6px;
    background: #fff;
    color: var(--oss-blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

    .oss-outline-button:hover {
        background: var(--oss-blue);
        color: #fff;
    }

/* Hero (home page) */
.oss-hero {
    display: flex;
    align-items: center;
    min-height: 420px;
    color: #fff;
    background-color: #052b56;
    background-image: linear-gradient(90deg, #052b56 0%, #052b56 23%, rgba(5, 43, 86, .92) 40%, rgba(5, 43, 86, .16) 66%, rgba(5, 43, 86, 0) 100%), url("/assets/public/pageelements/home/hero-workspace.png");
    background-size: cover, cover;
    background-position: center, right center;
    background-repeat: no-repeat;
}

    .oss-hero .oss-container {
        width: 100%;
    }

.oss-hero-copy {
    max-width: 680px;
    padding: 64px 0 48px;
}

.oss-hero-kicker {
    font-size: 15px;
    letter-spacing: 1px;
    color: #a8d7ff;
    margin: 0 0 14px;
}

    .oss-hero-kicker::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 1px;
        background: #8ab4d6;
        margin-left: 16px;
    }

.oss-hero h1 {
    font-size: 56px;
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -1px;
    margin: 0 0 16px;
}

.oss-hero-text {
    font-size: 19px;
    line-height: 1.55;
    max-width: 600px;
    margin: 0 0 26px;
}

/* Page hero (sub pages) */
.oss-page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 240px;
    padding: 48px 0;
    color: #fff;
    background: #052b56 right center / cover no-repeat;
}

    .oss-page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, rgba(5, 43, 86, .95) 0%, rgba(5, 43, 86, .85) 35%, rgba(5, 43, 86, .25) 75%, rgba(5, 43, 86, .1) 100%);
    }

    .oss-page-hero .oss-container {
        width: 100%;
    }

    .oss-page-hero h1 {
        font-size: 56px;
        font-weight: 750;
        line-height: 1.08;
        letter-spacing: -1px;
        margin: 0 0 12px;
    }

.oss-page-hero-text {
    font-size: 22px;
    line-height: 1.45;
    max-width: 700px;
    margin: 0;
}

.oss-page-hero-services {
    background-image: url("/assets/public/pageelements/services/services-hero.png");
}

.oss-page-hero-about {
    background-image: url("/assets/public/pageelements/about/about-hero.png");
}

.oss-page-hero-support {
    background-image: url("/assets/public/pageelements/support/support-hero.png");
}

.oss-page-hero-portfolio {
    background-image: url("/assets/public/pageelements/portfolio/portfolio-hero.png");
}

/* Services (home page cards) */
.oss-services {
    background: #fff;
    padding: 56px 0 60px;
}

.oss-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.oss-service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 320px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid #f0f3f8;
    border-radius: 8px;
    box-shadow: 0 3px 19px rgba(24, 58, 98, .055);
}

    .oss-service-card h3 {
        font-size: 18px;
        font-weight: 750;
        line-height: 1.32;
        color: #082b65;
        min-height: 48px;
        margin: 18px 0 12px;
    }

    .oss-service-card p {
        font-size: 15px;
        line-height: 1.55;
        color: #4a5567;
        margin: 0 0 24px;
    }

    .oss-service-card a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        color: #0069e6;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

        .oss-service-card a:hover {
            text-decoration: underline;
        }

/* Service list (Services page rows) */
.oss-service-list {
    background: #fff;
    padding: 36px 0 64px;
}

.oss-service-rows {
    display: grid;
    gap: 18px;
}

.oss-service-row {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f3f8;
    border-radius: 8px;
    box-shadow: 0 3px 19px rgba(24, 58, 98, .055);
}

    .oss-service-row img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 336 / 154;
        object-fit: cover;
        border-radius: 4px;
    }

.oss-service-row-body {
    padding: 8px 12px 8px 0;
}

    .oss-service-row-body h2 {
        font-size: 26px;
        font-weight: 750;
        line-height: 1.25;
        color: #082c68;
        margin: 0 0 8px;
    }

    .oss-service-row-body p {
        font-size: 17px;
        line-height: 1.55;
        color: #4a5567;
        margin: 0 0 18px;
    }

/* Split: text left, photo right (shared) */
.oss-split-section {
    background: #fff;
    padding: 48px 0 24px;
}

.oss-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 48px;
}

.oss-split-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #4a5567;
    margin: 0 0 20px;
}

    .oss-split-text p:last-child {
        margin-bottom: 0;
    }

.oss-split-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

/* Callout box (shared) */
.oss-callout {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 32px;
    padding: 28px 40px;
    background: #eaf5ff;
    border-radius: 8px;
}

    .oss-callout > i {
        flex-shrink: 0;
        font-size: 96px;
        line-height: 1;
        color: var(--oss-blue);
    }

    .oss-callout h2 {
        font-size: 30px;
        font-weight: 750;
        line-height: 1.2;
        color: #082c68;
        margin: 0 0 8px;
    }

    .oss-callout p {
        font-size: 19px;
        line-height: 1.55;
        color: #4a5567;
        margin: 0;
    }

/* Feature cards (shared) */
.oss-feature-section {
    background: #fff;
    padding: 40px 0 64px;
}

.oss-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.oss-feature-card {
    padding: 26px 20px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid #e3edf9;
    border-radius: 8px;
}

    .oss-feature-card > i {
        display: block;
        font-size: 52px;
        line-height: 1;
        color: var(--oss-blue);
        margin-bottom: 16px;
    }

    .oss-feature-card h3 {
        font-size: 20px;
        font-weight: 750;
        line-height: 1.25;
        color: #082c68;
        margin: 0 0 8px;
    }

    .oss-feature-card p {
        font-size: 16px;
        line-height: 1.45;
        color: #4a5567;
        margin: 0;
    }

/* Solutions */
.oss-solutions {
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: stretch;
    background: #fff;
}

.oss-solutions-photo {
    min-height: 400px;
}

    .oss-solutions-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.oss-solutions-copy {
    align-self: center;
    max-width: 760px;
    padding: 48px 56px;
}

    .oss-solutions-copy > p {
        font-size: 17px;
        line-height: 1.6;
        color: #4a5567;
        margin: 14px 0 22px;
    }

.oss-check-list {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .oss-check-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 16px;
        line-height: 1.45;
        color: #4a5567;
    }

        .oss-check-list li i {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 26px;
            height: 26px;
            border-radius: 50%;
            background: #006de9;
            color: #fff;
            font-size: 18px;
        }

        .oss-check-list li strong {
            color: #092e68;
        }

/* Track record */
.oss-track-record {
    background: #eaf5ff;
    padding: 52px 0 60px;
}

.oss-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.oss-stat {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .oss-stat .oss-icon-circle {
        width: 84px;
        height: 84px;
        background: #d7eaff;
    }

        .oss-stat .oss-icon-circle i {
            font-size: 38px;
        }

    .oss-stat h3 {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        color: #082d69;
        margin: 0 0 4px;
    }

    .oss-stat strong {
        display: block;
        font-size: 15px;
        color: #082d69;
    }

    .oss-stat p {
        font-size: 14px;
        line-height: 1.45;
        color: #4b5767;
        margin: 6px 0 0;
    }

/* CTA banner */
.oss-cta-banner {
    display: flex;
    align-items: center;
    min-height: 180px;
    padding: 36px 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(2, 35, 76, .96), rgba(2, 35, 76, .76)), url("/assets/public/pageelements/home/hero-workspace.png") right center / cover no-repeat;
}

    .oss-cta-banner .oss-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        width: 100%;
    }

    .oss-cta-banner h2 {
        font-size: 36px;
        font-weight: 750;
        margin: 0 0 10px;
    }

    .oss-cta-banner p {
        font-size: 18px;
        line-height: 1.55;
        margin: 0;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .oss-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .oss-service-row {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 22px;
    }

    .oss-split {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
    }

    .oss-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oss-solutions {
        grid-template-columns: 1fr;
    }

    .oss-solutions-photo {
        min-height: 300px;
        max-height: 420px;
    }

    .oss-solutions-copy {
        max-width: none;
        padding: 40px 24px;
    }

    .oss-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .oss-hero {
        min-height: 360px;
    }

        .oss-hero h1 {
            font-size: 44px;
        }

    .oss-page-hero h1 {
        font-size: 44px;
    }

    .oss-section-heading {
        font-size: 30px;
    }

    .oss-service-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .oss-service-row-body {
        padding: 0 8px 8px;
    }

    .oss-split {
        grid-template-columns: 1fr;
    }

    .oss-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }

        .oss-callout > i {
            font-size: 72px;
        }

    .oss-cta-banner .oss-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .oss-cta-banner h2 {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    .oss-section-heading {
        font-size: 28px;
    }

        .oss-section-heading::after {
            display: none;
        }

    .oss-hero {
        background-position: center, 65% center;
    }

        .oss-hero h1 {
            font-size: 36px;
        }

    .oss-hero-text {
        font-size: 17px;
    }

    .oss-page-hero h1 {
        font-size: 36px;
    }

    .oss-page-hero-text {
        font-size: 18px;
    }

    .oss-service-grid,
    .oss-stat-grid,
    .oss-feature-grid {
        grid-template-columns: 1fr;
    }

    .oss-service-card {
        min-height: 0;
    }

        .oss-service-card h3 {
            min-height: 0;
        }
}

@media (prefers-reduced-motion: reduce) {
    .oss-outline-button {
        transition: none;
    }
}


/* Contact page */
.oss-page-hero-contact {
    background-image: url("/assets/public/pageelements/contact/contact-hero.png");
}

.oss-contact-section {
    background: #fff;
    padding: 40px 0 32px;
}

.oss-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 48px;
}

.oss-contact-intro {
    font-size: 20px;
    line-height: 1.55;
    color: #4a5567;
    margin: 0 0 28px;
}

.oss-contact-list {
    display: grid;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .oss-contact-list li {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 20px;
        color: #263449;
    }

    .oss-contact-list i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--oss-navy);
        color: #fff;
        font-size: 20px;
    }

    .oss-contact-list a {
        color: inherit;
        text-decoration: none;
    }

        .oss-contact-list a:hover {
            text-decoration: underline;
        }

/* Form panel and fields (shared) */
.oss-form-panel {
    padding: 24px;
    background: #eef6ff;
    border-radius: 8px;
}

.oss-form .form-floating {
    margin-bottom: 14px;
}

.oss-form .form-control {
    border: 1px solid #c9d8ea;
    border-radius: 6px;
}

    .oss-form .form-control:focus {
        border-color: var(--oss-blue);
        box-shadow: 0 0 0 .2rem rgba(0, 107, 234, .15);
    }

.oss-form textarea.form-control {
    height: 140px;
}

.oss-form .text-danger {
    font-size: 14px;
}

.oss-required {
    color: #d62828;
}

.oss-form-recaptcha {
    margin-top: 18px;
}

/* Solid button (shared) */
.oss-solid-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 30px;
    border: 0;
    border-radius: 6px;
    background: var(--oss-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

    .oss-solid-button:hover {
        background: #0057c2;
        color: #fff;
    }

/* Divider and 3-column feature grid (shared) */
.oss-divider {
    border: 0;
    border-top: 1px solid #d5e3f3;
    margin: 0 0 32px;
    opacity: 1;
}

.oss-feature-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .oss-contact-grid {
        gap: 32px;
    }
}

@media (max-width: 767.98px) {
    .oss-contact-grid,
    .oss-feature-grid-3 {
        grid-template-columns: 1fr;
    }

    .oss-contact-intro,
    .oss-contact-list li {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oss-solid-button {
        transition: none;
    }
}

/* Confirmation message (shared) */
.oss-confirmation {
    background: #fff;
    padding: 64px 0 80px;
    text-align: center;
}

    .oss-confirmation > .oss-container > i {
        display: block;
        font-size: 72px;
        line-height: 1;
        color: var(--oss-blue);
        margin-bottom: 20px;
    }

    .oss-confirmation h2 {
        font-size: 32px;
        font-weight: 750;
        line-height: 1.2;
        color: #082c68;
        margin: 0 0 14px;
    }

    .oss-confirmation p {
        font-size: 18px;
        line-height: 1.6;
        color: #4a5567;
        max-width: 640px;
        margin: 0 auto 28px;
    }

        .oss-confirmation p a {
            color: var(--oss-blue);
            font-weight: 700;
            text-decoration: none;
        }

            .oss-confirmation p a:hover {
                text-decoration: underline;
            }


/* Portfolio page */
.oss-intro-section {
    background: #fff;
    padding: 48px 0 32px;
}

.oss-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: center;
    gap: 48px;
}

.oss-intro-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: #082c68;
    margin: 0 0 18px;
}

.oss-intro-text {
    font-size: 20px;
    line-height: 1.55;
    color: #4a5567;
    max-width: 640px;
    margin: 0;
}

.oss-callout-compact {
    gap: 22px;
    margin-top: 0;
    padding: 26px 28px;
}

    .oss-callout-compact > i {
        font-size: 64px;
    }

    .oss-callout-compact h2 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .oss-callout-compact p {
        font-size: 16px;
    }

.oss-project-section {
    background: #fff;
    padding: 0 0 64px;
}

.oss-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.oss-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3edf9;
    border-radius: 8px;
    box-shadow: 0 3px 19px rgba(24, 58, 98, .055);
}

    .oss-project-card img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: top center;
        border-bottom: 1px solid #e3edf9;
    }

.oss-project-card-body {
    padding: 16px 18px 20px;
}

    .oss-project-card-body:empty {
        display: none;
    }

    .oss-project-card-body h3 {
        font-size: 20px;
        font-weight: 750;
        line-height: 1.25;
        color: #082c68;
        margin: 0 0 6px;
    }

    .oss-project-card-body p {
        font-size: 15px;
        line-height: 1.5;
        color: #4a5567;
        margin: 0;
    }

/* CTA, light version (shared) */
.oss-cta-light {
    background: #eaf5ff;
    padding: 56px 0 60px;
    text-align: center;
}

    .oss-cta-light h2 {
        font-size: 36px;
        font-weight: 750;
        line-height: 1.2;
        color: #082c68;
        margin: 0 0 12px;
    }

    .oss-cta-light p {
        font-size: 18px;
        line-height: 1.55;
        color: #4a5567;
        max-width: 640px;
        margin: 0 auto 26px;
    }

@media (max-width: 991.98px) {
    .oss-intro-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .oss-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .oss-intro-title {
        font-size: 44px;
    }

    .oss-cta-light h2 {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    .oss-intro-title {
        font-size: 36px;
    }

    .oss-intro-text {
        font-size: 18px;
    }

    .oss-project-grid {
        grid-template-columns: 1fr;
    }
}