/* =========================================================
   MASTTPRO GROUP
   COMMON SERVICE PAGE TEMPLATE
   =========================================================

   IMPORTANT:
   All selectors are prefixed with "sp-"
   to reduce conflicts with existing website CSS.

   HTML:
   service-template.php

   DATA:
   service-data.php

   ========================================================= */


/* =========================================================
   01. SERVICE PAGE ROOT
   ========================================================= */

   .service-page-v2 {

    /* ---------------------------------------------
       COLOR SYSTEM
       --------------------------------------------- */

    --sp-primary: #0b2945;
    --sp-primary-dark: #061d34;

    --sp-blue: #2861a8;
    --sp-blue-dark: #1f4f8d;
    --sp-blue-light: #edf5ff;

    --sp-accent: #f2c94c;

    --sp-text: #172333;
    --sp-text-light: #667085;

    --sp-border: #e1e7ee;

    --sp-bg-light: #f5f7fa;
    --sp-bg-white: #ffffff;
    --sp-bg-np: #172333;
    /* ---------------------------------------------
       DIMENSIONS
       --------------------------------------------- */

    --sp-container-width: 1180px;

    --sp-radius-small: 6px;
    --sp-radius-medium: 14px;
    --sp-radius-large: 18px;

    /* ---------------------------------------------
       SHADOW
       --------------------------------------------- */

    --sp-shadow-small:
        0 6px 20px rgba(10, 35, 60, 0.05);

    --sp-shadow:
        0 10px 30px rgba(10, 35, 60, 0.07);

    --sp-shadow-hover:
        0 15px 35px rgba(10, 35, 60, 0.11);

    /* ---------------------------------------------
       TYPOGRAPHY
       --------------------------------------------- */

    color: var(--sp-text);

    /*! font-family:
        "Yantramanav",
        Arial,
        sans-serif; */

    box-sizing: border-box;

}


/* =========================================================
   02. BOX SIZING
   ========================================================= */

.service-page-v2 *,
.service-page-v2 *::before,
.service-page-v2 *::after {

    box-sizing: border-box;

}


/* =========================================================
   03. BASIC ELEMENT RESET
   ========================================================= */

.service-page-v2 h1,
.service-page-v2 h2,
.service-page-v2 h3,
.service-page-v2 h4,
.service-page-v2 p,
.service-page-v2 ul,
.service-page-v2 ol {

    margin-top: 0;

}

.service-page-v2 img {

    max-width: 100%;

}

.service-page-v2 a {

    text-decoration: none;

}

.service-page-v2 button {

    font-family: inherit;

}


/* =========================================================
   04. COMMON CONTAINER
   ========================================================= */

