/* =========================================================
   COMMON SERVICE DETAILS PAGES
   ========================================================= */

.service-page {
    background: #ffffff;
    color: #1d2939;
}


/* HERO
--------------------------------------------------------- */

.service-page-hero {
    position: relative;
    padding: 150px 0 125px;
    background:
        linear-gradient(
            135deg,
            #0d4775 0%,
            #2777b9 55%,
            #3f8bc3 100%
        );
    overflow: hidden;
}

.service-page-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    right: -150px;
    top: -180px;
}

.service-page-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    left: -100px;
    bottom: -150px;
}

.service-page-hero .container {
    position: relative;
    z-index: 2;
}

.service-page-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 30px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.service-page-hero h1 {
    max-width: 850px;
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 54px;
    line-height: 1.15;
    font-weight: 700;
}

.service-page-hero p {
    max-width: 760px;
    margin-left: 260px;
    color: rgba(255,255,255,.86);
    font-size: 18px;
    line-height: 1.8;
}


/* BUTTON
--------------------------------------------------------- */

.service-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: 6px;
    background: #ffffff;
    color: #2777b9;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.service-page-btn:hover {
    transform: translateY(-3px);
    color: #ffffff;
    background: #1d2939;
}


/* MAIN CONTENT
--------------------------------------------------------- */

.service-content-section {
    padding: 100px 0;
}

.service-intro {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
}

.service-small-title {
    display: inline-block;
    margin-bottom: 12px;
    color: #2777b9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.service-intro h2,
.service-text-section h2,
.service-process-heading h2 {
    margin-bottom: 20px;
    color: #172b4d;
    font-size: 38px;
    line-height: 1.25;
}

.service-intro p,
.service-text-section > p {
    margin-bottom: 15px;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}


/* FEATURE CARDS
--------------------------------------------------------- */

.service-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 100px;
}

.service-feature {
    position: relative;
    padding: 32px 26px;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    background: #ffffff;
    transition: all .3s ease;
}

.service-feature:hover {
    transform: translateY(-6px);
    border-color: #2777b9;
    box-shadow: 0 15px 40px rgba(39,119,185,.10);
}

.feature-number {
    margin-bottom: 22px;
    color: #2777b9;
    font-size: 14px;
    font-weight: 700;
}

.service-feature h3 {
    margin-bottom: 12px;
    color: #172b4d;
    font-size: 20px;
}

.service-feature p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}


/* SERVICE LIST
--------------------------------------------------------- */

.service-text-section {
    max-width: 1000px;
    margin: 0 auto 100px;
}

.service-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 40px;
}

.service-list-item {
    display: flex;
    gap: 18px;
    padding: 25px;
    border-radius: 10px;
    background: #f7f9fb;
}

.service-list-item > span {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2777b9;
    color: #ffffff;
}

.service-list-item h3 {
    margin: 0 0 7px;
    color: #172b4d;
    font-size: 18px;
}

.service-list-item p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}


/* PROCESS
--------------------------------------------------------- */

.service-process {
    padding: 70px 0;
    border-top: 1px solid #e8edf2;
    border-bottom: 1px solid #e8edf2;
}

.service-process-heading {
    margin-bottom: 40px;
    text-align: center;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.process-item {
    padding: 28px;
    border-radius: 10px;
    background: #f7f9fb;
}

.process-item > span {
    display: block;
    margin-bottom: 20px;
    color: #2777b9;
    font-size: 14px;
    font-weight: 700;
}

.process-item h3 {
    margin-bottom: 10px;
    color: #172b4d;
    font-size: 19px;
}

.process-item p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}


/* CTA
--------------------------------------------------------- */

.service-note {
    margin-top: 80px;
    padding: 50px;
    border-radius: 14px;
    background: #172b4d;
    text-align: center;
}

.service-note h3 {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 30px;
}

.service-note p {
    max-width: 750px;
    margin: 0 auto 25px;
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}


/* RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 991px) {

    .service-page-hero {
        padding: 110px 0 90px;
    }

    .service-page-hero h1 {
        font-size: 42px;
    }

    .service-feature-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-content-section {
        padding: 80px 0;
    }
}


@media (max-width: 767px) {

    .service-page-hero {
        padding: 90px 0 75px;
    }

    .service-page-hero h1 {
        font-size: 34px;
    }

    .service-page-hero p {
        font-size: 16px;
    }

    .service-intro h2,
    .service-text-section h2,
    .service-process-heading h2 {
        font-size: 30px;
    }

    .service-feature-grid,
    .service-list-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .service-feature-grid {
        margin-bottom: 70px;
    }

    .service-text-section {
        margin-bottom: 70px;
    }

    .service-note {
        padding: 35px 22px;
    }

    .service-note h3 {
        font-size: 25px;
    }
}

/* =========================================================
   CLICKABLE SERVICE ITEMS
   ========================================================= */

.service-list-item {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f7f9fb;
    text-decoration: none;
    transition: all .3s ease;
    cursor: pointer;
}

.service-list-item:hover {
    transform: translateY(-4px);
    border-color: #2777b9;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(39,119,185,.10);
}

.service-list-item h3 {
    transition: color .3s ease;
}

.service-list-item:hover h3 {
    color: #2777b9;
}

.service-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #2777b9;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

.service-learn-more i {
    transition: transform .3s ease;
}

.service-list-item:hover .service-learn-more i {
    transform: translateX(4px);
}
/* =========================================================
   MAVENTRA SERVICE PAGES - FINAL BEAUTY CSS
   Add this CSS at the VERY END of style.css
   No PHP/HTML changes required
   ========================================================= */


/* ---------------------------------------------------------
   1. SERVICE PAGE MAIN CONTENT
   --------------------------------------------------------- */

.service-page,
.service-details,
.service-details-area,
.service-area {
    position: relative;
}


/* Center the complete service content */

.service-page .section-title,
.service-details .section-title,
.service-details-area .section-title,
.service-area .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* Service heading */

.service-page h1,
.service-details h1,
.service-details-area h1,
.service-area h1 {
    text-align: center;
    font-weight: 800;
    color: #12355b;
    margin-bottom: 12px;
}


/* Service subtitle / tagline */

.service-page .tagline,
.service-details .tagline,
.service-details-area .tagline,
.service-area .tagline {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 15px;
}


/* Main description */

.service-page .service-description,
.service-details .service-description,
.service-details-area .service-description,
.service-area .service-description {
    max-width: 850px;
    margin: 0 auto 35px auto;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}


/* If your description is simply inside a paragraph */

.service-page .section-title p,
.service-details .section-title p,
.service-details-area .section-title p,
.service-area .section-title p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   2. SERVICE CONTENT TEXT
   --------------------------------------------------------- */

.service-page .content-box,
.service-details .content-box,
.service-details-area .content-box,
.service-area .content-box {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
}


.service-page .content-box p,
.service-details .content-box p,
.service-details-area .content-box p,
.service-area .content-box p {
    line-height: 1.8;
    color: #666;
}


/* Center common service page paragraphs */

.service-page > .container > .row > div > p,
.service-details > .container > .row > div > p,
.service-details-area > .container > .row > div > p {
    text-align: center;
}


/* ---------------------------------------------------------
   3. WHY CHOOSE US SECTION
   --------------------------------------------------------- */

.why-choose-service,
.service-why-choose,
.why-choose-area {
    position: relative;
    padding-top: 70px;
    padding-bottom: 50px;
}


/* Center Why Choose heading */

.why-choose-service .section-title,
.service-why-choose .section-title,
.why-choose-area .section-title {
    text-align: center;
    margin-bottom: 45px;
}


.why-choose-service .section-title h2,
.service-why-choose .section-title h2,
.why-choose-area .section-title h2 {
    font-size: 34px;
    font-weight: 800;
    color: #12355b;
    margin-bottom: 12px;
}


.why-choose-service .section-title p,
.service-why-choose .section-title p,
.why-choose-area .section-title p {
    max-width: 700px;
    margin: 0 auto;
    color: #777;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   4. WHY CHOOSE CARDS
   --------------------------------------------------------- */

/*
   These rules target Bootstrap-style columns/card layouts
   commonly used in your service pages.
*/

.why-choose-service .card,
.service-why-choose .card,
.why-choose-area .card {
    height: 100%;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    background: #ffffff;
    padding: 30px 25px;
    box-shadow: 0 8px 25px rgba(18, 53, 91, 0.07);
    transition: all 0.35s ease;
}


/* Hover */

.why-choose-service .card:hover,
.service-why-choose .card:hover,
.why-choose-area .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(18, 53, 91, 0.14);
    border-color: rgba(21, 101, 192, 0.25);
}


