.bg-gray {
    background: var( --bg-grey);
}

.temp1 {
    /*    background: #002892;*/
}
/****Video*****/

video {
    width: 100%;
}

.videoWrapper1 {
    width: 100%;
    /* height: 524px;*/
    position: relative;
    overflow: hidden;
}

/*.media-box {
    width: 100%;
    height: 100%;
}*/
/****CTA*****/
.contact-us .social {
    flex-direction: column;
    list-style: none;
    padding: 0;
    align-items: start;
}

.cta-ban {
    z-index: -1;
}
/**********Portfolio*********/
.portfolio-tabss h2:hover {
    color: var(--white);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.filter-bar {
    display: none;
}

.portfolio-tabss h2 {
    font-size: var(--port-h2);
    border: 2px;
    padding: 12px 38px;
    color: var(--white);
    cursor: pointer;
    border-radius: 30px;
    background: var(--port-bg);
    margin-right: 9px;
}

.image-box-wrapper .image-box.shadow {
    cursor: pointer;
    height: 350px;
}

.image-box.shadow:hover .card-footer {
    display: flex;
}

.card-footer {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #03a0e3db, #2675b8f2 70%);
}

.image-box-wrapper .card-footer a:hover {
    color: var(--white);
}

.image-box-wrapper .card-footer a {
    font-size: var(--port-a);
}

.technologies ul li {
    list-style: none;
    width: 18% !important;
    display: inline-block;
}
/*********Blog*******/
.BlogPage .card-content p {
    color: var(--black);
}
div#BlogDetailTags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.fullSection .media-box {
    height: auto;
}
.fullSection .img-content {
    padding-top: 16px;
}
/***********Gallery************/
.nav-tabs {
    border-bottom: none;
}

.inner-page {
    background-position: center;
    color: var(--white);
    overflow: hidden;
}

/* Template 0 - Section 1: white hero (no background media) */
:root {
    --sk-font-heading: Fraunces, Georgia, serif;
    --sk-font-body: Inter, system-ui, sans-serif;
    --sk-font-cta: Inter, system-ui, sans-serif;
    --t0-gap-kicker-heading: 14px;
    --t0-gap-heading-body: 24px;
    --t0-gap-paragraph: 14px;
    --t0-gap-body-button: 28px;
    --t0-gold-accent: linear-gradient(180deg, #c19024 0%, #f8de7a 41%, #d5ab42 77.5%);
    --t0-media-accent-offset: 12px;
    --t0-media-max-s2: 31.75rem;
    --t0-media-max-s3: 39.125rem;
}

.t0-s1,
.t0-s2,
.t0-s3 {
    font-family: var(--sk-font-body);
    line-height: 1.625;
}

.t0-s1 {
    background-color: var(--white);
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.t0-s1 .t0-kicker {
    color: var(--secondry-color);
    font-family: var(--sk-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 0 var(--t0-gap-kicker-heading);
    text-transform: uppercase;
}

.t0-s1 h1 {
    color: var(--secondry-color);
    font-family: var(--sk-font-heading);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(2.25rem, 5vw, 5rem) !important;
    margin: 0 0 var(--t0-gap-heading-body);
}

.t0-s1 h1:last-child {
    margin-bottom: 0;
}

.t0-s1 #content,
.t0-s1 #content p {
    color: var(--black);
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.t0-s2 {
    background-color: #171768 !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.t0-s2 .dot-grid-canvas {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 40px);
    z-index: 0;
    pointer-events: none;
}

.t0-s2 > .container {
    position: relative;
    z-index: 1;
}

.t0-s3 {
    background-color: var(--white);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.t0-s2 h2,
.t0-s3 h2 {
    font-family: var(--sk-font-heading);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-size: clamp(29px, 4vw, 48px);
    margin: 0 0 var(--t0-gap-heading-body);
}

.t0-s2 h2 {
    color: var(--white);
}

.t0-s3 h2,
.t0-s3 #content,
.t0-s3 #content p {
    color: var(--secondry-color);
}

.t0-s2 #content,
.t0-s2 #content p {
    color: var(--white);
}

.t0-s1 #content,
.t0-s2 #content,
.t0-s3 #content,
.t0-s1 #content p,
.t0-s2 #content p,
.t0-s3 #content p {
    font-family: var(--sk-font-body);
}

.t0-s2 .btn.btn-primary,
.t0-s3 .btn.btn-primary {
    font-family: var(--sk-font-cta);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding: var(--space-7-2);
    border-radius: 0;
}

/* Template 0 — vertical rhythm between heading, body, and CTA */
.t0-s1-content,
.t0-s2-content,
.t0-s3-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.t0-s1-content {
    align-items: center;
}

.t0-s2-content > h2:has(+ .btn),
.t0-s3-content > h2:has(+ .btn) {
    margin-bottom: 0;
}

.t0-s2-content > h2 + .btn,
.t0-s3-content > h2 + .btn,
.t0-s2-content > #content + .btn,
.t0-s3-content > #content + .btn {
    margin-top: var(--t0-gap-body-button);
}