.service-page-v2 .sp-container {

    width: min(
        calc(100% - 40px),
        var(--sp-container-width)
    );

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   05. COMMON BUTTON
   ========================================================= */

.service-page-v2 .sp-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* PRIMARY BUTTON */

.service-page-v2 .sp-btn-primary {

    color: #ffffff;

    background:
        var(--sp-blue);

    box-shadow:
        0 6px 18px rgba(40, 97, 168, 0.18);

}

.service-page-v2 .sp-btn-primary:hover {

    color: #ffffff;

    background:
        var(--sp-primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px rgba(40, 97, 168, 0.22);

}


/* LIGHT BUTTON */

.service-page-v2 .sp-btn-light {

    color:
        var(--sp-primary);

    background:
        #ffffff;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);

}

.service-page-v2 .sp-btn-light:hover {

    color:
        var(--sp-primary);

    background:
        #f3f7fb;

    transform:
        translateY(-2px);

}


/* BUTTON ICON */

.service-page-v2 .sp-btn i {

    font-size: 11px;

}


/* =========================================================
   06. SERVICE OVERVIEW
   ========================================================= */

.service-page-v2 .sp-overview {

    padding:
        70px 0 80px;

    background:
        #f7f9fb;

}


/* MAIN GRID */

.service-page-v2 .sp-overview-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 48px;

    align-items: start;

}


/* =========================================================
   07. SERVICE IMAGE
   ========================================================= */

.service-page-v2 .sp-service-image {

    width: 100%;

    overflow: hidden;

    border-radius:
        var(--sp-radius-small);

    background:
        #e9eef3;

}

.service-page-v2 .sp-service-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   08. TOP CTA
   ========================================================= */

.service-page-v2 .sp-top-cta {

    display: flex;

    justify-content: center;

    margin:
        18px 0;

}


/* =========================================================
   09. FEATURE GRID
   ========================================================= */

.service-page-v2 .sp-feature-grid {

    display: grid;

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

    overflow: hidden;

    border:
        1px solid var(--sp-border);

    border-radius:
        5px;

    background:
        #ffffff;

}


/* FEATURE ITEM */

.service-page-v2 .sp-feature-item {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    min-height: 60px;

    padding:
        15px 16px;

    border-right:
        1px solid var(--sp-border);

    border-bottom:
        1px solid var(--sp-border);

    color:
        var(--sp-text);

    font-size: 17px;

    line-height: 1.45;

}


/* Remove right border */

.service-page-v2
.sp-feature-item:nth-child(even) {

    border-right:
        0;

}


/* LAST ROW */

.service-page-v2
.sp-feature-item:last-child {

    border-bottom:
        0;

}


/* CHECK ICON */

.service-page-v2 .sp-feature-item i {

    flex:
        0 0 auto;

    margin-top:
        2px;

    color:
        var(--sp-blue);

    font-size:
        16px;

}


/* =========================================================
   10. SERVICE SIDEBAR
   ========================================================= */

.service-page-v2 .sp-sidebar {

    position:
        relative;

}


/* SIDEBAR BOX */

.service-page-v2 .sp-sidebar-card {

    padding:
        18px;

    border-radius:
        6px;

    background:
        #e7eff1;

}


/* SIDEBAR TITLE */

.service-page-v2 .sp-sidebar-title {

    margin:
        0 0 14px;

    color:
        var(--sp-primary);

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.3;

}


/* SIDEBAR NAV */

.service-page-v2 .sp-service-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


/* SIDEBAR LINK */

.service-page-v2 .sp-service-nav a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    min-height:
        48px;

    padding:
        10px 13px;

    border-radius:
        5px;

    color:
        var(--sp-text);

    background:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.35;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


/* LINK TEXT */

.service-page-v2
.sp-service-nav a span {

    flex:
        1 1 auto;

}


/* ARROW */

.service-page-v2
.sp-service-nav a i {

    flex:
        0 0 auto;

    font-size:
        9px;

}


/* HOVER */

.service-page-v2
.sp-service-nav a:hover {

    color:
        #ffffff;

    background:
        var(--sp-blue);

    transform:
        translateX(2px);

}


/* ACTIVE */

.service-page-v2
.sp-service-nav a.active {

    color:
        #ffffff;

    background:
        var(--sp-blue);

}


/* =========================================================
   11. INTRO / HERO
   ========================================================= */

.service-page-v2 .sp-intro {

    position:
        relative;

    padding:
        76px 0;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        linear-gradient(
            110deg,
            #071e36 0%,
            #0b2945 60%,
            #123b59 100%
        );

}


/* HERO GRID */

.service-page-v2 .sp-intro-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        70px;

    /*! align-items:
        center; */

}


/* =========================================================
   12. HERO BADGE
   ========================================================= */

.service-page-v2 .sp-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        5px 11px;

    border-radius:
        50px;

    color:
        var(--sp-accent);

    background:
        rgba(242, 201, 76, 0.12);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.25px;

    line-height:
        1.4;

    text-transform:
        uppercase;

}


/* =========================================================
   13. HERO H1
   ========================================================= */

.service-page-v2 .sp-intro-content h1 {

    /*! max-width:
        650px; */

    margin:
        18px 0 20px;

    color:
        #ffffff;

    font-size:
        clamp(26px, 3.2vw, 26px);

    font-weight:
        700;

    line-height:
        1.4;

}


/* =========================================================
   14. HERO PARAGRAPH
   ========================================================= */

.service-page-v2 .sp-intro-content p {

    /*! max-width:
        650px; */

    margin:
        0 0 14px;

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

    font-size:
        17px;

    line-height:
        1.75;

    text-align: justify;
}


/* HERO BUTTON */

.service-page-v2
.sp-intro-content .sp-btn {

    margin-top:
        15px;

}


/* =========================================================
   15. CHALLENGE SECTION
   ========================================================= */

.service-page-v2 .sp-challenges {

    width:
        100%;

}


/* CHALLENGE HEADER */