/* ---------------------------------------------------------
   5. IF YOUR WHY CHOOSE ITEMS ARE NOT USING .card
   --------------------------------------------------------- */

.why-choose-service .feature-box,
.service-why-choose .feature-box,
.why-choose-area .feature-box,
.why-choose-service .single-item,
.service-why-choose .single-item,
.why-choose-area .single-item {
    height: 100%;
    padding: 30px 25px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(18, 53, 91, 0.07);
    transition: all 0.35s ease;
}


.why-choose-service .feature-box:hover,
.service-why-choose .feature-box:hover,
.why-choose-area .feature-box:hover,
.why-choose-service .single-item:hover,
.service-why-choose .single-item:hover,
.why-choose-area .single-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(18, 53, 91, 0.14);
}


/* ---------------------------------------------------------
   6. WHY CHOOSE CARD ICON
   --------------------------------------------------------- */

.why-choose-service .icon,
.service-why-choose .icon,
.why-choose-area .icon,
.why-choose-service .icon-box,
.service-why-choose .icon-box,
.why-choose-area .icon-box {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px auto;

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

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #4fc3f7 0%,
        #1565c0 55%,
        #455a64 100%
    );

    color: #ffffff;
    font-size: 27px;

    box-shadow: 0 8px 20px rgba(21, 101, 192, 0.22);

    transition: all 0.35s ease;
}


.why-choose-service .card:hover .icon,
.service-why-choose .card:hover .icon,
.why-choose-area .card:hover .icon,
.why-choose-service .feature-box:hover .icon,
.service-why-choose .feature-box:hover .icon,
.why-choose-area .feature-box:hover .icon {
    transform: scale(1.08) rotate(3deg);
}


/* ---------------------------------------------------------
   7. WHY CHOOSE CARD TITLE
   --------------------------------------------------------- */

.why-choose-service .card h3,
.service-why-choose .card h3,
.why-choose-area .card h3,
.why-choose-service .feature-box h3,
.service-why-choose .feature-box h3,
.why-choose-area .feature-box h3,
.why-choose-service .single-item h3,
.service-why-choose .single-item h3,
.why-choose-area .single-item h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #12355b;
    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   8. WHY CHOOSE CARD DESCRIPTION
   --------------------------------------------------------- */

.why-choose-service .card p,
.service-why-choose .card p,
.why-choose-area .card p,
.why-choose-service .feature-box p,
.service-why-choose .feature-box p,
.why-choose-area .feature-box p,
.why-choose-service .single-item p,
.service-why-choose .single-item p,
.why-choose-area .single-item p {
    text-align: center;
    color: #707070;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   9. BOOTSTRAP COLUMN SPACING
   --------------------------------------------------------- */

.why-choose-service .row > [class*="col-"],
.service-why-choose .row > [class*="col-"],
.why-choose-area .row > [class*="col-"] {
    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   10. SERVICE INTRO BOX
   --------------------------------------------------------- */

.service-intro,
.service-overview,
.service-description-box {
    max-width: 1000px;
    margin: 0 auto 50px auto;
    padding: 35px 40px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #f7fbff,
        #eef5fa
    );

    border: 1px solid #e0eaf3;
    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(18, 53, 91, 0.06);
}


/* ---------------------------------------------------------
   11. SERVICE PAGE SECTION SPACING
   --------------------------------------------------------- */

.service-page section,
.service-details section,
.service-details-area section {
    position: relative;
}


/* ---------------------------------------------------------
   12. SERVICE BREADCRUMB / HERO TEXT
   --------------------------------------------------------- */

.service-breadcrumb,
.service-banner,
.breadcrumb-area {
    text-align: center;
}


.service-breadcrumb h1,
.service-banner h1,
.breadcrumb-area h1 {
    text-align: center;
}


/* ---------------------------------------------------------
   13. BUTTON BEAUTIFICATION
   --------------------------------------------------------- */

.service-page .theme-btn,
.service-details .theme-btn,
.service-details-area .theme-btn,
.service-area .theme-btn {
    border-radius: 50px;
    padding: 13px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}


.service-page .theme-btn:hover,
.service-details .theme-btn:hover,
.service-details-area .theme-btn:hover,
.service-area .theme-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(21, 101, 192, 0.22);
}