.t0-s1 #content p,
.t0-s2 #content p,
.t0-s3 #content p,
.t0-s1 #content > ul,
.t0-s2 #content > ul,
.t0-s3 #content > ul,
.t0-s1 #content > ol,
.t0-s2 #content > ol,
.t0-s3 #content > ol,
.t0-s1 #content > div:not(:last-child),
.t0-s2 #content > div:not(:last-child),
.t0-s3 #content > div:not(:last-child) {
    margin: 0 0 var(--t0-gap-paragraph);
    line-height: 1.625;
}

.t0-s1 #content > *:last-child,
.t0-s2 #content > *:last-child,
.t0-s3 #content > *:last-child,
.t0-s1 #content p:last-child,
.t0-s2 #content p:last-child,
.t0-s3 #content p:last-child {
    margin-bottom: 0;
}

.t0-s2-content {
    padding: 1.5rem 0;
}

.t0-s3-content {
    padding: 1.5rem 0;
}

.t0-s2-media,
.t0-s3-media {
    min-width: 0;
}

/* Template 0 — media frame with gold offset accent (no border-radius) */
.t0-media-frame {
    position: relative;
    width: 100%;
    max-width: var(--t0-media-max-s2);
    isolation: isolate;
}

.t0-s3 .t0-media-frame {
    max-width: var(--t0-media-max-s3);
}

.t0-media-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--t0-gold-accent);
    pointer-events: none;
}

.t0-media-frame--accent-start::before {
    inset: calc(-1 * var(--t0-media-accent-offset)) var(--t0-media-accent-offset) var(--t0-media-accent-offset) 0;
}

.t0-s2 .t0-media-frame::before {
    left: -10px !important;
}

.t0-media-frame--accent-end::before {
    inset: var(--t0-media-accent-offset) 0 calc(-1 * var(--t0-media-accent-offset)) var(--t0-media-accent-offset);
}

/* Section 3 — gold accent extends top/bottom; 100px narrower than image, centered */
.t0-s3 .t0-media-frame::before {
    top: calc(-1 * var(--t0-media-accent-offset));
    bottom: calc(-1 * var(--t0-media-accent-offset));
    left: 50%;
    right: auto;
    width: calc(100% - 100px);
    transform: translateX(-39%);
}

.t0-media-frame img,
.t0-media-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.t0-s3 .t0-media-frame img,
.t0-s3 .t0-media-frame video {
    aspect-ratio: 626 / 484;
}

.t0-media-frame .video-containers {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.t0-s3 .t0-media-frame .video-containers {
    aspect-ratio: 626 / 484;
}

@media (max-width: 767px) {
    .t0-s2-content,
    .t0-s3-content {
        padding: 1.5rem 0;
    }

    .t0-s2 .row,
    .t0-s3 .row {
        row-gap: 2rem;
    }

    .t0-s3-media {
        padding-top: 1.5rem;
    }
}

section.inner-page:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/Content/FrontEnd/css/home-new/dot-pattern.png) !important;
    opacity: 0.2;
    background: coral;
}