.service-page-v2 .sp-challenge-header h2 {

    margin:
        14px 0 8px;

    color:
        #ffffff;

    font-size:
        26px;

    font-weight:
        700;

    line-height:
        1.25;

}


/* CHALLENGE DESCRIPTION */

.service-page-v2 .sp-challenge-header p {

    margin:
        0;

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

    font-size:
        17px;

    line-height:
        1.65;

    text-align: justify;
}


/* SMALL LABEL */

.service-page-v2 .sp-small-label {

    display:
        inline-flex;

    color:
        var(--sp-accent);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .25px;

}


/* =========================================================
   16. CHALLENGE GRID
   ========================================================= */

.service-page-v2 .sp-challenge-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        25px;

}


/* CHALLENGE CARD */

.service-page-v2 .sp-challenge-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        150px;

    padding:
        20px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        var(--sp-radius-medium);

    background:
        rgba(255, 255, 255, 0.07);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;

}


/* HOVER */

.service-page-v2
.sp-challenge-card:hover {

    background:
        rgba(255, 255, 255, 0.10);

    transform:
        translateY(-3px);

}


/* CHALLENGE ICON */

.service-page-v2 .sp-challenge-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    margin-bottom:
        16px;

    border-radius:
        50%;

    color:
        var(--sp-accent);

    background:
        rgba(242, 201, 76, 0.15);

    font-size:
        16px;

}


/* CHALLENGE TITLE */

.service-page-v2 .sp-challenge-card h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.45;

}


/* =========================================================
   17. COMMON SECTION
   ========================================================= */

.service-page-v2 .sp-section {

    padding:
        70px 0;

}


/* SOLUTIONS BACKGROUND */

.service-page-v2 .sp-solutions {

    background:
        #f4f7fa;

}


/* INDUSTRIES BACKGROUND */

.service-page-v2 .sp-industries {

    background:
        #ffffff;

}


/* INFORMATION BACKGROUND */

.service-page-v2 .sp-information {

    background:
        #f4f7fa;

}


/* =========================================================
   18. SECTION HEADING
   ========================================================= */

.service-page-v2 .sp-section-heading {

    max-width:
        700px;

    margin:
        0 auto 45px;

    text-align:
        center;

}


/* SECTION LABEL */

.service-page-v2 .sp-section-label {

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--sp-blue);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .35px;

    text-transform:
        uppercase;

}


/* SECTION H2 */

.service-page-v2 .sp-section-heading h2 {

    margin:
        12px 0 10px;

    color:
        var(--sp-primary);

    font-size:
        clamp(28px, 3vw, 38px);

    font-weight:
        700;

    line-height:
        1.2;

}


/* SECTION DESCRIPTION */

.service-page-v2 .sp-section-heading p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--sp-text-p);

    font-size:
        17px;

    line-height:
        1.7;

}


/* =========================================================
   19. SOLUTION CARD GRID
   ========================================================= */

.service-page-v2 .sp-card-grid {

    display:
        grid;

    gap:
        22px;

    align-items:
        stretch;

}
/* =========================================================
   SOLUTIONS GRID LAYOUT
   ========================================================= */

/* 2 COLUMNS */

.service-page-v2 .sp-solutions-grid-2 {

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

}


/* 3 COLUMNS */

.service-page-v2 .sp-solutions-grid-3 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}


/* 4 COLUMNS */

.service-page-v2 .sp-solutions-grid-4 {

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

}

/* FOUR COLUMNS */

.service-page-v2 .sp-card-grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}


/* THREE COLUMNS */

.service-page-v2 .sp-card-grid-3 {

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

}


/* =========================================================
   20. STANDARD CARD
   ========================================================= */

.service-page-v2 .sp-standard-card {

    display:
        flex;

    flex-direction:
        column;

    height:
        100%;

    padding:
        28px;

    border:
        1px solid var(--sp-border);

    border-radius:
        var(--sp-radius-medium);

    background:
        #ffffff;

    box-shadow:
        var(--sp-shadow);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* HOVER */

.service-page-v2 .sp-standard-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--sp-shadow-hover);

}


/* =========================================================
   21. CARD ICON
   ========================================================= */

.service-page-v2 .sp-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        18px;

    border-radius:
        12px;

    color:
        var(--sp-blue);

    background:
        var(--sp-blue-light);

    font-size:
        18px;

}


/* =========================================================
   22. STANDARD CARD HEADING
   ========================================================= */

