/* xxxxxxxxxxxxxx Services: Home xxxxxxxxxxxx */



/* =====Services: Banner===== */

.services-banner {

    padding-top: 50px;

    padding-bottom: 80px;

    margin-bottom: 170px;

    background: -o-linear-gradient(left, #1D2350, #303872);

    background: -webkit-gradient(linear, left top, right top, from(#1D2350), to(#303872));

    background: linear-gradient(to right, #1D2350, #303872);

    position: relative;

}

.services-banner-bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: -5;

    background: -o-linear-gradient(left, #1D2350, #303872);

    background: -webkit-gradient(linear, left top, right top, from(#1D2350), to(#303872));

    background: linear-gradient(to right, #1D2350, #303872);

}

.services-banner-h {

    font-size: 25px;

    color: #fff;

}

.services-banner-img {

    position: absolute;

    /* top: 155px; */

    left: 16px;

    right: 16px;

    bottom: -120px;

    height: 180px;

    width: calc(100% - 32px);

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

    z-index: 1;

}

@media(min-width: 744px) {

    .services-banner {

        padding-top: 50px;

        padding-bottom: 65px;

        margin-bottom: 50px;

    }

    .services-banner-h {

        max-width: 420px;

        font-size: 31.25px;

    }

    .services-banner-bg {

        right: 59%;

    }

    .services-banner-img {

        top: 0;

        bottom: 0;

        right: 0;

        left: unset;

        width: 40%;

        height: 100%;

    }

}

@media(min-width: 1024px) {

    .services-banner {

        padding-bottom: 40px;

    }

    .services-banner-h {

        max-width: 550px;

        font-size: 39.06px;

    }

}

@media(min-width: 1200px) {

    .services-banner {

        margin-bottom: 45px;

    }

    .services-banner-h {

        max-width: 750px;

        font-size: 48.83px;

    }

    .services-banner-img {

        width: 30%;

    }

}

@media(min-width: 1512px) {

    .services-banner {

        margin-bottom: 80px;

    }

    .services-banner .container {

        max-width: 1400px;

    }

}

@media(min-width: 1728px) {

    .services-banner-img {

        width: 35%;

    }

}



/* =====Services: Text Section===== */

.services-sec_txt {

    margin-top: 50px;

    margin-bottom: 50px;

}

.services-sec_txt-content-h {

    font-size: 25px;

    font-weight: 400;

    margin-bottom: 15px;

}

.services-sec_txt-content-para {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 20px;

}

.services-sec-img {

    width: 100%;

    height: 300px;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

}

.services-sec_txt .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 25px;

}

.services-sec_txt-content {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

}

@media(min-width: 744px) {

    .services-sec_txt .container {

        max-width: 500px;

        margin-left: auto;

        margin-right: auto;

    }

}

@media(min-width: 1024px) {

    .services-sec_txt .container {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: reverse;

        -ms-flex-direction: row-reverse;

        flex-direction: row-reverse;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        gap: 40px;



        max-width: unset;

        margin-left: 32px;

        margin-right: 32px;

    }

    .services-sec-img {

        height: 400px;

        width: 440px;

    }

    .services-sec_txt-content-h {

        font-size: 31.25px;

        margin-bottom: 20px;

    }

    .services-sec_txt-content-para {

        margin-bottom: 30px;

        gap: 15px;

    }



    .services-sec_txt.sec_rev .container {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

    }

}

@media(min-width: 1200px) {

    .services-sec_txt {

        margin-top: 60px;

        margin-bottom: 60px;

    }

    .services-sec1 {

        margin-top: 45px;

    }

    .services-sec3 {

        margin-bottom: 80px;

    }

    .services-sec_txt .container {

        gap: unset;

        max-width: 1200px;

        margin-left: auto;

        margin-right: auto;

    }

    .services-sec_txt-content {

        max-width: 580px;

    }

    .services-sec_txt-content-h {

        font-size: 39.06px;

    }

    .services-sec-img {

        height: 450px;

        width: auto;

    }

}



/* =====Services: Portfolio Section===== */

.services-sec4 {

    margin-bottom: 40px;

    padding-bottom: 50px;

    position: relative;

}

.services-sec4 .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.services-sec4-h {

    margin-bottom: 30px;

}

.services-sec4-p_wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 25px;

    margin-bottom: 35px;

    width: 100%;

}



/* Portfolio Box */

.services-sec4-pbox-a {

    width: 100%;

    height: 100%;

}

.services-sec4-pbox {

    padding: 20px 15px 25px;

    height: 400px;

    width: 100%;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

}

.services-sec4-pbox-bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    overflow: hidden;

    z-index: -1;

}

.services-sec4-pbox-bg-overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    background: -o-linear-gradient(top, transparent 50%, rgba(2, 4, 4, 0.75) 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(2, 4, 4, 0.75)));

    background: linear-gradient(to bottom, transparent 50%, rgba(2, 4, 4, 0.75) 100%);

    z-index: -5;

}

.services-sec4-pbox-bg-img {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

    z-index: -6;

    -webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

}

.services-sec4-pbox:hover {

    cursor: pointer;

}

.services-sec4-pbox:hover .services-sec4-pbox-bg-img {

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

}

.services-sec4-pbox-service_cat {

    font-size: 13px;

    font-family: "Avenir", "Lato", sans-serif;

    font-weight: 400;

    line-height: 1.25;

    color: rgba(255, 255, 255, 0.8);

    font-style: normal;



    padding: 4px 10px;

    border-radius: 15px;

    background-color: rgba(29, 35, 80, 0.6);

    border: 1px solid #8D91C7;

}

.services-sec4-pbox-title {

    font-family: "gelica", sans-serif;

    font-size: 25px;

    font-weight: 400;

    font-style: normal;

    color: #fff;

    line-height: 1.25;

}

.services-sec4 .primary_btn {

    padding: 15px;

}

.services-sec4-bg {

    position: absolute;

    background-color: #E6E8F4;

    bottom: 0;

    left: 0;

    right: 0;

    height: 300px;

    z-index: -15;

}

.services-sec4-pbox-a:nth-of-type(5),

.services-sec4-pbox-a:nth-of-type(6) {

    display: none;

}

.services-sec4-pbox-service_cat-wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    gap: 6px;

    row-gap: 15px;

}

@media(min-width: 744px) {

    .services-sec4-pbox-a:nth-of-type(5),

    .services-sec4-pbox-a:nth-of-type(6) {

        display: inline;

    }

    .services-sec4-h {

        margin-bottom: 40px;

    }

    .services-sec4-p_wrap {

        display: -ms-grid;

        display: grid;

        -ms-grid-columns: 1fr 16px 1fr;

        grid-template-columns: repeat(2, 1fr);

        gap: unset;

        row-gap: 20px;

        -webkit-column-gap: 16px;

        -moz-column-gap: 16px;

        column-gap: 16px;

        margin-bottom: 40px;

    }

}

@media(min-width: 1024px) {

    .services-sec4 {

        margin-bottom: 60px;

        padding-bottom: 80px;

    }

    .services-sec4-pbox {

        height: 520px;

    }

    .services-sec4-p_wrap {

        -webkit-column-gap: 20px;

        -moz-column-gap: 20px;

        column-gap: 20px;

    }

    .services-sec4-pbox {

        padding: 20px 20px 30px;

    }

    .services-sec4-pbox-service_cat {

        font-size: 15px;

    }

    .services-sec4-bg {

        height: 400px;

    }

    .services-sec4-pbox-service_cat-wrap {

        gap: 7px;

    }

}

@media(min-width: 1200px) {

    .services-sec4-pbox {

        height: 450px;

    }

    .services-sec4-p_wrap {

        -ms-grid-columns: 1fr 16px 1fr 16px 1fr;

        grid-template-columns: repeat(3, 1fr);

        row-gap: unset;

        -webkit-column-gap: unset;

        -moz-column-gap: unset;

        column-gap: unset;

        gap: 16px;

    }

}

@media(min-width: 1512px) {

    .services-sec4 .container {

        max-width: 1350px;

    }

    .services-sec4-p_wrap {

        gap: 30px;

    }

}



/* =====Process: Services===== */

.services-sec6 {

    position: relative;

    padding-top: 50px;

    padding-bottom: 50px;

    margin-bottom: 40px;

}

.services-sec6-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: -5;

    background-color: rgba(230, 232, 244, 0.5);

}

