📄 File: svc-bfsi-styles.php

Path: /home2/outerorb/public_html/inc/svc-bfsi-styles.php

Size: 15.52 KB

Permissions: 0666

<style>
    /* ── service page reset ─────────────────────────────────────── */
    body { overflow-x: hidden; }

    /* ── HERO ────────────────────────────────────────────────────── */
    .bfsi-hero {
        position: relative;
        min-height: 420px;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, rgba(4,25,65,0.93) 0%, rgba(7,51,103,0.78) 60%, rgba(5,90,160,0.6) 100%),
                    url('<?php echo $base_url; ?>assets/images/banner.jpg') center/cover no-repeat;
        padding: 72px 0 90px;
    }
    .bfsi-hero::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: #fff;
        clip-path: ellipse(60% 100% at 50% 100%);
    }
    .bfsi-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.25);
        color: #c8dff8;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    .bfsi-hero h1 {
        font-size: clamp(30px, 4.5vw, 52px);
        line-height: 1.15;
        color: #fff;
        margin-bottom: 18px;
        font-weight: 800;
    }
    .bfsi-hero .hero-disc {
        font-size: 18px;
        line-height: 1.8;
        color: rgba(255,255,255,0.82);
        max-width: 640px;
        margin-bottom: 30px;
    }
    .bfsi-hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bfsi-hero-chips span {
        padding: 8px 16px;
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: 999px;
        background: rgba(255,255,255,0.09);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        backdrop-filter: blur(4px);
    }

    /* ── FLOATING STAT STRIP ─────────────────────────────────── */
    .bfsi-stat-strip {
        position: relative;
        z-index: 10;
        margin-top: -44px;
        margin-bottom: 60px;
    }
    .bfsi-stat-strip-inner {
        background: #073367;
        border-radius: 20px;
        padding: 28px 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        box-shadow: 0 24px 60px rgba(7,51,103,0.28);
    }
    .bfsi-stat {
        text-align: center;
        padding: 0 20px;
        position: relative;
    }
    .bfsi-stat + .bfsi-stat::before {
        content: '';
        position: absolute;
        left: 0; top: 10%; bottom: 10%;
        width: 1px;
        background: rgba(255,255,255,0.15);
    }
    .bfsi-stat .num {
        font-size: 36px;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        margin-bottom: 6px;
    }
    .bfsi-stat .num span { color: #57a8f5; }
    .bfsi-stat .label {
        font-size: 13px;
        color: rgba(255,255,255,0.65);
        line-height: 1.4;
    }

    /* ── MAIN LAYOUT ─────────────────────────────────────────── */
    .bfsi-main-section {
        padding: 60px 0 80px;
        background: #fff;
    }
    .bfsi-sidebar-wrap {
        position: sticky;
        top: 90px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* ── INTRO BLOCK ─────────────────────────────────────────── */
    .bfsi-intro-block {
        display: flex;
        flex-direction: column;
        margin-bottom: 52px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(7,51,103,0.12);
    }
    .bfsi-intro-photo {
        height: 300px;
        overflow: hidden;
    }
    .bfsi-intro-photo img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .bfsi-intro-content {
        background: #f8fbff;
        padding: 32px 28px;
        display: flex;
        flex-direction: column;
        border-top: 5px solid #073367;
    }
    .bfsi-intro-content .eyebrow {
        display: inline-block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #057aef;
        margin-bottom: 12px;
    }
    .bfsi-intro-content h2 {
        font-size: clamp(18px, 2vw, 24px);
        line-height: 1.3;
        color: #0c1f3d;
        margin-bottom: 12px;
    }
    .bfsi-intro-content p {
        font-size: 14px;
        line-height: 1.8;
        color: #44546a;
        margin-bottom: 16px;
    }
    .bfsi-intro-checks {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }
    .bfsi-intro-checks li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #dce9f6;
        font-size: 13px;
        color: #2c3e5a;
        line-height: 1.6;
    }
    .bfsi-intro-checks li:last-child { border-bottom: 0; }
    .bfsi-intro-checks li i { color: #057aef; margin-top: 2px; flex-shrink: 0; }
    .bfsi-intro-cta { display: flex; flex-wrap: wrap; gap: 10px; }

    /* ── CAPABILITIES GRID ───────────────────────────────────── */
    .bfsi-caps-header { margin-bottom: 24px; }
    .bfsi-caps-header .pre-label {
        display: inline-block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #057aef;
        margin-bottom: 8px;
    }
    .bfsi-caps-header h2 {
        font-size: clamp(22px, 2.5vw, 32px);
        color: #0c1f3d;
        margin: 0;
    }
    .bfsi-caps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        margin-bottom: 52px;
    }
    .bfsi-cap-card {
        background: #fff;
        border: 1px solid #dce9f8;
        border-radius: 20px;
        padding: 32px 28px;
        position: relative;
        overflow: hidden;
        transition: box-shadow .25s, transform .25s;
    }
    .bfsi-cap-card:hover {
        box-shadow: 0 22px 50px rgba(7,51,103,0.11);
        transform: translateY(-4px);
    }
    .bfsi-cap-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, #073367, #057aef);
    }
    .bfsi-cap-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: #eef5ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        font-size: 22px;
        color: #073367;
    }
    .bfsi-cap-icon img { width: 26px; height: 26px; }
    .bfsi-cap-card h4 {
        font-size: 18px;
        font-weight: 700;
        color: #0c1f3d;
        margin-bottom: 10px;
    }
    .bfsi-cap-card p {
        font-size: 14px;
        line-height: 1.75;
        color: #5b6b7f;
        margin: 0;
    }

    /* ── WHY OOT BOX ─────────────────────────────────────────── */
    .bfsi-why-box {
        background: linear-gradient(135deg, #041941 0%, #073367 55%, #0b5cab 100%);
        border-radius: 24px;
        padding: 40px 36px;
        margin-bottom: 52px;
        position: relative;
        overflow: hidden;
    }
    .bfsi-why-box::before {
        content: attr(data-ghost);
        position: absolute;
        right: -10px; top: 50%;
        transform: translateY(-50%);
        font-size: 140px;
        font-weight: 900;
        color: rgba(255,255,255,0.04);
        line-height: 1;
        pointer-events: none;
        user-select: none;
    }
    .bfsi-why-box h2 {
        font-size: clamp(20px, 2.2vw, 28px);
        color: #fff;
        line-height: 1.25;
        margin-bottom: 12px;
    }
    .bfsi-why-box > p {
        font-size: 14px;
        color: rgba(255,255,255,0.75);
        line-height: 1.8;
        margin-bottom: 22px;
    }
    .bfsi-why-points {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 26px;
    }
    .bfsi-why-point {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
    }
    .bfsi-why-point-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #57a8f5;
        font-size: 15px;
    }
    .bfsi-why-point-text h5 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
    .bfsi-why-point-text p { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.55; margin: 0; }
    .bfsi-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        background: #fff;
        color: #073367;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: background .2s, color .2s;
    }
    .bfsi-cta-btn:hover { background: #057aef; color: #fff; }

    /* ── PROCESS TIMELINE ────────────────────────────────────── */
    .bfsi-timeline {
        display: grid;
        grid-template-columns: 1fr 44px 1fr;
        gap: 0;
        align-items: start;
    }
    .bfsi-timeline-step {
        background: #fff;
        border: 1px solid #dce9f8;
        border-radius: 18px;
        padding: 24px 20px;
        box-shadow: 0 8px 24px rgba(7,51,103,0.07);
    }
    .bfsi-timeline-step .step-num {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    .bfsi-timeline-step .step-num span {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg, #073367, #057aef);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .bfsi-timeline-step .step-num h4 { font-size: 14px; font-weight: 700; color: #0c1f3d; margin: 0; }
    .bfsi-timeline-step img {
        width: 100%;
        border-radius: 10px;
        height: 120px;
        object-fit: cover;
        margin-bottom: 14px;
    }
    .bfsi-timeline-step ul { list-style: none; padding: 0; margin: 0; }
    .bfsi-timeline-step ul li {
        padding: 7px 0;
        border-bottom: 1px dashed #dce9f8;
        font-size: 13px;
        color: #44546a;
        line-height: 1.55;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    .bfsi-timeline-step ul li:last-child { border-bottom: 0; }
    .bfsi-timeline-step ul li::before { content: '→'; color: #057aef; font-weight: 700; flex-shrink: 0; }
    .bfsi-timeline-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 48px;
    }
    .bfsi-timeline-connector::before {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #073367, #057aef);
        border-radius: 999px;
    }

    /* ── SERVICES CHIPS ──────────────────────────────────────── */
    .bfsi-service-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bfsi-service-chips a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 18px;
        border-radius: 999px;
        border: 2px solid #dce9f8;
        background: #fff;
        color: #073367;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: all .22s;
    }
    .bfsi-service-chips a:hover { background: #073367; color: #fff; border-color: #073367; }
    .bfsi-service-chips a i { font-size: 13px; }

    /* ── FAQ ─────────────────────────────────────────────────── */
    .bfsi-faq-accord .accordion-item {
        border-radius: 12px !important;
        border: 1px solid #dce9f8 !important;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 4px 16px rgba(7,51,103,0.05);
        margin-bottom: 12px;
    }
    .bfsi-faq-accord .accordion-button {
        padding: 18px 20px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        background: #fff;
        color: #0c1f3d;
    }
    .bfsi-faq-accord .accordion-button:not(.collapsed) {
        background: #073367;
        color: #fff;
        box-shadow: none;
    }
    .bfsi-faq-accord .accordion-button:not(.collapsed)::after { filter: brightness(10); }
    .bfsi-faq-accord .accordion-body {
        padding: 16px 20px 20px;
        font-size: 14px;
        line-height: 1.8;
        color: #44546a;
    }

    /* ── FULL-WIDTH SECTIONS ─────────────────────────────────── */
    .bfsi-fw-section { padding: 64px 0; }
    .bfsi-fw-header { margin-bottom: 36px; }
    .bfsi-fw-header .pre-label {
        display: inline-block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #057aef;
        margin-bottom: 8px;
    }
    .bfsi-fw-header h2 {
        font-size: clamp(24px, 3vw, 36px);
        color: #0c1f3d;
        margin: 0;
    }
    .bfsi-process-bg { background: #f5f9ff; }
    .bfsi-services-bg { background: #fff; }
    .bfsi-faq-bg { background: #f5f9ff; }
    .bfsi-faq-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* ── RESPONSIVE ──────────────────────────────────────────── */
    @media (max-width: 1199px) {
        .bfsi-timeline { grid-template-columns: 1fr; }
        .bfsi-timeline-connector { display: none; }
        .bfsi-sidebar-wrap { position: static; }
    }
    @media (max-width: 767px) {
        .bfsi-hero { padding: 54px 0 80px; min-height: auto; }
        .bfsi-stat-strip-inner { grid-template-columns: 1fr 1fr; gap: 18px; }
        .bfsi-stat + .bfsi-stat::before { display: none; }
        .bfsi-caps-grid { grid-template-columns: 1fr; }
        .bfsi-intro-content { padding: 24px 20px; }
        .bfsi-why-box { padding: 28px 20px; margin-bottom: 36px; }
        .bfsi-fw-section { padding: 44px 0; }
        .bfsi-faq-2col { grid-template-columns: 1fr; }
    }
</style>

← Back to Directory Edit File 🔒 Chmod