.service-page-v2 .sp-standard-card h3 {

    min-height:
        44px;

    margin:
        0 0 18px;

    color:
        var(--sp-primary);

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.3;

}


/* =========================================================
   23. STANDARD CARD LIST
   ========================================================= */

.service-page-v2 .sp-standard-card ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* LIST ITEM */

.service-page-v2 .sp-standard-card li {

    position:
        relative;

    padding-left:
        17px;

    margin-bottom:
        11px;

    color:
        var(--sp-text-p);

    font-size:
        17px;

    line-height:
        1.55;

}


/* BULLET */

.service-page-v2 .sp-standard-card li::before {

    content:
        "";

    position:
        absolute;

    top:
        8px;

    left:
        0;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--sp-blue);

}


/* =========================================================
   24. INDUSTRY GRID
   ========================================================= */

.service-page-v2 .sp-industry-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

}

/* =========================================================
   INDUSTRIES GRID LAYOUT
   ========================================================= */

/* 2 COLUMNS */

.service-page-v2 .sp-industries-grid-2 {

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

}


/* 3 COLUMNS */

.service-page-v2 .sp-industries-grid-3 {

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

}


/* 4 COLUMNS */

.service-page-v2 .sp-industries-grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}
.service-page-v2 .sp-industries-grid-5 {

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

}
/* INDUSTRY CARD */

.service-page-v2 .sp-industry-card {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        170px;

    padding:
        25px;

    border:
        1px solid var(--sp-border);

    border-radius:
        var(--sp-radius-medium);

    background:
        #ffffff;

    text-align:
        center;

    box-shadow:
        var(--sp-shadow-small);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* HOVER */

.service-page-v2 .sp-industry-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--sp-shadow-hover);

}


/* INDUSTRY ICON */

.service-page-v2 .sp-industry-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        17px;

    border-radius:
        14px;

    color:
        var(--sp-blue);

    background:
        var(--sp-blue-light);

    font-size:
        20px;

}


/* INDUSTRY TITLE */

.service-page-v2 .sp-industry-card h3 {

    margin:
        0;

    color:
        var(--sp-primary);

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.4;

}


/* =========================================================
   25. INFORMATION CARDS
   ========================================================= */

.service-page-v2 .sp-info-card {

    display:
        flex;

    flex-direction:
        column;

    height:
        100%;

    padding:
        28px;

    border:
        1px solid var(--sp-border);

    border-radius:
        var(--sp-radius-medium);

    background:
        #ffffff;

    box-shadow:
        var(--sp-shadow);

}


/* INFORMATION HEADING */

.service-page-v2 .sp-info-card h2 {

    margin:
        0 0 24px;

    color:
        var(--sp-primary);

    font-size:
        20px !important;

    font-weight:
        700;

    line-height:
        1.3;

}


/* =========================================================
   26. PROCESS LIST
   ========================================================= */

.service-page-v2 .sp-process-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* PROCESS ITEM */

.service-page-v2 .sp-process-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

}


/* PROCESS NUMBER */

.service-page-v2 .sp-process-list li span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 29px;

    width:
        29px;

    height:
        29px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        var(--sp-blue);

    font-size:
        10px;

    font-weight:
        700;

}


/* PROCESS TEXT */

.service-page-v2 .sp-process-list li p {

    margin:
        4px 0 0;

    color:
        var(--sp-text-p);

    font-size:
        17px;

    line-height:
        1.5;

}


/* =========================================================
   27. CHECK LIST
   ========================================================= */

.service-page-v2 .sp-check-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* CHECK ITEM */

.service-page-v2 .sp-check-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        13px;

    color:
        var(--sp-text-p);

    font-size:
        17px;

    line-height:
        1.5;

}


/* CHECK ICON */

.service-page-v2 .sp-check-list li i {

    flex:
        0 0 auto;

    margin-top:
        3px;

    color:
        var(--sp-blue);

    font-size:
        16px;

}


/* =========================================================
   28. FAQ
   ========================================================= */

.service-page-v2 .sp-faq {

    background:
        #eaf1f8;

}


/* FAQ HEADING */

.service-page-v2 .sp-faq-heading {

    margin-bottom:
        30px;

}


/* FAQ WRAPPER */

.service-page-v2 .sp-faq-wrapper {

    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

}


/* FAQ ITEM */