/* ---------------------------------------------------------
   14. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .service-page .section-title h2,
    .service-details .section-title h2,
    .service-details-area .section-title h2,
    .service-area .section-title h2 {
        font-size: 30px;
    }

    .service-page .section-title p,
    .service-details .section-title p,
    .service-details-area .section-title p,
    .service-area .section-title p {
        font-size: 15px;
    }

    .service-intro,
    .service-overview,
    .service-description-box {
        padding: 28px 25px;
    }

}


@media (max-width: 575px) {

    .service-page h1,
    .service-details h1,
    .service-details-area h1,
    .service-area h1 {
        font-size: 28px;
    }

    .why-choose-service .section-title h2,
    .service-why-choose .section-title h2,
    .why-choose-area .section-title h2 {
        font-size: 27px;
    }

    .why-choose-service .card,
    .service-why-choose .card,
    .why-choose-area .card,
    .why-choose-service .feature-box,
    .service-why-choose .feature-box,
    .why-choose-area .feature-box {
        padding: 25px 20px;
    }

    .service-intro,
    .service-overview,
    .service-description-box {
        padding: 25px 20px;
    }

}


/* =========================================================
   EXTRA: FORCE CENTER ALIGNMENT FOR COMMON SERVICE CONTENT
   ========================================================= */

.service-page .container,
.service-details .container,
.service-details-area .container {
    text-align: center;
}


.service-page .row,
.service-details .row,
.service-details-area .row {
    justify-content: center;
}


/* Don't disturb card/column layout */

.service-page .row > [class*="col-"],
.service-details .row > [class*="col-"],
.service-details-area .row > [class*="col-"] {
    text-align: center;
}


/* =========================================================
   END SERVICE PAGE CSS
   ========================================================= */

   /* =========================================================
   MAVENTRA FINSERV
   SERVICE DETAILS PAGES
   Exact CSS for existing service PHP structure
   ========================================================= */


/* =========================================================
   PAGE BASE
   ========================================================= */

.service-page {
    width: 100%;
    background: #ffffff;
    color: #172b3a;
    font-family: "Inter", sans-serif;
    overflow: hidden;
}

.service-page *,
.service-page *::before,
.service-page *::after {
    box-sizing: border-box;
}

.service-page .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}


/* =========================================================
   HERO SECTION
   ========================================================= */

.service-page-hero {
    position: relative;
    width: 100%;
    min-height: 570px;

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

    padding: 125px 20px 90px;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(255,255,255,0.14) 0,
            rgba(255,255,255,0.04) 180px,
            transparent 320px
        ),
        linear-gradient(
            135deg,
            #0b4d82 0%,
            #1469a3 48%,
            #3292cf 100%
        );
}


/* Decorative circle top right */

.service-page-hero::before {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    top: -175px;
    right: -90px;

    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
}


/* Decorative circle bottom left */

.service-page-hero::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -170px;
    left: -130px;

    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}


/* Hero container */

.service-page-hero .container {
    position: relative;
    z-index: 2;

    max-width: 1000px;

    margin: 0 auto;
}


/* =========================================================
   HERO LABEL
   ========================================================= */

.service-page-label {
    display: inline-flex;

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

    padding: 9px 22px;
    margin-bottom: 24px;

    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 50px;

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

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 1.1px;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   HERO HEADING
   ========================================================= */

.service-page-hero h1 {
    max-width: 900px;

    margin: 0 auto 20px;

    color: #ffffff !important;

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

    font-size: 54px;
    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.2px;

    text-align: center;

    text-shadow:
        0 3px 15px rgba(0,0,0,0.13);
}


/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.service-page-hero p {
    max-width: 780px;

    margin: 0 auto 32px;

    color: rgba(255,255,255,0.92) !important;

    font-size: 17px;

    line-height: 1.8;

    font-weight: 400;

    text-align: center;
}


/* =========================================================
   HERO / CTA BUTTON
   ========================================================= */

.service-page-btn {
    position: relative;

    display: inline-flex;

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

    gap: 12px;

    min-height: 54px;

    padding: 14px 27px;

    border: 0;

    border-radius: 8px;

    background: #ffffff;

    color: #1264a3 !important;

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

    font-size: 15px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.15);

    transition:
        all 0.3s ease;
}