.services-sec6 .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.services-sec6-h {

    font-weight: 400;

    margin-bottom: 40px;

}

.services-sec6-box_wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 40px;

    position: relative;

}

/* Box */

.services-sec6-box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    max-width: 255px;

}

.services-sec6-box-icon {

    height: 80px;

    width: 80px;

    margin-bottom: 20px;

}

.services-sec6-box-h {

    font-size: 20px;

    margin-bottom: 12px;

}

.services-sec6-box-p {

    font-family: "Avenir", "Lato", sans-serif;

    font-weight: 300;

    line-height: 1.25;

    color: rgba(2, 4, 4, 0.8);

    font-style: normal;

    font-size: 16px;

    text-align: center;

}

@media(min-width: 1024px) {

    .services-sec6 {

        padding-bottom: 80px;

    }

    .services-sec6-box_wrap {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

        gap: 16px;

    }

    .services-sec6-box {

        max-width: unset;

        width: 100%;

    }

}

/* BG Effect */

.services-sec6-bgline {

    display: none;

    position: absolute;

    top: 40px;

    left: 80px;

    right: 80px;



    height: 2px;

    background: -o-repeating-linear-gradient(left,

            rgba(2, 4, 4, 0.2) 0px,

            rgba(2, 4, 4, 0.2) 6px,
            /* Dash length */

            transparent 6px,

            transparent 12px
            /* Dash length + Gap length */

        );

    background: -o-repeating-linear-gradient(left,

            rgba(2, 4, 4, 0.2) 0px,

            rgba(2, 4, 4, 0.2) 6px,
            /* Dash length */

            transparent 6px,

            transparent 12px
            /* Dash length + Gap length */

        );

    background: repeating-linear-gradient(to right,

            rgba(2, 4, 4, 0.2) 0px,

            rgba(2, 4, 4, 0.2) 6px,
            /* Dash length */

            transparent 6px,

            transparent 12px
            /* Dash length + Gap length */

        );

    z-index: -3;

}

.services-sec6-arrow {

    display: none;

    height: 18px;

    position: absolute;

    top: 32px;

}

.services-sec6-arrow:nth-of-type(1) {

    left: 220px;

}

.services-sec6-arrow:nth-of-type(2) {

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

}

.services-sec6-arrow:nth-of-type(3) {

    right: 220px;

}

@media(min-width: 1200px) {

    .services-sec6-arrow {

        display: block;

    }

    .services-sec6 {

        padding-bottom: 70px;

        margin-bottom: 60px;

    }

    .services-sec6-h {

        margin-bottom: 60px;

    }

    .services-sec6-box_wrap {

        gap: 58px;

    }

    .services-sec6-bgline {

        display: block;

        left: 120px;

        right: 120px;

    }

    .services-sec6-arrow:nth-of-type(1) {

        left: 270px;

    }

    .services-sec6-arrow:nth-of-type(3) {

        right: 270px;

    }

}



/* xxxxxxxxxxx Individual Services xxxxxxxxxxx */



/* =====Banner===== */

.service-banner {

    padding-top: 50px;

    padding-bottom: 120px;

    margin-bottom: 230px;

    position: relative;

}