section.inner-page .container {
    color: var(--white);
}

.nav-tabs .nav-link {
    color: var(--Black);
    border: none;
    text-transform: capitalize;
    margin: 0 0 0 30px;
    /*padding: 0;*/
}

.gallery-tabs li.nav-item {
    padding: 0 10px;
    position: relative;
}

    .gallery-tabs li.nav-item:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        background: var(--Black);
    }

.kicker {
    color: var(--white);
    font-size: small;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.inner-page-wrap h1 {
    color: var(--white);
}
.pseudo-border {
    position: relative;
}

    .pseudo-border::before {
        content: "";
        position: absolute;
        width: 75%;
        height: 112%;
        bottom: 0;
        top: -6%;
        z-index: -1;
        background: linear-gradient(180deg, #C19024 0%, #F8DE7A 41%, #D5AB42 77%);
    }
.pseudo-border-video {
    position: relative;
}

    .pseudo-border-video::before {
        content: "";
        position: absolute;
        width: 75%;
        height: 110%;
        bottom: 0;
        top: -6%;
        z-index: -1;
        background: linear-gradient(180deg, #C19024 0%, #F8DE7A 41%, #D5AB42 77%);
    }

@media (min-width: 768px) {
    .two-col-sec .content-section {
        padding-right: 6rem;
    }

    .two-col-sec-inverse .content-section {
        padding-left: 6rem;
    }
    
    .t1-s4 .col-md-6.content-section {
        padding-right: 6rem;
    }
}

.hero-section {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
/*    background: var(--black);*/
    right: 0px;
    top: 0px;
    z-index: 1;
    opacity: 0.4;
}

.hero-section .lft-col img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    filter: brightness(0.9);
}

.portfolioPage .card-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cta-hero {
    overflow: hidden;
    position: relative;
}

    .cta-hero .container {
        position: relative;
    }

    .cta-hero .img-container {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
    }

        .cta-hero .img-container img {
            width: 100%;
            height: 100%;
        }

@media (max-width: 1025px) {
    #gallery-section.gallery-wrapper .card {
        flex: 0 0 31% !important;
    }
}

@media (max-width: 820px) {
    .portfolioPage .card-deck {
        grid-template-columns: repeat(2, 1fr);
    }

    #gallery-section.gallery-wrapper .card {
        flex: 0 0 48% !important;
    }
}

@media (max-width: 600px) {
    .portfolioPage .card-deck {
        grid-template-columns: repeat(1, 1fr);
    }
    div#BlogDetailTags {
        grid-template-columns: repeat(1, 1fr);
    }
}


    @media (max-width: 767px) {
    .hero-section {
        padding: 8rem 0;
    }

        .hero-section .lft-col img {
            max-width: unset;
            width: unset;
        }

    .two-col-sec .row {
        flex-direction: column-reverse;
    }

    .two-col-sec .content-section, .two-col-sec-inverse .content-section {
        padding-top: 4rem;
    }

    .column-reverse-on-phone {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }


    .cta-section .container {
        margin-block: 0px;
    }
    .CTA2:not(.sk-cta-banner) {
        padding: 50px 0px;
    }
    #myForm {
        margin-bottom: 12px;
    }
    .t1-s4 {
        padding-top: 0px;
    }
    .box-images-temp-2 img {
        width: 100%;
        margin-bottom: 12px;
    }
}

@media only screen and (max-width: 450px) {
    .top-sec-inner {
        width: 100%;
    }
}
.staff-main h1 {
    color: white;
}
.portfolioPage.staff .card-content {
    color: #012793;
}
.portfolioPage.staff .card-content h2 {
    font-size: 25px;
}
.BlogPage .card-content h2 {
    font-size: 25px;
}
.BlogPage .card-content {
    color: #012793;
}