.service-page-btn i {
    font-size: 14px;

    transition:
        transform 0.3s ease;
}


.service-page-btn:hover {
    color: #0b4d82 !important;

    background: #f5faff;

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(0,0,0,0.20);
}


.service-page-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.service-content-section {
    width: 100%;

    padding: 90px 20px 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfe 100%
        );
}


/* =========================================================
   INTRO
   ========================================================= */

.service-intro {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


.service-small-title {
    display: inline-block;

    margin-bottom: 12px;

    color: #1974ad;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.service-intro h2,
.service-text-section h2,
.service-process-heading h2 {
    margin: 0 auto 18px;

    color: #123b5b;

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

    font-size: 36px;
    line-height: 1.25;

    font-weight: 800;

    text-align: center;
}


.service-intro p,
.service-text-section > p {
    max-width: 820px;

    margin: 0 auto 15px;

    color: #647483;

    font-size: 16px;

    line-height: 1.85;

    text-align: center;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.service-feature-grid {
    display: grid;

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

    gap: 22px;

    margin-bottom: 85px;
}


.service-feature {
    position: relative;

    min-height: 245px;

    padding: 32px 25px;

    background: #ffffff;

    border: 1px solid #e4edf4;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 8px 28px rgba(19,71,105,0.07);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Top accent */

.service-feature::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #0d4f85,
            #36a0dc
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;
}


.service-feature:hover {
    transform: translateY(-8px);

    border-color: #c9dfed;

    box-shadow:
        0 18px 40px rgba(19,71,105,0.12);
}


.service-feature:hover::before {
    transform: scaleX(1);
}


/* Feature number */

.feature-number {
    width: 58px;
    height: 58px;

    margin: 0 auto 20px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e5f4ff,
            #d4eafa
        );

    color: #1269a5;

    font-size: 15px;
    font-weight: 800;

    box-shadow:
        inset 0 0 0 1px rgba(18,105,165,0.08);
}


.service-feature h3 {
    margin: 0 0 11px;

    color: #173e5b;

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

    font-size: 20px;

    line-height: 1.3;

    font-weight: 750;
}


.service-feature p {
    margin: 0;

    color: #6a7985;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   TEXT SECTIONS
   ========================================================= */

.service-text-section {
    max-width: 1000px;

    margin: 0 auto 75px;

    text-align: center;
}


.service-text-section .service-small-title {
    margin-bottom: 12px;
}


.service-text-section h2 {
    max-width: 850px;
}


/* =========================================================
   LOAN / SERVICE LIST
   ========================================================= */

.service-list-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;

    text-align: left;
}


.service-list-item {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 25px 24px;

    background: #ffffff;

    border: 1px solid #e5edf3;

    border-radius: 14px;

    box-shadow:
        0 7px 25px rgba(20,72,105,0.05);

    transition:
        all 0.3s ease;
}


.service-list-item:hover {
    transform: translateY(-5px);

    border-color: #c8deed;

    box-shadow:
        0 14px 32px rgba(20,72,105,0.10);
}


/* Check icon box */

.service-list-item > span {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e8f6ff,
            #d9edfa
        );

    color: #1774ad;

    font-size: 15px;
}


.service-list-item h3 {
    margin: 0 0 7px;

    color: #173e5b;

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

    font-size: 19px;

    line-height: 1.3;

    font-weight: 750;
}


.service-list-item p {
    margin: 0;

    color: #6a7985;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PROCESS SECTION
   ========================================================= */

.service-process {
    position: relative;

    margin: 80px 0;

    padding: 70px 45px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f0f8fd 0%,
            #f8fbfe 100%
        );

    border: 1px solid #deebf3;

    overflow: hidden;
}


/* Decorative process background */

.service-process::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(23,116,173,0.10);
}


.service-process-heading {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;
}


.service-process-heading h2 {
    margin-bottom: 0;
}


/* Process grid */

.process-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 20px;
}


/* Process item */