.service-banner-bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: -5;

    background: -o-linear-gradient(left, #1D2350, #303872);

    background: -webkit-gradient(linear, left top, right top, from(#1D2350), to(#303872));

    background: linear-gradient(to right, #1D2350, #1D2350);

}

.service-banner-h {

    color: #fff;

    margin-bottom: 15px;

}

.service-banner-p {

    font-family: "Avenir", "Lato", sans-serif;

    font-weight: 400;

    line-height: 1.25;

    color: rgba(255, 255, 255, 0.8);

    font-style: normal;

    font-size: 16px;

    margin-bottom: 20px;

}

.service-banner-img {

    position: absolute;

    left: 16px;

    right: 16px;

    bottom: -180px;

    height: 280px;

    width: calc(100% - 32px);

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

    z-index: 1;

}

@media(min-width: 744px) {

    .service-banner {

        padding-bottom: 180px;

        margin-bottom: 360px;

    }

    .service-banner .container {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        -webkit-box-align: start;

        -ms-flex-align: start;

        align-items: flex-start;
        padding: 0px 50px;

    }

    .service-banner-p {

        max-width: 515px;

    }

    .service-banner-img {

        height: 460px;

        bottom: -310px;

    }

}

@media(min-width: 1024px) {

    .service-banner {

        padding-top: 44px;

        padding-bottom: 80px;

        margin-bottom: 0px;

    }

    .service-banner-bg {

        right: 49%;

    }

    .service-banner-h {

        max-width: 450px;

        font-size: 39.06px;

        margin-bottom: 20px;

    }

    .service-banner-p {

        margin-bottom: 40px;

        max-width: 450px;

    }

    .service-banner-img {

        top: 0;

        bottom: 0;

        right: 0;

        left: unset;

        width: 50%;

        height: 100%;

    }

    .service-banner .banner-breadcrumb {

        margin-bottom: 40px;

    }

}

@media(min-width: 1200px) {

    .service-banner {

        padding-bottom: 80px;

    }

    .service-banner-h {

        max-width: 550px;

        font-size: 45px;

    }

    .service-banner-p {

        font-size: 18px;

        max-width: 520px;

    }

}

@media(min-width: 1512px) {

    .service-banner {

        margin-bottom: 0px;

    }

    .service-banner .container {

        max-width: 1400px;

    }

    .service-banner-h {

        max-width: 650px;

    }

    .service-banner-p {

        max-width: 600px;

    }

}



/* =====Service: Gallery Section===== */

.service-sec1 {

    margin-top: 50px;

    margin-bottom: 50px;

}

.service-sec1 .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.service-sec1-h {

    text-align: center;

    /* margin-bottom: 25px; */

    font-weight: 400;

}

.service-sec1 .primary_btn {

    margin-top: 30px;

    border-left: 3px solid #8D91C7;

}



/* Gallery */

.service-sec1-gallery_wrap {

    -webkit-column-count: 2;

    -moz-column-count: 2;

    column-count: 2;
    /* Divide into 2 columns */

    -webkit-column-gap: 10px;

    -moz-column-gap: 10px;

    column-gap: 10px;
    /* Space between the columns */

    width: 100%;

}

.service-sec1-gallery-a {

    display: inline-block;
    /* Ensure the images behave like block elements */

    margin-bottom: 6px;

    width: 100%;

}

.service-sec1-gallery-img {

    width: 100%;
    /* Ensure images fit within their containers */

    height: 100%;

    height: auto;
    /* Maintain aspect ratio */

    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
    /* Optional shadow effect */

    -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;

    transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;

    -o-transition: transform 0.3s, box-shadow 0.3s;

    transition: transform 0.3s, box-shadow 0.3s;

    transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
    /* Smooth hover effect */

}

.service-sec1-gallery-img:hover {

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    transform: scale(1.05);

    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

}

@media(min-width: 744px) {

    .service-sec1-gallery_wrap {

        -webkit-column-gap: 16px;

        -moz-column-gap: 16px;

        column-gap: 16px;

    }

    .service-sec1-gallery-a {

        margin-bottom: 12px;

    }

}

@media(min-width: 1200px) {

    .service-sec1-gallery_wrap {

        -webkit-column-count: 3;

        -moz-column-count: 3;

        column-count: 3;

    }

}



/* =====Section 2: Individual Service===== */

.service-sec2 {

    position: relative;

    padding-top: 40px;

    margin-top: 50px;

    margin-bottom: 60px;

}

.service-sec2-sub-container {

    max-width: 500px;

    margin-left: auto;

    margin-right: auto;

    position: relative;

}

.service-sec2-bg_mini,

.service-sec2-bg_mega {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 150px;

    background-color: rgba(230, 232, 244, 0.5);

    z-index: -2;

    display: none;

}

.service-sec2-bg_mega {

    display: none;

}

.service-sec2-content {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 15px;

}

.service-sec2-h, 
.service-whatis-h {

    font-size: 34px;

}

.service-sec2-text {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 12px;

}

.service-sec2-img {

    position: relative;

    width: 100%;

    height: 250px;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

    margin-top: 20px;

}

@media(min-width: 744px) {

    .service-sec2 {

        margin-top: 0px;
        margin-bottom: 40px;

    }

    .service-sec2-img {

        height: 340px;

    }

    .service-sec2-bg_mini {

        bottom: 215px;

    }

}

@media(min-width: 1024px) {

    .service-sec2 {

        margin-top: 80px;

        margin-bottom: 20px;

        padding-top: unset;

    }

    .service-sec2-sub-container {

        max-width: unset;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        padding: 50px 0 50px 30px;

    }

    .service-sec2-content {

        max-width: 480px;

    }

    .service-sec2-text {

        margin-right: 20px;

    }

    .service-sec2-img {

        height: 320px;

        width: 400px;

        margin-top: unset;

    }

    .service-sec2-bg_mini {

        display: none;

    }

    .service-sec2-bg_mega {

        display: block;

        bottom: 0;

        right: 60px;

    }

}

@media(min-width: 1200px) {

    .service-sec2-sub-container {

        padding: 60px 0 60px 50px;

    }

    .service-whatis-h, 
    .service-sec2-h {

        font-size: 39.06px;

    }

    .service-sec2-content {

        max-width: 620px;

        gap: 15px;

    }

    .service-sec2-text {

        gap: 15px;

    }

    .service-sec2-img {

        width: 500px;

        height: 370px;

        left: 20px;

    }

    .service-sec2-bg_mega {

        right: 0;

    }

}

@media(min-width: 1512px) {

    .service-sec2-img {

        width: 520px;

        left: 60px;

    }

    .service-sec2-sub-container {

        padding: 60px 0 60px 60px;

    }

}



/* =====Service: Pricing Section===== */

.service-sec3 {

    margin-top: 60px;

    margin-bottom: 40px;

}

.service-sec3 .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.service-sec3-h {

    text-align: center;

    font-weight: 400;

    margin-bottom: 40px;

}

.service-sec3-box_wrap {

    margin-bottom: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 30px;

}

/* Pricing Box */

.service-sec3-box {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    height: 100%;

    gap: 40px;



    border: 1px solid rgba(2, 4, 4, 0.1);

    border-top: 6px solid #E6E8F4;

    padding: 15px 20px 195px;

}

.service-sec3-box-img {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 180px;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

    z-index: -1;

}

.service-sec3-box-head {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    gap: 20px;

}

.service-sec3-box-h {

    font-size: 25px;

}

.service-sec3-box-p {

    font-size: 18px;

}

.service-sec3-box-foot {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 5px;

}

.service-sec3-box-foot-text1 {

    font-size: 16px;

    color: rgba(2, 4, 4, 0.6);

}

.service-sec3-box-foot-price {

    font-size: 39px;

    color: #020404;

    font-weight: 700;

}



/* Bullet list in pricing box */

.service-sec3-box-points {

    padding-left: 20px;

    margin: 0;

    list-style-type: disc;

}

.service-sec3-box-points li {

    margin-bottom: 8px;

    line-height: 1.4;

    display: list-item;

    list-style-type: disc;

}

.service-sec3-box-points li:last-child {

    margin-bottom: 0;

}

.service-sec3-box-points li::marker {

    color: #B1DAF0;

}







/* Discount Toast */

.service-sec3-discount_toast {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    gap: 5px;



    padding: 8px 10px;

    border: 1px solid #B1DDF3;

    background-color: rgba(177, 221, 243, 0.15);



    margin-bottom: 25px;

}

.service-sec3-discount_toast-icon {

    height: 15px;

    width: 15px;

}

.service-sec3-discount_toast-text {

    font-size: 14px;

    color: rgba(2, 4, 4, 0.8);

}





/* 'Popular' Text */

.service-sec3-box.popular {

    margin-top: 35px;

}

.service-sec3-box.popular::before {

    content: "popular";

    position: absolute;

    font-size: 12px;

    font-weight: 900;

    padding: 10px 15px;

    background-color: #E6E8F4;

    color: #020404;

    text-transform: uppercase;

    letter-spacing: 1px;



    top: -35px;

    left: -1px;

}



.service-sec3 .primary_btn {

    padding: 15px 20px;

}

@media(min-width: 744px) {

    .service-sec3 {

        margin-bottom: 50px;

    }

    .service-sec3-box_wrap {

        display: -ms-grid;

        display: grid;

        -ms-grid-columns: 1fr 16px 1fr;

        grid-template-columns: repeat(2, 1fr);

        gap: unset;

        -webkit-column-gap: 16px;

        -moz-column-gap: 16px;

        column-gap: 16px;

        row-gap: 30px;

    }

    .service-sec3-box.popular {

        height: unset;

    }

}

@media(min-width: 1024px) {

    .service-sec3 {

        margin-top: 80px;

        margin-bottom: 80px;

    }

    .service-sec3-h {

        margin-bottom: 60px;

    }

    .service-sec3-box_wrap {

        -ms-grid-columns: (1fr)[3];

        grid-template-columns: repeat(3, 1fr);

    }

    .service-sec3-box.popular {

        margin-top: 0;

    }



    .service-sec3-discount_toast {

        margin-bottom: 40px;

        gap: 8px;

        font-size: 16px;

    }

    .service-sec3-discount_toast-icon {

        height: 20px;

        width: 20px;

    }

}

@media(min-width: 1200px) {

    .service-sec3 {

        margin-bottom: 100px;

    }

    .service-sec3-box {

        max-width: 360px;

    }

    .service-sec3-box_wrap {

        -webkit-column-gap: 20px;

        -moz-column-gap: 20px;

        column-gap: 20px;

    }

}



/* =====Service: Process Section===== */

.service-sec5 {

    margin-top: 50px;

    margin-bottom: 60px;

}

.service-sec5 .container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.service-sec5-h {

    margin-bottom: 0px;

    font-weight: 400;

    text-align: center;

}

.service-sec5-steps {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 20px;

    width: 100%;

}

.service-sec5-steps::before {

    content: "";

    position: absolute;

    width: 2px;

    top: 5px;

    bottom: 5px;

    left: 9px;

    background-color: #E4E6F2;

    z-index: -10;

}



/* Step */

.service-sec5-step {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    width: 100%;

    gap: 8px;

}

.service-sec5-step:nth-of-type(1)::before {

    content: "";

    position: absolute;

    width: 4px;

    height: 25px;

    top: 0;

    left: 8px;

    background-color: #fff;

    z-index: -9;

}

.service-sec5-step:nth-of-type(6)::after {

    content: "";

    position: absolute;

    width: 4px;

    top: 15px;

    bottom: 0;

    left: 8px;

    background-color: #fff;

    z-index: -9;

}

.service-sec5-step-no {

    font-size: 14px;

    font-weight: 900;

    color: rgba(2, 4, 4, 0.8);

    line-height: 1;

    background-color: #B1DDF3;

    height: 20px;

    width: 20px;

    border-radius: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;



    margin-top: 13px;

}

.service-sec5-step-subwrap1 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    width: 100%;

}

.service-sec5-triangle {

    height: 8px;

    margin-top: 18px;

}

.service-sec5-step-subwrap2 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 12px;

    padding: 12px 15px;

    border-left: 2px solid #1D2350;

    background-color: #fff;

    -webkit-box-shadow: 0 0 80px 0 rgba(29, 35, 80, 0.06);

    box-shadow: 0 0 80px 0 rgba(29, 35, 80, 0.06);
    /* Add a shadow */

}

.service-sec5-step-img {

    height: 60px;

    border-radius: 50%;

}

.service-sec5-step-subwrap3 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 8px;

}