.t1-s2 .row {
        --bs-gutter-x: 0rem;
        background-color: #171768 !important;
        color: #fff !important;
    }

    .gallery-section .row {
        --bs-gutter-x: 0rem;
    }

    .t1-s2 video {
        width: 100%;
        max-width: 100%;
        height: 536px;
        object-fit: cover;
    }

    .t1-s2 iframe {
        width: 100%;
        max-width: 100%;
        height: 536px;
        height: 430px;
    }

    .t1-s2 h2 {
        font-size: 55px !important
    }

    .t1-s2 p {
        margin-top: 10px;
    }

    .t1-s2 .content-text ul li {
        font-family: var(--sk-font-body) !important;
        font-size: 16px !important;
        line-height: 1.7;
        list-style: none;
        background: url(/Images/Vector.webp) left top / 36px no-repeat;
        padding-left: 50px;
        max-width: 90%;
        padding-bottom: 1.2rem;
        background-position-y: 10px;
    }

    .t1-s2 .content-full ul li {
        line-height: 2.7 !important;
    }

    .inner-page-wrap h1 {
        font-size: 80px !important;
    }

    @media (max-width: 1200px) {
        .t1-s2 h2 {
            font-size: 35px !important;
        }

        .inner-page-wrap h1 {
            font-size: 45px !important;
        }
    }

.video-containers {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        overflow: hidden;
    }

        .video-containers iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            z-index: 2;
        }
.image-style-block-align-right{
    text-align:right;
}

.sk-hero__title em,
.sk-hero__title .highlight-text {
    font-style: italic;
    background: var(--text-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.inner-page-wrap .sk-hero__title {
    margin-bottom: 24px;
    font-family: var(--font-heading);
    font-size: clamp(38px, 5vw, 64px) !important;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.6px;
    color: #171769;
}

/* Neutralize any legacy box treatment on the highlighted word so it renders as
   inline gold-gradient text, matching the home hero. */
.inner-page-wrap .sk-hero__title .highlight-text {
    display: inline;
    margin: 0 6px;
    padding: 0;
}

.inner-page-wrap .sk-hero__title .highlight-text::before {
    content: none;
    display: none;
}

/* [bracketed] highlight word inside the dark section H2s (t0-s2 / t1-s2 blue bands).
   The H2 stays white (section color); ONLY the highlighted word turns gold gradient.
   No box/underline — legacy .highlight-text box is disabled and ::before is nulled.
   -webkit-text-fill-color:transparent overrides the inherited white so the gradient
   shows even though the parent sets color:#fff. */
.t0-s2 .highlight-text,
.t1-s2 .highlight-text {
    display: inline;
    font-style: italic;
    background: var(--text-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t0-s2 .highlight-text::before,
.t1-s2 .highlight-text::before {
    content: none;
    display: none;
}

/* Kicker (eyebrow text above the hero H1). Base .kicker is white -> invisible on the
   white inner hero. Force dark so it shows. (Template1 uses its own concept rule.) */
.inner-page-wrap .kicker {
    color: var(--black);
}

.inner-page-wrap .content-text p {
    color: var(--black);
}

.sk-hero__text {
    max-width: 898px;
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 29.3px;
    color: var(--color-blue-45) !important;
}

/* API / Calendly embed — keep outside hero constraints so the widget does not clip */
.api-embed-section {
    background-color: var(--white, #fff);
    padding: 0 0 clamp(3rem, 6vw, 5rem);
}

.api-embed-section .api-embed-content {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.api-embed-section .calendly-inline-widget,
.api-embed-section iframe[src*="calendly.com"] {
    display: block;
    width: 100% !important;
    min-width: 320px;
    min-height: 700px !important;
    height: 700px !important;
    overflow: hidden !important;
    border: 0;
}