.process-item {
    position: relative;

    padding: 28px 22px;

    background: #ffffff;

    border: 1px solid #e1ebf2;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 7px 25px rgba(20,72,105,0.05);

    transition:
        all 0.3s ease;
}


.process-item:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 32px rgba(20,72,105,0.10);
}


/* Process number */

.process-item > span {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin: 0 auto 17px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0e5c91,
            #2386c2
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(18,105,165,0.20);
}


.process-item h3 {
    margin: 0 0 9px;

    color: #173e5b;

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

    font-size: 19px;

    font-weight: 750;
}


.process-item p {
    margin: 0;

    color: #6a7985;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.service-note {
    position: relative;

    max-width: 900px;

    margin: 80px auto 0;

    padding: 50px 40px;

    border-radius: 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #0d4f85 0%,
            #1978b7 55%,
            #3095d1 100%
        );

    overflow: hidden;

    box-shadow:
        0 18px 45px rgba(13,79,133,0.18);
}


.service-note::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -130px;
    right: -70px;

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

    border-radius: 50%;
}


.service-note::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    bottom: -100px;
    left: -50px;

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

    border-radius: 50%;
}


.service-note h3,
.service-note p,
.service-note a {
    position: relative;

    z-index: 2;
}


.service-note h3 {
    margin: 0 0 13px;

    color: #ffffff;

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

    font-size: 31px;

    line-height: 1.25;

    font-weight: 800;
}


.service-note p {
    max-width: 700px;

    margin: 0 auto 28px;

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

    font-size: 15px;

    line-height: 1.8;
}


.service-note .service-page-btn {
    background: #ffffff;

    color: #1264a3 !important;
}


/* =========================================================
   FIX EXISTING TEMPLATE ALIGNMENT
   ========================================================= */

.service-page h1,
.service-page h2,
.service-page h3,
.service-page p {
    text-align: center;
}


.service-page a {
    text-decoration: none;
}


/* Don't allow Bootstrap rows to destroy our spacing */

.service-page .row {
    width: 100%;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .service-page-hero {
        min-height: 530px;

        padding: 115px 20px 80px;
    }


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


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


    .process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


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


    .service-process {
        padding: 55px 30px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .service-page-hero {
        min-height: 500px;

        padding: 105px 18px 70px;
    }


    .service-page-label {
        font-size: 11px;

        padding: 8px 17px;

        margin-bottom: 18px;
    }


    .service-page-hero h1 {
        font-size: 35px;

        line-height: 1.16;

        letter-spacing: -0.5px;
    }


    .service-page-hero p {
        font-size: 15px;

        line-height: 1.7;
    }


    .service-content-section {
        padding: 65px 18px 75px;
    }


    .service-intro {
        margin-bottom: 50px;
    }


    .service-intro h2,
    .service-text-section h2,
    .service-process-heading h2 {
        font-size: 29px;

        line-height: 1.3;
    }


    .service-intro p,
    .service-text-section > p {
        font-size: 15px;
    }


    .service-feature-grid {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 60px;
    }


    .service-feature {
        min-height: auto;

        padding: 28px 23px;
    }


    .service-list-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .service-list-item {
        padding: 22px 18px;
    }


    .service-process {
        margin: 60px 0;

        padding: 45px 18px;

        border-radius: 17px;
    }


    .process-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .process-item {
        padding: 25px 20px;
    }


    .service-note {
        margin-top: 60px;

        padding: 40px 22px;

        border-radius: 17px;
    }


    .service-note h3 {
        font-size: 27px;
    }


    .service-note p {
        font-size: 14px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .service-page-hero {
        min-height: 470px;

        padding: 95px 15px 60px;
    }


    .service-page-hero h1 {
        font-size: 30px;
    }


    .service-page-hero p {
        font-size: 14px;
    }


    .service-page-btn {
        width: 100%;

        max-width: 290px;

        padding: 14px 18px;
    }


    .service-intro h2,
    .service-text-section h2,
    .service-process-heading h2 {
        font-size: 26px;
    }


    .service-list-item {
        gap: 12px;
    }


    .service-list-item > span {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;
    }


    .service-list-item h3 {
        font-size: 17px;
    }


    .service-list-item p {
        font-size: 13px;
    }


    .service-note h3 {
        font-size: 24px;
    }
}