:root {
            --primary: #012a64;
            --secondary: #0075d9;
            --accent: #feb004;
        }

        body {
            background: #fcfdff;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        /* =========================
           ABOUT HERO
        ========================= */

        .about-hero {
            background:
                radial-gradient(600px 300px at 10% 0%, rgba(0,117,217,.12), transparent),
                radial-gradient(500px 300px at 90% 20%, rgba(254,176,4,.18), transparent),
                #f3f8ff;
            border-bottom: 1px solid #dbe6f3;
            padding: 80px 0;
        }

        .about-hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 50px;
            align-items: center;
        }

        .about-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1px solid #c8d9f0;
            border-radius: 100px;
            padding: 7px 14px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #0075d9;
        }

        .about-badge span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #feb004;
        }

        .about-hero h1 {
            margin-top: 18px;
            color: #012a64;
            font-size: clamp(38px, 5vw, 58px);
            line-height: 1.05;
            letter-spacing: -.035em;
            font-weight: 800;
        }

        .about-hero h1 span {
            color: #0075d9;
        }

        .about-hero-text {
            margin-top: 18px;
            color: #536b87;
            font-size: 17px;
            line-height: 1.7;
            max-width: 620px;
        }

        .about-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 26px;
        }

        .about-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 22px;
            border-radius: 100px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 800;
        }

        .about-btn-primary {
            background: #0075d9;
            color: #fff;
            box-shadow: 0 8px 22px rgba(0,117,217,.25);
        }

        .about-btn-secondary {
            background: #fff;
            color: #012a64;
            border: 1px solid #d5e2f1;
        }

        .about-image {
            position: relative;
            min-height: 470px;
        }

        .about-image img {
            width: 100%;
            height: 470px;
            object-fit: cover;
            border-radius: 28px;
            box-shadow: 0 24px 55px rgba(1,42,100,.18);
        }

        .about-image-card {
            position: absolute;
            left: -20px;
            bottom: 25px;
            background: #fff;
            border-radius: 18px;
            padding: 16px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 15px 35px rgba(1,42,100,.2);
        }

        .about-image-icon {
            width: 45px;
            height: 45px;
            border-radius: 13px;
            background: #feb004;
            display: grid;
            place-items: center;
            color: #012a64;
        }

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

        .about-section {
            padding: 25px 0;
        }

        .about-two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 55px;
            align-items: center;
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #0075d9;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .section-label i {
            color: #feb004;
        }

        .about-heading {
            margin-top: 12px;
            color: #012a64;
            font-size: clamp(30px, 4vw, 43px);
            line-height: 1.1;
            font-weight: 800;
        }

        .about-heading span {
            color: #0075d9;
        }

        .about-copy {
            margin-top: 15px;
            color: #60748d;
            font-size: 15px;
            line-height: 1.75;
        }

        /* =========================
           VALUES
        ========================= */

        .value-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 28px;
        }

        .value-card {
            background: #fff;
            border: 1px solid #e1eaf5;
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 8px 25px rgba(1,42,100,.06);
            transition: .3s;
        }

        .value-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 38px rgba(1,42,100,.12);
        }

        .value-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-size: 19px;
            margin-bottom: 16px;
        }

        .value-card h3 {
            color: #012a64;
            font-size: 17px;
            font-weight: 800;
        }

        .value-card p {
            margin-top: 8px;
            color: #687d96;
            font-size: 13px;
            line-height: 1.65;
        }

        /* =========================
           WHAT WE DO
        ========================= */


        .service-about-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 30px;
        }

        .mini-service {
            background: #fff;
            border: 1px solid #e0e9f5;
            border-radius: 18px;
            padding: 20px;
            display: flex;
            gap: 13px;
            align-items: flex-start;
        }

        .mini-service i {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 11px;
            background: #eaf4ff;
            color: #0075d9;
        }

        .mini-service h4 {
            color: #012a64;
            font-size: 14px;
            font-weight: 800;
        }

        .mini-service p {
            margin-top: 5px;
            color: #71849b;
            font-size: 12px;
            line-height: 1.55;
        }

        /* =========================
           PASSION SECTION
        ========================= */

        .passion-box {
            background: linear-gradient(135deg,#012a64,#013a8a);
            border-radius: 30px;
            padding: 55px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .passion-box::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle,rgba(0,117,217,.35),transparent 70%);
            right: -120px;
            top: -130px;
        }

        .passion-box::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle,rgba(254,176,4,.18),transparent 70%);
            left: -100px;
            bottom: -120px;
        }

        .passion-content h2 {
            font-size: clamp(28px,4vw,42px);
            line-height: 1.1;
            font-weight: 800;
        }

        .passion-content h2 span {
            color: #feb004;
        }

        .passion-content > p {
            margin-top: 14px;
            color: rgba(255,255,255,.7);
            line-height: 1.7;
            font-size: 15px;
        }

        .passion-points {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 14px;
            margin-top: 30px;
        }

        .passion-point {
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 16px;
            padding: 18px;
        }

        .passion-point i {
            color: #feb004;
            font-size: 20px;
        }

        .passion-point h4 {
            margin-top: 10px;
            font-size: 14px;
        }

        .passion-point p {
            margin-top: 6px;
            color: rgba(255,255,255,.58);
            font-size: 12px;
            line-height: 1.55;
        }

        /* =========================
           STATS
        ========================= */

        .about-stats {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 18px;
            margin-top: 30px;
        }

        .about-stat {
            text-align: center;
            background: #fff;
            border: 1px solid #dfe9f5;
            border-radius: 20px;
            padding: 28px 15px;
            box-shadow: 0 8px 25px rgba(1,42,100,.06);
        }

        .about-stat strong {
            display: block;
            color: #0075d9;
            font-size: 34px;
            font-weight: 800;
        }

        .about-stat span {
            display: block;
            margin-top: 5px;
            color: #687d96;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-weight: 700;
        }

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

        .about-cta {
            background: linear-gradient(135deg,#012a64,#0075d9);
            border-radius: 28px;
            padding: 50px 30px;
            text-align: center;
            color: #fff;
            margin-bottom: 60px;
        }

        .about-cta h2 {
            font-size: clamp(27px,4vw,40px);
            font-weight: 800;
        }

        .about-cta p {
            margin: 10px auto 0;
            max-width: 650px;
            color: rgba(255,255,255,.8);
            line-height: 1.6;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 22px;
            padding: 14px 25px;
            border-radius: 100px;
            background: #feb004;
            color: #012a64;
            text-decoration: none;
            font-weight: 800;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width: 991px) {

            .about-hero-grid,
            .about-two-col {
                grid-template-columns: 1fr;
            }

            .about-image {
                min-height: 400px;
            }

            .about-image img {
                height: 400px;
            }

            .value-grid,
            .service-about-grid {
                grid-template-columns: 1fr 1fr;
            }

            .passion-points {
                grid-template-columns: 1fr;
            }
        }

        @media(max-width: 600px) {

            .about-hero {
                padding: 55px 0;
            }

            .about-image-card {
                left: 12px;
                right: 12px;
            }

            .value-grid,
            .service-about-grid,
            .about-stats {
                grid-template-columns: 1fr;
            }

            .passion-box {
                padding: 35px 22px;
            }
        }
		
		.passion-box {
    background: linear-gradient(135deg, #001734 0%, #012a64 55%, #013a8a 100%);
    border-radius: 30px;
    padding: 55px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(1,42,100,.22);
}

.passion-box::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(
        circle,
        rgba(0,117,217,.35),
        transparent 70%
    );
    right: -120px;
    top: -150px;
    pointer-events: none;
}

.passion-box::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(
        circle,
        rgba(254,176,4,.18),
        transparent 70%
    );
    left: -120px;
    bottom: -150px;
    pointer-events: none;
}