.service-page-v2 .sp-faq-item {

    overflow:
        hidden;

    margin-bottom:
        10px;

    border:
        1px solid #dbe3eb;

    border-radius:
        6px;

    background:
        #ffffff;

}


/* FAQ QUESTION */

.service-page-v2 .sp-faq-question {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    width:
        100%;

    min-height:
        58px;

    padding:
        15px 20px;

    border:
        0;

    outline:
        0;

    color:
        var(--sp-primary);

    background:
        #ffffff;

    font-family:
        inherit;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.4;

    text-align:
        left;

    cursor:
        pointer;

}


/* QUESTION HOVER */

.service-page-v2
.sp-faq-question:hover {

    background:
        #f7faff;

}


/* QUESTION ICON */

.service-page-v2 .sp-faq-question i {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 26px;

    width:
        26px;

    height:
        26px;

    border:
        1px solid #dce4ec;

    border-radius:
        50%;

    color:
        var(--sp-blue);

    font-size:
        10px;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;

}


/* FAQ ANSWER */

.service-page-v2 .sp-faq-answer {

    padding:
        0 20px 20px;

}


/* ANSWER TEXT */

.service-page-v2 .sp-faq-answer p {

    margin:
        0;

    color:
        var(--sp-text-p);

    font-size:
        17px;

    line-height:
        1.7;

    margin-top: 16px;
    text-align: justify;
}


/* ACTIVE ITEM */

.service-page-v2 .sp-faq-item.active {

    border-color:
        var(--sp-blue);

}


/* ACTIVE QUESTION */

.service-page-v2
.sp-faq-item.active
.sp-faq-question {

    color:
        #ffffff;

    background:
        var(--sp-blue);

}


/* ACTIVE ICON */

.service-page-v2
.sp-faq-item.active
.sp-faq-question i {

    color:
        #ffffff;

    border-color:
        rgba(255,255,255,.45);

    transform:
        rotate(45deg);

}


/* =========================================================
   29. TABLET — 1100PX
   ========================================================= */

@media (max-width: 1100px) {


    /* OVERVIEW */

    .service-page-v2 .sp-overview-grid {

        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap:
            30px;

    }


    /* SOLUTIONS */

    .service-page-v2 .sp-card-grid-4 {

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

    }


    /* INDUSTRIES */

    .service-page-v2 .sp-industry-grid {

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

    }


}
/* =========================================================
   TABLET — 1100PX
   ========================================================= */

   @media (max-width: 1100px) {


    /* ---------------------------------------------
       SOLUTIONS
       --------------------------------------------- */

    .service-page-v2 .sp-solutions-grid-3,
    .service-page-v2 .sp-solutions-grid-4 {

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

    }


    /* ---------------------------------------------
       INDUSTRIES
       --------------------------------------------- */

    .service-page-v2 .sp-industries-grid-3,
    .service-page-v2 .sp-industries-grid-4 {

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

    }

}

/* =========================================================
   30. TABLET — 900PX
   ========================================================= */

@media (max-width: 900px) {


    /* OVERVIEW */

    .service-page-v2 .sp-overview-grid {

        grid-template-columns:
            1fr;

    }


    /* INTRO */

    .service-page-v2 .sp-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    /* INFORMATION */

    .service-page-v2 .sp-card-grid-3 {

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

    }
    .sp-sidebar{
        display: none;
    }

}


/* =========================================================
   31. MOBILE — 767PX
   ========================================================= */