.service-sec5-step-subwrap3-h {

    font-weight: 500;

}

@media(min-width: 1024px) {

    .service-sec5 {

        /*         margin-bottom: 160px; */

    }

    .service-sec5-h {

        margin-bottom: 0px;

    }

    .service-sec5-steps {

        gap: 75px;

    }

    .service-sec5-steps::before {

        left: 50%;

        -webkit-transform: translateX(-50%);

        -ms-transform: translateX(-50%);

        transform: translateX(-50%);

    }

    .service-sec5-step-subwrap2 {

        max-width: 440px;

    }

    .service-sec5-step {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        gap: 18px;

        position: relative;

    }

    .service-sec5-step-subwrap1 {

        position: absolute;

        width: unset;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

    }

    .service-sec5-step:nth-of-type(odd) .service-sec5-step-subwrap1 {

        left: 0;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: reverse;

        -ms-flex-direction: row-reverse;

        flex-direction: row-reverse;

    }

    .service-sec5-step:nth-of-type(odd) .service-sec5-triangle {

        -webkit-transform: rotate(180deg);

        -ms-transform: rotate(180deg);

        transform: rotate(180deg);

    }

    .service-sec5-step:nth-of-type(odd) .service-sec5-step-subwrap2 {

        border-right: 3px solid #1D2350;

        border-left: 0;

    }

    .service-sec5-step:nth-of-type(even) .service-sec5-step-subwrap1 {

        right: 0;

    }

    .service-sec5-step-no {

        font-size: 18px;

        height: 25px;

        width: 25px;

        border-radius: 25px;

        margin-top: unset;

    }

    .service-sec5-triangle {

        height: 10px;

        margin-top: unset;

    }

    .service-sec5-step-subwrap2 {

        gap: 15px;

        padding: 20px;

        border-left: 3px solid #1D2350;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

    }

    .service-sec5-step-img {

        height: 100px;

    }

    .service-sec5-step-subwrap3-h {

        font-size: 20px;

    }

    .service-sec5-step-subwrap3-p {

        font-size: 18px;

    }

    .service-sec5-step:nth-of-type(1)::before,

    .service-sec5-step:nth-of-type(6)::after {

        display: none;

    }

}