.passion-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
}

.passion-content h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}

.passion-content h2 span {
    color: #feb004;
}

.passion-content > p {
    margin-top: 14px;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    font-size: 15px;
    max-width: 760px;
}


/* 3 Cards */

.passion-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.passion-point {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 22px;
    transition: .3s ease;
}

.passion-point:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.1);
    border-color: rgba(254,176,4,.35);
}

.passion-point-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #f3f8ff;
    color: #012a64;
    display: grid;
    place-items: center;
    font-size: 18px;
    margin-bottom: 15px;
    box-shadow: 0 8px 18px rgba(254,176,4,.18);
}

.passion-point:nth-child(2) .passion-point-icon {
    background: #0075d9;
    color: #fff;
}

.passion-point:nth-child(3) .passion-point-icon {
    background: #fff;
    color: #012a64;
}

.passion-point h4 {
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.passion-point p {
    margin-top: 8px;
    color: rgba(255,255,255,.58);
    font-size: 12.5px;
    line-height: 1.65;
}


/* Responsive */

@media (max-width: 991px) {

    .passion-points {
        grid-template-columns: 1fr;
    }

    .passion-box {
        padding: 40px 30px;
    }
}


@media (max-width: 575px) {

    .passion-box {
        padding: 32px 20px;
        border-radius: 22px;
    }

    .passion-point {
        padding: 18px;
    }

}

 
        .footer-modern{background:linear-gradient(180deg,#001734 0%,#000f22 100%);color:#fff;margin-top:60px;border-radius:32px 32px 0 0;overflow:hidden;position:relative;}
        .footer-modern::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#0075d9,#feb004,transparent);}
        .footer-contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:36px;}
        .contact-pill{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 20px;display:flex;align-items:center;gap:14px;backdrop-filter:blur(10px);transition:.3s;}
        .contact-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(254,176,4,.4);transform:translateY(-2px);}
        .contact-pill .icon-box{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:16px;}
        .contact-pill.phone .icon-box{background:#feb004;color:#012a64;}
        .contact-pill.location .icon-box{background:#0075d9;color:#fff;}
        .contact-pill.web .icon-box{background:#fff;color:#012a64;}
        .footer-modern-grid{display:grid;grid-template-columns:1.5fr .8fr 1fr 1fr;gap:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);}
        .footer-modern h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px;font-weight:800;}
        .footer-modern .f-links{display:grid;gap:9px;}
        .footer-modern .f-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;}
        @media(max-width:980px){.hero-new{grid-template-columns:1fr;}.grid-6{grid-template-columns:1fr 1fr;}.sec-why-inner{grid-template-columns:1fr;}.pricing-grid{grid-template-columns:1fr;}.area-modern{grid-template-columns:1fr;}.footer-contact-row{grid-template-columns:1fr;}}
        @media(max-width:600px){.grid-6{grid-template-columns:1fr;}.hero-new{padding:28px 0 40px;}}