@media (max-width: 767px) {


    /* CONTAINER */

    .service-page-v2 .sp-container {

        width:
            calc(100% - 30px);

    }


    /* OVERVIEW */

    .service-page-v2 .sp-overview {

        padding:
            50px 0 55px;

    }


    /* COMMON SECTION */

    .service-page-v2 .sp-section {

        padding:
            55px 0;

    }


    /* INTRO */

    .service-page-v2 .sp-intro {

        padding:
            55px 0;

    }


    /* IMAGE */

    .service-page-v2 .sp-service-image img {

        height:
            230px;

    }


    /* FEATURES */

    .service-page-v2 .sp-feature-grid {

        grid-template-columns:
            1fr;

    }


    .service-page-v2 .sp-feature-item {

        border-right:
            0;

    }


    /* CHALLENGES */

    .service-page-v2 .sp-challenge-grid {

        grid-template-columns:
            1fr;

    }


    .service-page-v2 .sp-challenge-card {

        min-height:
            auto;

    }


    /* HERO TITLE */

    .service-page-v2 .sp-intro-content h1 {

        font-size:
            30px;

        line-height:
            1.15;

    }


    /* HERO TEXT */

    .service-page-v2 .sp-intro-content p {

        font-size:
            16px;

    }


    /* SECTION HEADING */

    .service-page-v2 .sp-section-heading {

        margin-bottom:
            30px;

    }


    .service-page-v2 .sp-section-heading h2 {

        font-size:
            28px;

    }


    /* SOLUTION */

    .service-page-v2 .sp-card-grid-4 {

        grid-template-columns:
            1fr;

    }


    /* INFORMATION */

    .service-page-v2 .sp-card-grid-3 {

        grid-template-columns:
            1fr;

    }


    /* INDUSTRIES */

    .service-page-v2 .sp-industry-grid {

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

        gap:
            12px;

    }


    .service-page-v2 .sp-industry-card {

        min-height:
            150px;

        padding:
            18px 12px;

    }


    .service-page-v2 .sp-industry-card h3 {

        font-size:
            13px;

    }


    /* CARDS */

    .service-page-v2 .sp-standard-card,
    .service-page-v2 .sp-info-card {

        padding:
            23px;

    }


    /* FAQ */

    .service-page-v2 .sp-faq-question {

        min-height:
            55px;

        padding:
            14px 15px;

        font-size:
            16px;

    }


    .service-page-v2 .sp-faq-answer {

        padding:
            0 15px 17px;

    }


}
/* =========================================================
   MOBILE — 767PX
   ========================================================= */

   @media (max-width: 767px) {


    /* ---------------------------------------------
       SOLUTIONS
       --------------------------------------------- */

    .service-page-v2 .sp-solutions-grid-2,
    .service-page-v2 .sp-solutions-grid-3,
    .service-page-v2 .sp-solutions-grid-4 {

        grid-template-columns:
            1fr;

    }


    /* ---------------------------------------------
       INDUSTRIES
       --------------------------------------------- */

    .service-page-v2 .sp-industries-grid-2,
    .service-page-v2 .sp-industries-grid-3,
    .service-page-v2 .sp-industries-grid-4 {

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

    }

}

/* =========================================================
   32. SMALL MOBILE — 480PX
   ========================================================= */

@media (max-width: 480px) {


    /* CONTAINER */

    .service-page-v2 .sp-container {

        width:
            calc(100% - 24px);

    }


    /* IMAGE */

    .service-page-v2 .sp-service-image img {

        height:
            190px;

    }


    /* SIDEBAR */

    .service-page-v2 .sp-sidebar-card {

        padding:
            14px;

    }


    /* HERO TITLE */

    .service-page-v2 .sp-intro-content h1 {

        font-size:
            27px;

    }


    /* CHALLENGE */

    .service-page-v2 .sp-challenge-card {

        padding:
            18px;

    }


    /* INDUSTRIES */

    .service-page-v2 .sp-industry-grid {

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

    }


    .service-page-v2 .sp-industry-card {

        min-height:
            140px;

        padding:
            16px 10px;

    }


    .service-page-v2 .sp-industry-icon {

        width:
            46px;

        height:
            46px;

        margin-bottom:
            13px;

        font-size:
            17px;

    }


    .service-page-v2 .sp-industry-card h3 {

        font-size:
            18px;

    }


}


/* =========================================================
   33. VERY SMALL MOBILE — 360PX
   ========================================================= */

@media (max-width: 360px) {


    .service-page-v2 .sp-container {

        width:
            calc(100% - 30px);

    }


    .service-page-v2 .sp-intro-content h1 {

        font-size:
            25px;

    }


    .service-page-v2 .sp-section-heading h2 {

        font-size:
            25px !important;

    }


    .service-page-v2 .sp-industry-grid {

        grid-template-columns:
            1fr;

    }


    .service-page-v2 .sp-industry-card {

        min-height:
            125px;

    }


}
/* =========================================================
   VERY SMALL MOBILE — 360PX
   ========================================================= */

   @media (max-width: 360px) {


    .service-page-v2 .sp-industries-grid-2,
    .service-page-v2 .sp-industries-grid-3,
    .service-page-v2 .sp-industries-grid-4 {

        grid-template-columns:
            1fr;

    }

}