@media(min-width: 1200px) {

    .service-sec5-steps {

        /* max-width: 1165px; */

    }

    .service-sec5-step-subwrap2 {

        max-width: 540px;

        padding: 20px 30px;

    }

}

@media(min-width: 1512px) {

    .service-sec5 .container {

        max-width: 1400px;

    }

    .service-sec5-steps {

        max-width: 100%;

    }

    .service-sec5-step-subwrap2 {

        max-width: 570px;

    }

}



/* =====Graphic Design Service: Pricing Section===== */

@media (min-width: 1024px) {

    .gdservice-sec3 .service-sec3-h {

        margin-bottom: 40px;

    }

}

/* Special */

.gdservice-box_wrap {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 0;

    margin-bottom: 20px;

    width: 100%;

}

.gdservice-box-img {

    position: relative;

    height: 220px;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center;

    object-position: center;

}

/* BOX */

.gdservice-box {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    gap: 40px;



    border: 1px solid rgba(2, 4, 4, 0.1);

    border-top: 6px solid #E6E8F4;

    padding: 15px 20px 20px;

}

.gdservice-box-head {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    gap: 20px;

}

.gdservice-box-h {

    font-size: 25px;

}



.gdservice-box-ul {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 12px;

}

.gdservice-box-ul-li {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    gap: 8px;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

}

.gdservice-box-ul-li-tick {

    height: 20px;

    margin-top: 1px;

}

.gdservice-box-ul-li-p {

    font-size: 18px;

}

.gdservice-box-foot {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 5px;

}

.gdservice-box-foot-text1 {

    font-size: 16px;

    color: rgba(2, 4, 4, 0.6);

}

.gdservice-box-foot-price {

    font-size: 39px;

    color: #020404;

    font-weight: 700;

}

@media(min-width: 744px) {

    .gdservice-box_wrap {

        max-width: 518px;

    }

}

@media(min-width: 1024px) {

    .gdservice-box_wrap {

        display: -ms-grid;

        display: grid;

        -ms-grid-columns: (1fr)[2];

        grid-template-columns: repeat(2, 1fr);

        width: unset;

        max-width: unset;

    }

    .gdservice-box {

        max-width: 400px;

        width: 100%;

        gap: 120px;

        padding: 15px 30px 20px 20px;

    }

    .gdservice-box-img {

        height: 100%;

        width: 400px;

    }

}



/* ==========================================================================
   New design additions — Service page redesign (scientific-visualization.php,
   exhibit-development.php, and any other service page templates on this design)
   ========================================================================== */

.container_1440 {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
}

/* --- Eyebrow (small line + uppercase label), reused across sections --- */
.eyebrow {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.eyebrow-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: #8D91C7;
    flex-shrink: 0;
}

.eyebrow-text {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8D91C7;
}

.eyebrow-light .eyebrow-line {
    background-color: #B7E0F6;
}

.eyebrow-light .eyebrow-text {
    color: #B7E0F6;
}

.eyebrow-dark .eyebrow-line {
    background-color: #1D2350;
}

.eyebrow-dark .eyebrow-text {
    color: #1D2350;
}

.service-banner-h {
    font-weight: 400;
}

/* --- Centered heading block used by several sections --- */
.subhead-block {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.subhead-block .eyebrow {
    justify-content: center;
}

.subhead-block-narrow {
    max-width: 634px;
}

/* --- Checklist (bullet list with dot marker) --- */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: rgba(2, 4, 4, 0.8);
}

.checklist-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 20px;
    background-color: #E4E5F3;
}

/* --- CTA link buttons (pill + left border accent + arrow icon) --- */
.cta_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 15px 14px 15px;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
    width: fit-content;
}

.cta_link .btn_arrow {
    height: 12px;
    width: auto;
}

.service-cta.pre-foot .cta_link-light.cta_link .btn_arrow,
.service-banner-btns .cta_link-light.cta_link .btn_arrow {
    filter: invert(1);
}

.service-cta.pre-foot a.cta_link-light.cta_link:hover .btn_arrow,
.service-banner-btns a.cta_link-light.cta_link:hover .btn_arrow {
    filter: unset;
}

.cta_link-light {
    background-color: #B1DDF3;
    color: #1D2350;
    border-left-color: #8D91C7;
}

.cta_link-dark {
    background-color: #020404;
    color: #fff;
    border-left-color: #fff;
}

.cta_link-navy {
    background-color: #1D2350;
    color: #fff;
    border-left-color: #B1DDF3;
}

.cta_link-light:hover {
    background-color: #000000;
    color: #ffffff;
}

.cta_link-dark:hover {
    background-color: #B1DDF3;
    color: #1D2350;
}

.cta_link-navy:hover {
    background-color: #B1DDF3;
    color: #1D2350;
}

/* --- Banner: eyebrow + two buttons --- */
.service-banner-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

/* --- Trusted By Logos Carousel (CSS-only infinite marquee, works with any logo count) --- */
.home .service-logos {
    padding: 100px 0px;
}

.service-logos {
    padding: 60px 0 60px;
}


.service-logos-h {
    text-align: center;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 500;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: -1px;
    color: #020404;
    margin: 0 0 35px;
}

.service-logos-track_wrap {
    position: relative;
    overflow: hidden;
}

.service-logos-track_wrap::before,
.service-logos-track_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.service-logos-track_wrap::before {
    left: 0;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.service-logos-track_wrap::after {
    right: 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff));
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.service-logos-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: -webkit-max-content;
    width: max-content;
    -webkit-animation: service-logos-scroll 25s linear infinite;
    animation: service-logos-scroll 25s linear infinite;
}

.service-logos-track:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.service-logos-item {
    flex-shrink: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-logos-item img {
    max-height: max-content;
    width: 80px;
    -o-object-fit: contain;
    object-fit: contain;
}

@-webkit-keyframes service-logos-scroll {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes service-logos-scroll {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* --- What Is This Service? --- */
.service-whatis {
    padding: 50px 0 120px;
}

.service-whatis-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.service-whatis-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-whatis-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
    font-size: 16px;
}

.service-whatis-body p:first-child {
    color: #8D91C7;
    font-weight: 600;
}

.service-whatis-h2 {
    margin: 26px 0 6px;
}

.service-whatis-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

@media(min-width: 1024px) {
    .service-whatis-wrap {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 80px;
        max-width: 1440px;
        padding: 0px 60px;
    }


    .service-grid .container_1440,
    .service-sec2 .container_1440 {
        padding: 0px 60px;
    }

    .service-whatis-content {
        max-width: 630px;
        gap: 15px;
    }

    .service-whatis-img {
        width: 45%;
        height: auto;
        align-self: stretch;
        object-fit: cover;
    }
}

/* --- Services Grid --- */
.service-grid {
    padding: 80px 0;
    background-color: #F2F2FF;
}

.service-grid-h {
    text-align: center;
}

.service-grid-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.service-grid-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 50px;
}

.service-card {
    width: 50%;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 4px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card-icon {
    width: 48px;
    height: 48px;
}

.service-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card-h {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1D2350;
    margin: 0;
}

.service-card-p {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: rgba(2, 4, 4, 0.8);
    margin: 0;
}

.service-card-cta {
    background-color: #1D2350;
    justify-content: space-between;
}

.service-card-h-white {
    color: #fff;
    margin-bottom: 15px;
}

.service-card-p-white {
    color: rgba(255, 255, 255, 0.8);
}

@media(min-width: 744px) {
    .service-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card {
        padding: 36px;
        width: 40%;
    }
}

@media(min-width: 1024px) {
    .service-grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-card {
        padding: 36px;
        width: 30%;
    }

    /* Center a leftover last row of 1 or 2 cards instead of left-aligning it */
    .service-grid-cards>*:nth-child(3n+1):nth-last-child(1) {
        flex-grow: 0;
        width: 33.33%;
    }

    .service-grid-cards>*:nth-child(3n+1):nth-last-child(2) {
        flex-grow: 0;
        width: 33.33%;
    }

    .service-grid-cards>*:nth-child(3n+1):nth-last-child(2)~* {
        flex-grow: 0;
        width: 33.33%;
    }
}

/* --- Why Choose Us (extends existing service-sec2) --- */
.service-sec2-lead {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 600;
    color: #8D91C7;
    font-size: 16px;
    margin: 0;
}

.service-sec2-h2 {
    margin: 10px 0px 0px;
    font-size: 24px;
    color: #020404;
}

.service-sec2-img[data-aos^=fade][data-aos^=fade].aos-animate {
    left: 0;
    width: 50%;
    height: auto;
}

.service-sec2-sub-container {
    padding: 0;
    gap: 50px;
    justify-content: space-between;
    max-width: 1440px;
}

.service-sec2-bg_mega {
    display: none;
}

.service-whatis-content p,
.service-sec2 p {
    font-size: 18px;
}

/* --- Industries We Serve --- */
.service-industries {
    padding: 60px 0;
}

.service-industries-h {
    text-align: center;
}

.service-industries-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.service-industries-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
}

.industry-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    background-color: #F2F2FF;
    border-radius: 4px;
}

.industry-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.industry-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-card-h {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1D2350;
    margin: 0 0 4px;
}

.industry-card-p {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 16px;
    color: rgba(2, 4, 4, 0.8);
    margin: 0;
}

@media(min-width: 744px) {
    .service-industries-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .service-industries-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width: 1200px) {
    .service-industries-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Process (redesign of existing service-sec5) --- */
.service-sec5 {
    background-color: #EFF8FD;
    padding: 80px 0;
}

.service-sec5-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.service-sec5-steps {
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.service-sec5-steps::before {
    display: none;
}

.service-sec5-step {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 40%;
    flex-grow: 1;
}

.service-sec5-step::before,
.service-sec5-step::after {
    display: none !important;
}

.service-sec5-step-no {
    width: 46px;
    height: 46px;
    border-radius: 46px;
    font-size: 14px;
    font-weight: 800;
    background-color: #fff;
    color: #020404;
    border: 1px solid #1D2350;
    margin-top: 0;
    -webkit-transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.service-sec5-step-active .service-sec5-step-no {
    background-color: #1D2350;
    color: #fff;
    border-color: #1D2350;
}

.service-sec5-fill-line {
    display: none;
}

.service-sec5-step-h {
    font-size: 20px;
    margin: 0;
    color: #020404;
}

.service-sec5-step-p {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 16px;
    color: rgba(2, 4, 4, 0.8);
}

.post-type-archive-portfolio .portfolio_home-boxes .container,
.tax-portfolio_category .portfolio_home-boxes .container {
    display: flex;
}

@media(min-width: 1024px) {
    .service-sec5-steps {
        flex-direction: row;
        gap: 22px;
        position: relative;
        margin-top: 40px;
    }

    .service-sec5-steps::before {
        display: block;
        content: "";
        position: absolute;
        top: 23px;
        left: 0%;
        width: 88%;
        height: 2px;
        background-color: #0204041A;
        z-index: 0;
        transform: unset;
    }

    .service-sec5-fill-line {
        display: block;
        position: absolute;
        top: 23px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #1D2350;
        z-index: 0;
        -webkit-transition: width .35s ease;
        transition: width .35s ease;
    }

    .service-sec5-step {
        flex: 1;
        padding-top: 64px;
        position: relative;
        z-index: 1;
    }

    .service-sec5-step-no {
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* --- Portfolio card grid — shared global component used by:
   service pages (service-sec1), archive-portfolio.php, taxonomy-portfolio_category.php --- */
.service-sec1-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.portfolio-grid,
.service-sec1-gallery_wrap {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px 24px;
    width: 100%;
    margin-top: 20px;
}

.portfolio-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portfolio-card-img_wrap_a {
    display: block;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 4px;
}

.portfolio-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s all ease-in-out;
}

.portfolio-card-img_wrap_a:hover .portfolio-card-img {
    transform: scale(1.2);
}

.portfolio-card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portfolio-card-category {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8D91C7;
}

.portfolio-card-title {
    margin: 0;
    font-size: 24px;
}

.portfolio-card-description {
    margin: 0;
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: rgba(2, 4, 4, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #1D2350;
    text-decoration: none;
}

.portfolio-card-link-arrow {
    width: 16px;
    height: auto;
}

.service-sec1-cta {
    margin-top: 40px;
}

@media(min-width: 744px) {

    .portfolio-grid,
    .service-sec1-gallery_wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {

    .portfolio-grid,
    .service-sec1-gallery_wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-card-img_wrap_a {
        height: 370px;
    }
}

@media(min-width: 1200px) {

    .portfolio-grid,
    .service-sec1-gallery_wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Testimonials --- */
.service-testimonials {
    padding: 60px 0;
    background-color: #F2F2FF;
}

.service-testimonials-h {
    text-align: center;
}

.service-testimonials-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.testimonial-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
}

.testimonial-card {
    background-color: #fff;
    border-radius: 4px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    -webkit-box-shadow: 0 8px 12px rgba(15, 27, 45, 0.03);
    box-shadow: 0 8px 12px rgba(15, 27, 45, 0.03);
}

.testimonial-card-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding-top: 25px;
}

.testimonial-card-top:before {
    content: url(/staging/1428/wp-content/uploads/2026/08/quote.svg);
    display: block;
    width: auto;
    position: absolute;
    left: 0;
    top: 0;
}

.testimonial-card-quote {
    width: 32px;
    height: auto;
}

.testimonial-card-text {
    margin: 0;
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: #0F1B2D;
}

.testimonial-card-bottom {
    border-top: 1px solid #E3E4F0;
    padding-top: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.testimonial-card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: #1D2350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 800;
    font-size: 13px;
}

.testimonial-card:nth-child(2) .testimonial-card-avatar {
    background-color: #8D91C7;
}

.testimonial-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #0F1B2D;
}

.testimonial-card-designation {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 14px;
    color: #627387;
}

@media(min-width: 744px) {
    .testimonial-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .testimonial-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- FAQ accordion --- */
.service-faq {
    padding: 60px 0 160px;
}

.service-faq-h {
    text-align: center;
}

.faq-list {
    max-width: 820px;
    margin: 40px auto 0;
}

.faq-item {
    border-bottom: 1px solid #E3E4F0;
}

.faq-item-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "gelica", sans-serif;
    font-size: 22px;
    color: #020404;
}

.faq-item-icon {
    flex-shrink: 0;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    border: 1px solid #8D91C7;
    background-color: transparent;
}

.faq-item-icon::before,
.faq-item-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #020404;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.faq-item-icon::before {
    width: 10px;
    height: 1.5px;
}

.faq-item-icon::after {
    width: 1.5px;
    height: 10px;
    transition: opacity .2s;
}

.faq-item-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item-answer p {
    margin: 0;
    padding: 0 4px 20px;
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: rgba(2, 4, 4, 0.8);
}

.faq-item.is-open .faq-item-icon {
    background-color: #020404;
    border-color: #020404;
}

.faq-item.is-open .faq-item-icon::before,
.faq-item.is-open .faq-item-icon::after {
    background-color: #fff;
}

.faq-item.is-open .faq-item-icon::after {
    opacity: 0;
}

.faq-item.is-open .faq-item-answer {
    max-height: 400px;
}

/* --- Final CTA --- */
.service-cta {
    position: relative;
    overflow: visible;
    background-color: #1D2350;
    padding: 50px 0;
    background-image: url(/wp-content/themes/lupinetheme/img/pre_foot-bg_pattern-desk.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.service-cta-bg {
    position: relative;
    inset: 0;
    background-color: #1D2350;
    z-index: 0;
}

.service-cta-images {
    display: none;
}

.service-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 556px;
}

.service-cta-h {
    color: #fff;
    margin: 0;
}

.service-cta-p {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin: 0;
}

.service-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}


.service-cta-images {
    display: flex;
    gap: 12px;
    padding: 0;
    z-index: 0;
    position: relative;
    width: 50%;
    margin-top: -150px;
}

.service-cta-image_wrap {
    flex: 0.5;
    overflow: hidden;
    border-top: 6px solid #8D91C7;
    border-bottom: 6px solid #8D91C7;
    height: 520px;
    cursor: pointer;
    -webkit-transition: -webkit-box-flex 0.3s ease-in;
    transition: -webkit-box-flex 0.3s ease-in;
    -o-transition: flex 0.3s ease-in;
    transition: flex 0.3s ease-in;
    transition: flex 0.3s ease-in, -webkit-box-flex 0.3s ease-in, -ms-flex 0.3s ease-in;
}

.service-cta-image_wrap.service-cta-active {
    flex: 1.5;
}

.service-cta-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-cta .container {
    position: relative;
    display: flex;
    align-items: center;
}

.service-cta-content {
    margin-left: 60px;
    max-width: 550px;
}

section.service-cta.pre-foot {
    margin-top: 150px;
}

.service-faq.nospace {
    padding: 50px 0;
}

@media(max-width: 1023px) {
    .service-cta .container {
        flex-direction: column;
        gap: 40px;
    }

    .service-cta-images,
    .service-cta-content {
        width: auto;
        max-width: initial;
        align-items: flex-start;
        margin-left: 0;
    }

    .service-cta-images {
        margin-top: -200px;
    }

    .service-whatis {
        padding: 50px 0 60px;
    }

    .service-grid {
        padding: 60px 0;
    }

    .service-industries {
        padding: 30px 0;
    }

    .service-sec5 {
        padding: 40px 0;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .service-testimonials {
        padding: 50px 0;
    }

    .service-faq {
        padding: 40px 0 180px;
    }
}

/* ==========================================================================
   New design additions — Graphic Design pricing section (service-pricing)
   ========================================================================== */
.service-pricing {
    padding: 80px 0;
    background-color: #F2F2FF;
}

.service-pricing-h {
    text-align: center;
}

.service-pricing-subtext {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(2, 4, 4, 0.8);
}

.pricing-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.pricing-card {
    background-color: #fff;
    border-radius: 4px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    position: relative;
}

.pricing-card-featured {
    background-color: #1D2350;
}

.pricing-card-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    background-color: #B1DDF3;
    color: #1D2350;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-radius: 100px;
}

.pricing-card-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-card-tier {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    color: #6B6FA3;
    margin: 0;
}

.pricing-card-featured .pricing-card-tier {
    color: #B1DDF3;
}

.pricing-card-price {
    font-family: "gelica", sans-serif;
    font-size: 36px;
    color: #1D2350;
    margin: 0;
}

.pricing-card-featured .pricing-card-price {
    color: #fff;
}

.pricing-card-cadence {
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #9CA3AF;
    text-transform: capitalize;
    margin: 0;
}

.pricing-card-featured .pricing-card-cadence {
    color: rgba(255, 255, 255, 0.7);
}

.pricing-card-divider {
    height: 1px;
    background-color: rgba(2, 4, 4, 0.1);
    width: 100%;
}

.pricing-card-featured .pricing-card-divider {
    background-color: rgba(255, 255, 255, 0.2);
}

.pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-card-blurb {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: #4B5563;
    margin: 0;
}

.pricing-card-featured .pricing-card-blurb {
    font-weight: 600;
    color: #fff;
}

.pricing-card-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-card-feature span {
    font-family: "Avenir", "Lato", sans-serif;
    font-size: 18px;
    color: #4B5563;
}

.pricing-card-featured .pricing-card-feature span {
    font-weight: 600;
    color: #fff;
}

.pricing-card-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.pricing-card-bottom {
    width: 100%;
}

.pricing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
    border-radius: 4px;
    font-family: "Avenir", "Lato", sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.pricing-btn-muted {
    background-color: #F1F1F1;
    color: #1D2350;
}

.pricing-btn-light {
    background-color: #B1DDF3;
    color: #1D2350;
}

.pricing-btn-navy {
    background-color: #1D2350;
    color: #fff;
    width: auto;
    flex-shrink: 0;
    padding: 20px 30px;
}

.pricing-callout {
    background-color: #8D91C7;
    border-radius: 4px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.pricing-callout-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-callout-h {
    color: #fff;
    margin: 0;
}

.pricing-callout-p {
    font-family: "Avenir", "Lato", sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    max-width: 700px;
    margin: 0;
}

@media(min-width: 1024px) {
    .pricing-cards {
        flex-direction: row;
        align-items: stretch;
    }

    .pricing-card {
        flex: 1;
    }

    .pricing-callout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 80px;
    }
}

@media(min-width: 1024px) and (max-width: 1200px) {
    .service-logos {
        padding: 40px 0 40px;
    }

    .service-whatis {
        padding: 40px 0 80px;
    }

    .service-grid {
        padding: 50px 0;
    }

    .service-sec5 {
        padding: 40px 0;
        margin: 15px 0;
    }
}

@media(max-width: 1023px) {
    .service-sec2-sub-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }

    .service-sec2-img[data-aos^=fade][data-aos^=fade].aos-animate {
        width: 100%;
        /*         height: 280px; */
    }

    .service-logos {
        padding: 10px 0 10px;
    }
}

@media(max-width: 744px) {
    .service-sec2 {
        margin-top: 10px;
    }

    .service-logos {
        padding: 0;
    }

    .service-industries {
        padding: 10px 0;
    }
}