/* =========================================================
   PK GROUP — PREMIUM CORPORATE DESIGN
   index.css
   ========================================================= */

/* =========================
   ROOT VARIABLES
========================= */

:root {

    --navy: #071426;
    --navy-2: #0b1d35;
    --navy-3: #102945;

    --blue: #1769ff;
    --blue-light: #4da3ff;
    --cyan: #36d9ff;

    --white: #ffffff;
    --text: #172033;
    --muted: #68758a;

    --light-bg: #f5f8fc;
    --border: rgba(20, 50, 90, .10);

    --gradient:
        linear-gradient(
            135deg,
            #1769ff 0%,
            #36b8ff 50%,
            #36d9ff 100%
        );

    --dark-gradient:
        radial-gradient(
            circle at 80% 20%,
            rgba(23,105,255,.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061222 0%,
            #0a1d35 50%,
            #071426 100%
        );

    --shadow:
        0 20px 60px rgba(7,20,38,.10);

    --shadow-blue:
        0 20px 60px rgba(23,105,255,.20);

    --radius: 22px;

}


/* =========================
   GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

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

    color: var(--text);

    background:
        #f5f8fc;

    overflow-x: hidden;

}

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Poppins', sans-serif;

    font-weight: 700;

    letter-spacing: -.025em;

}

p {

    line-height: 1.8;

    color: var(--muted);

}

a {

    text-decoration: none;

    transition: .3s ease;

}

img {

    max-width: 100%;

}


/* =========================
   SELECTION
========================= */

::selection {

    background: var(--blue);

    color: white;

}


/* =========================
   PREMIUM BACKGROUND BLOBS
========================= */

body::before {

    content: "";

    position: fixed;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,217,255,.08),
            transparent 70%
        );

    top: 10%;

    left: -250px;

    pointer-events: none;

    z-index: -1;

}

body::after {

    content: "";

    position: fixed;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255,.07),
            transparent 70%
        );

    right: -300px;

    bottom: 5%;

    pointer-events: none;

    z-index: -1;

}


/* =========================================================
   HEADER
========================================================= */


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

.hero-section {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;

    background: var(--dark-gradient);

}


/* SVG-LIKE GRID */

.hero-section::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


/* GLOW ORB */

.hero-section::after {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    right: -150px;

    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,217,255,.22),
            transparent 68%
        );

    animation:
        heroGlow 7s ease-in-out infinite;

}

@keyframes heroGlow {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.12);

    }

}

.hero-section .container {

    position: relative;

    z-index: 2;

}

.hero-section .row {

    min-height: 680px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 25px;

    border: 1px solid rgba(77,163,255,.35);

    border-radius: 50px;

    background:
        rgba(23,105,255,.10);

    color: #80c9ff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .7px;

    animation:
        fadeUp .8s ease both;

}

.hero-badge::before {

    content: "";

    width: 7px;

    height: 7px;

    background: #42dcff;

    border-radius: 50%;

    box-shadow:
        0 0 15px #42dcff;

    animation:
        pulseDot 2s infinite;

}

@keyframes pulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: .6;
    }

}

.hero-section h1 {

    max-width: 680px;

    font-size: clamp(
        42px,
        5vw,
        72px
    );

    line-height: 1.08;

    margin-bottom: 25px;

    color: white;

    animation:
        fadeUp .9s .1s ease both;

}

.hero-section h1::first-line {

    color: white;

}

.hero-section p {

    max-width: 640px;

    color: #b7c5d8;

    font-size: 16px;

    animation:
        fadeUp 1s .2s ease both;

}

.hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 30px;

    animation:
        fadeUp 1s .3s ease both;

}

.hero-buttons .btn:last-child {

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow: none;

}

.hero-buttons .btn:last-child:hover {

    background: white;

    color: var(--navy) !important;

}

.hero-highlights {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 35px;

    animation:
        fadeUp 1s .4s ease both;

}

.hero-highlights div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #d5dfeb;

    font-size: 13px;

}

.hero-highlights i {

    color: #45d9ff;

}


/* HERO IMAGE */

.hero-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 500px;

}

.hero-image::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    border:
        1px solid rgba(77,163,255,.20);

    box-shadow:

        0 0 0 35px rgba(23,105,255,.035),

        0 0 0 70px rgba(23,105,255,.025);

    animation:
        rotateRing 20s linear infinite;

}

@keyframes rotateRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.hero-image img {

    position: relative;

    z-index: 2;

    max-height: 520px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 50px rgba(0,0,0,.40)
        );

    animation:
        heroFloat 5s ease-in-out infinite;

}

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* =========================================================
   ANIMATION HELPERS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   SECTION COMMON
========================================================= */

section {

    position: relative;

    padding: 105px 0;

    overflow: hidden;

}

.section-header {

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}

.section-label {

    display: inline-block;

    margin-bottom: 13px;

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}

.section-header h2 {

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.15;

    color: var(--navy);

    margin-bottom: 18px;

}

.section-header p {

    max-width: 680px;

    margin: auto;

}


/* =========================================================
   COMPANY SNAPSHOT
========================================================= */

.company-snapshot {

    margin-top: -55px;

    position: relative;

    z-index: 10;

    padding: 0 0 90px;

}

.snapshot-card {

    height: 100%;

    padding: 32px 25px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 20px;

    background:
        rgba(255,255,255,.92);

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 55px rgba(7,20,38,.12);

    transition: .4s ease;

}

.snapshot-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 65px rgba(23,105,255,.16);

}

.snapshot-card h2 {

    font-size: 40px;

    background: var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    margin-bottom: 8px;

}

.snapshot-card h6 {

    font-size: 15px;

    color: var(--navy);

}

.snapshot-card p {

    font-size: 13px;

    margin: 0;

}


/* =========================================================
   BUSINESS DIVISIONS
========================================================= */

.business-divisions {

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

}

.division-card {

    height: 100%;

    position: relative;

    padding: 38px 30px;

    border-radius: var(--radius);

    background: white;

    border:
        1px solid rgba(20,50,90,.08);

    box-shadow:
        0 15px 45px rgba(7,20,38,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    overflow: hidden;

}

.division-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -80px;

    right: -80px;

    border-radius: 50%;

    background:
        rgba(23,105,255,.06);

}

.division-card::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 4px;

    background: var(--gradient);

    transform: scaleX(0);

    transform-origin: left;

    transition: .4s;

}

.division-card:hover {

    transform:
        translateY(-12px);

    box-shadow:
        0 30px 70px rgba(7,20,38,.13);

}

.division-card:hover::after {

    transform: scaleX(1);

}

.division-logo {

    width: 90px;

    height: 90px;

    object-fit: contain;

    margin-bottom: 20px;

    transition: .4s;

}

.division-card:hover .division-logo {

    transform:
        scale(1.08)
        rotate(-3deg);

}

.division-tag {

    display: block;

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 10px;

}

.division-card h3 {

    color: var(--navy);

    font-size: 24px;

}

.division-card p {

    font-size: 14px;

}

.division-list {

    list-style: none;

    padding: 0;

    margin: 22px 0 0;

}

.division-list li {

    margin-bottom: 11px;

    font-size: 13px;

    color: #47566d;

}

.division-list i {

    color: var(--blue);

    margin-right: 8px;

}


/* =========================================================
   FOUNDER
===/*======================================================
                FOUNDER SECTION
======================================================*/

.founder-section{
    position:relative;
    overflow:hidden;
    background:var(--dark-gradient);
    color:#fff;
    padding:70px 0;
}

.founder-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    left:-220px;
    bottom:-220px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(54,217,255,.12),
        transparent 70%);
}

.founder-section>.container{
    position:relative;
    z-index:2;
}

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

.founder-section .section-label{
    display:inline-block;
    color:#55d9ff;
    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.founder-section h2{
    color:#fff;
    font-size:clamp(36px,4vw,52px);
    font-weight:800;
    line-height:1.2;
    margin-bottom:18px;
}

.founder-name h3{
    color:#fff;
    font-size:32px;
    font-weight:700;
    margin-bottom:6px;
}

.founder-section h6{
    color:#47d1ff;
    font-size:19px;
    margin-bottom:5px;
}

.founder-section span{
    color:#dbe9ff;
    font-weight:500;
}

.founder-section p{
    color:#eef5ff;
    font-size:17px;
    line-height:1.75;
    margin-bottom:14px;
}

/*====================
      IMAGE
====================*/

.founder-image{
    width:100%;
    max-width:100%;
    border-radius:26px;
    overflow:hidden;
    background:#132544;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.founder-image::before,
.founder-image::after{
    display:none;
}

.founder-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    object-position:top;
    display:block;
}

/*====================
    HIGHLIGHTS
====================*/

.founder-highlights{
    display:flex;
    gap:15px;
    margin:22px 0;
    flex-wrap:wrap;
}

.highlight-box{
    flex:1;
    min-width:120px;
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}

.highlight-box h4{
    color:#47d1ff;
    margin:0;
    font-size:28px;
}

.highlight-box span{
    color:#fff;
    font-size:14px;
}

/*====================
      QUOTE
====================*/

.founder-section blockquote{
    margin:20px 0;
    padding:20px 25px;
    background:rgba(255,255,255,.05);
    border-left:4px solid #47d1ff;
    border-radius:15px;
    color:#fff;
    line-height:1.7;
}

.founder-section blockquote p{
    margin-bottom:10px;
}

.founder-section blockquote footer{
    color:#47d1ff;
    font-weight:600;
}

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

@media(max-width:991px){

    .founder-section{
        padding:60px 0;
    }

    .founder-image{
        margin-bottom:35px;
    }

    .founder-image img{
        height:auto;
    }

    .founder-highlights{
        justify-content:center;
    }
}
/* =========================================================
   BUSINESS SOLUTIONS
========================================================= */

.business-solutions {

    background: white;

}

.solution-card {

    height: 100%;

    padding: 35px 27px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9ff
        );

    border:
        1px solid #e2eaf5;

    transition: .4s ease;

}

.solution-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(23,105,255,.25);

    box-shadow:
        0 25px 60px rgba(23,105,255,.12);

}

.solution-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 23px;

    border-radius: 16px;

    background: var(--gradient);

    color: white;

    font-size: 22px;

    box-shadow:
        0 12px 30px rgba(23,105,255,.20);

}

.solution-card h4 {

    color: var(--navy);

    font-size: 19px;

}

.solution-card p {

    font-size: 13px;

}

.solution-card a {

    display: inline-flex;

    gap: 8px;

    align-items: center;

    color: var(--blue);

    font-size: 13px;

    font-weight: 700;

}

.solution-card a:hover {

    gap: 13px;

}/* =========================================================
   PART 2 — PREMIUM INNER SECTIONS
========================================================= */


/* =========================================================
   WHY CHOOSE PK GROUP
========================================================= */

.why-choose-section {

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(54,217,255,.07),
            transparent 30%
        ),
        #f5f8fc;

}

.why-card {

    position: relative;

    height: 100%;

    padding: 35px 28px;

    border-radius: 22px;

    background: rgba(255,255,255,.85);

    border: 1px solid rgba(23,105,255,.08);

    box-shadow:
        0 15px 45px rgba(7,20,38,.06);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

    overflow: hidden;

}

.why-card::before {

    content: "";

    position: absolute;

    width: 110px;

    height: 110px;

    right: -55px;

    top: -55px;

    border-radius: 50%;

    background:
        rgba(23,105,255,.07);

    transition: .5s;

}

.why-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(23,105,255,.20);

    box-shadow:
        0 25px 60px rgba(23,105,255,.12);

}

.why-card:hover::before {

    transform: scale(2.2);

}

.why-icon {

    position: relative;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 17px;

    background: var(--gradient);

    color: white;

    font-size: 22px;

    box-shadow:
        0 12px 30px rgba(23,105,255,.20);

    z-index: 2;

}

.why-card h4 {

    position: relative;

    color: var(--navy);

    font-size: 19px;

    z-index: 2;

}

.why-card p {

    position: relative;

    font-size: 13px;

    z-index: 2;

}

.why-bottom {

    position: relative;

    padding: 40px;

    border-radius: 25px;

    color: white;

    background:
        var(--dark-gradient);

    box-shadow:
        0 25px 65px rgba(7,20,38,.18);

    overflow: hidden;

}

.why-bottom::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -100px;

    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,217,255,.20),
            transparent 70%
        );

}

.why-bottom h3 {

    position: relative;

    color: white;

    font-size: 25px;

}

.why-bottom p {

    position: relative;

    color: #aebed1;

    margin-bottom: 0;

}

.why-bottom .btn {

    position: relative;

}


/* =========================================================
   HOW WE WORK
========================================================= */

.how-we-work {

    background: white;

}

.process-wrapper {

    position: relative;

    display: grid;

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

    gap: 20px;

}

.process-wrapper::before {

    content: "";

    position: absolute;

    top: 43px;

    left: 8%;

    right: 8%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c8ddf7,
            #4da3ff,
            #c8ddf7,
            transparent
        );

    z-index: 0;

}

.process-item {

    position: relative;

    text-align: center;

    z-index: 1;

}

.process-number {

    position: absolute;

    top: -10px;

    right: 12%;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    font-weight: 800;

    color: #9bb3ce;

}

.process-icon {

    width: 86px;

    height: 86px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5ff
        );

    border:
        5px solid white;

    box-shadow:
        0 0 0 1px #d8e7f8,
        0 15px 35px rgba(23,105,255,.12);

    color: var(--blue);

    font-size: 24px;

    transition: .4s;

}

.process-item:hover .process-icon {

    color: white;

    background: var(--gradient);

    transform:
        translateY(-8px)
        rotate(5deg);

    box-shadow:
        0 15px 40px rgba(23,105,255,.25);

}

.process-item h4 {

    color: var(--navy);

    font-size: 18px;

}

.process-item p {

    max-width: 190px;

    margin: auto;

    font-size: 12px;

}

.process-note {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 50px;

    background: #f2f7fd;

    color: #68758a;

    font-size: 12px;

}

.process-note i {

    color: var(--blue);

}


/* =========================================================
   PARTNERS / NETWORK
========================================================= */

.partners-section {

    background:
        var(--dark-gradient);

    color: white;

}

.partners-section .section-label {

    color: #50d8ff;

}

.partners-section .section-header h2 {

    color: white;

}

.partners-section .section-header p {

    color: #aebed1;

}

.partner-card {

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

    transition: .4s ease;

}

.partner-card:hover {

    transform:
        translateY(-8px);

    background: white;

    box-shadow:
        0 20px 45px rgba(54,217,255,.16);

}

.partner-card img {

    max-width: 125px;

    max-height: 55px;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: .75;

    transition: .4s;

}

.partner-card:hover img {

    filter: grayscale(0);

    opacity: 1;

    transform: scale(1.05);

}

.partner-note {

    color: #8fa5bd;

    font-size: 12px;

}


/* =========================================================
   CLIENT SUCCESS STORIES
========================================================= */

.client-stories {

    background:
        linear-gradient(
            180deg,
            #f5f8fc,
            #ffffff
        );

}

.featured-video {

    position: relative;

    padding: 9px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(23,105,255,.55),
            rgba(54,217,255,.20)
        );

    box-shadow:
        0 30px 70px rgba(7,20,38,.18);

}

.featured-video::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    right: -35px;

    top: -35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,217,255,.30),
            transparent 70%
        );

}

.featured-video video {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 18px;

    background: #071426;

}

.featured-content {

    padding-left: 20px;

}

.review-tag {

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 12px;

    border-radius: 50px;

    background: #eaf4ff;

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}

.featured-content h3 {

    color: var(--navy);

    font-size: 30px;

    line-height: 1.25;

}

.featured-content p {

    font-size: 14px;

}

.review-info {

    margin-top: 25px;

}

.review-info h5 {

    margin-bottom: 3px;

    color: var(--navy);

}

.review-info small {

    color: #78879a;

}

.stars,
.review-stars {

    color: #ffb800;

    letter-spacing: 3px;

    font-size: 15px;

    margin-top: 10px;

}


/* VIDEO CARDS */

.video-review-card {

    height: 100%;

    overflow: hidden;

    border-radius: 22px;

    background: white;

    border:
        1px solid #e4ebf4;

    box-shadow:
        0 15px 45px rgba(7,20,38,.07);

    transition: .4s ease;

}

.video-review-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 60px rgba(23,105,255,.13);

}

.video-review-card video {

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #071426;

}

.video-content {

    padding: 22px;

}

.video-category {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}

.video-content h5 {

    color: var(--navy);

    font-size: 17px;

    margin-top: 8px;

    margin-bottom: 5px;

}

.video-content p {

    margin: 0;

    font-size: 13px;

}

.video-content .stars {

    margin-top: 10px;

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-section {

    background: #ffffff;

}

.testimonial-card {

    position: relative;

    height: 100%;

    padding: 35px 30px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f8fd
        );

    border:
        1px solid #e2eaf4;

    box-shadow:
        0 15px 45px rgba(7,20,38,.06);

    transition: .4s ease;

    overflow: hidden;

}

.testimonial-card::before {

    content: "“";

    position: absolute;

    right: 20px;

    top: -20px;

    font-family: Georgia, serif;

    font-size: 130px;

    line-height: 1;

    color:
        rgba(23,105,255,.06);

}

.testimonial-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 65px rgba(23,105,255,.12);

    border-color:
        rgba(23,105,255,.18);

}

.testimonial-card p {

    position: relative;

    color: #56657a;

    font-size: 14px;

    line-height: 1.8;

    z-index: 2;

}

.testimonial-card hr {

    border-color: #dfe7f0;

    margin: 25px 0;

}

.testimonial-card h5 {

    color: var(--navy);

    font-size: 16px;

    margin-bottom: 3px;

}

.testimonial-card small {

    color: #7b899b;

    font-size: 12px;

}

.testimonial-card .btn {

    margin-top: 25px;

    font-size: 12px;

    padding: 10px 18px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background:
        #f5f8fc;

}

.faq-section .accordion {

    max-width: 850px;

    margin-left: auto;

    margin-right: auto;

}

.accordion-item {

    margin-bottom: 13px;

    overflow: hidden;

    border:
        1px solid #e0e8f2 !important;

    border-radius: 15px !important;

    background: white;

    box-shadow:
        0 8px 25px rgba(7,20,38,.035);

}

.accordion-button {

    padding: 21px 23px;

    background: white;

    color: var(--navy);

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-shadow: none !important;

}

.accordion-button:not(.collapsed) {

    color: var(--blue);

    background:
        #f4f8ff;

}

.accordion-button::after {

    background-size: 14px;

}

.accordion-body {

    padding:
        0 23px 23px;

    color: #68758a;

    font-size: 13px;

    line-height: 1.8;

}


/* =====================================================
   FINAL CTA - PREMIUM COMPACT
===================================================== */

.final-cta {
    position: relative;
    padding: 55px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(37, 99, 235, 0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #07111f 0%,
            #0d1b2f 55%,
            #102642 100%
        );
}

/* Decorative glow */

.final-cta::before {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -140px;

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

    box-shadow:
        0 0 80px rgba(37,99,235,0.12);

    pointer-events: none;
}

.final-cta::after {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;

    left: -70px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(37,99,235,0.08);

    filter: blur(5px);
}


/* Main CTA box */

.final-cta-inner {
    position: relative;
    z-index: 2;

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

    gap: 40px;

    padding: 38px 42px;

    border-radius: 22px;

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

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

    backdrop-filter: blur(14px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.28);

    transition: 0.4s ease;
}

.final-cta-inner:hover {
    border-color: rgba(96,165,250,0.25);

    transform: translateY(-3px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);
}


/* Label */

.final-cta .section-label {
    display: inline-block;

    margin-bottom: 9px;

    color: #60a5fa;

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

    letter-spacing: 2.2px;
}


/* Heading */

.final-cta h2 {
    margin: 0;

    color: #ffffff;

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

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

    line-height: 1.25;
}

.final-cta h2 span {
    color: #60a5fa;
}


/* Description */

.final-cta-content p {
    margin: 10px 0 0;

    max-width: 560px;

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

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

    font-size: 13px;

    line-height: 1.7;
}


/* Buttons */

.final-cta-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* Primary */

.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    padding: 13px 21px;

    border-radius: 50px;

    background: #ffffff;

    color: #0f172a;

    text-decoration: none;

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

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

    white-space: nowrap;

    transition: all 0.3s ease;
}

.cta-primary i {
    font-size: 11px;

    transition: transform 0.3s ease;
}

.cta-primary:hover {
    color: #ffffff;

    background: #2563eb;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(37,99,235,0.30);
}

.cta-primary:hover i {
    transform: translateX(4px);
}


/* Phone */

.cta-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 12px 17px;

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

    border-radius: 50px;

    color: #ffffff;

    text-decoration: none;

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

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;

    transition: all 0.3s ease;
}

.cta-phone i {
    color: #60a5fa;

    font-size: 12px;
}

.cta-phone:hover {
    color: #ffffff;

    border-color: #60a5fa;

    background: rgba(37,99,235,0.10);

    transform: translateY(-3px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .final-cta-inner {
        flex-direction: column;

        align-items: flex-start;

        padding: 34px;
    }

    .final-cta-actions {
        width: 100%;
    }

}


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

@media (max-width: 575px) {

    .final-cta {
        padding: 40px 0;
    }

    .final-cta-inner {
        padding: 28px 22px;

        border-radius: 18px;
    }

    .final-cta h2 {
        font-size: 25px;
    }

    .final-cta-content p {
        font-size: 12px;
    }

    .final-cta-actions {
        flex-direction: column;

        width: 100%;
    }

    .cta-primary,
    .cta-phone {
        width: 100%;
    }

}
/* =========================================================
   FOOTER
========================================================= */

.footer {

    position: relative;

    padding:
        75px 0 25px;

    color: #aebed1;

    background:
        #050f1d;

    overflow: hidden;

}

.footer::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -250px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23,105,255,.12),
            transparent 70%
        );

}

.footer::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    right: -200px;

    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,217,255,.08),
            transparent 70%
        );

}

.footer .container {

    position: relative;

    z-index: 2;

}

.footer-logo {

    width: 65px;

    height: 65px;

    object-fit: contain;

}

.footer-brand h3 {

    color: white;

    margin-top: 15px;

    font-size: 23px;

}

.footer-brand p {

    max-width: 380px;

    color: #8295aa;

    font-size: 13px;

}

.footer-tagline strong {

    color: #55d9ff;

}

.footer-column h5 {

    color: white;

    margin-bottom: 22px;

    font-size: 15px;

}

.footer-column ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

.footer-column li {

    margin-bottom: 12px;

}

.footer-column li a {

    color: #8496aa;

    font-size: 13px;

}

.footer-column li a:hover {

    color: #50d8ff;

    padding-left: 5px;

}

.footer-contact a,
.footer-address {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

    color: #8496aa;

    font-size: 13px;

}

.footer-contact a:hover {

    color: white;

}

.footer-contact i {

    width: 18px;

    color: #48d7ff;

    margin-top: 3px;

}

.footer-social {

    display: flex;

    gap: 9px;

    margin-top: 25px;

}

.footer-social a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #a9bbce;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

}

.footer-social a:hover {

    color: white;

    background: var(--blue);

    transform:
        translateY(-4px);

}

.footer-divider {

    height: 1px;

    margin:
        50px 0 22px;

    background:
        rgba(255,255,255,.08);

}

.footer-bottom {

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;

}

.footer-bottom p {

    margin: 0;

    color: #65778d;

    font-size: 11px;

}

.footer-bottom strong {

    color: #a9bbce;

}

.footer-bottom-links {

    display: flex;

    gap: 20px;

}

.footer-bottom-links a {

    color: #65778d;

    font-size: 11px;

}

.footer-bottom-links a:hover {

    color: #50d8ff;

}

.footer-designer {

    text-align: right;

    color: #65778d;

    font-size: 11px;

}

.footer-designer strong {

    color: #50d8ff;

}


/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-float {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    border-radius: 50%;

    background:
        #20c76a;

    color: white;

    font-size: 28px;

    box-shadow:
        0 12px 35px rgba(32,199,106,.35);

    animation:
        whatsappPulse 2.5s infinite;

}

.whatsapp-float:hover {

    color: white;

    transform:
        scale(1.1);

}

@keyframes whatsappPulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(32,199,106,.45),
            0 12px 35px rgba(32,199,106,.30);

    }

    70% {

        box-shadow:
            0 0 0 15px rgba(32,199,106,0),
            0 12px 35px rgba(32,199,106,.30);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(32,199,106,0),
            0 12px 35px rgba(32,199,106,.30);

    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 9px;

}

::-webkit-scrollbar-track {

    background: #edf2f7;

}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            #1769ff,
            #36d9ff
        );

    border-radius: 20px;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .navbar-collapse {

        padding:
            20px 0;

    }

    .navbar .btn {

        margin:
            10px 0 0;

    }

    .hero-section {

        min-height: auto;

        padding:
            80px 0;

    }

    .hero-section .row {

        min-height: auto;

    }

    .hero-image {

        min-height: 420px;

        margin-top: 40px;

    }

    .process-wrapper {

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

        gap: 40px 25px;

    }

    .process-wrapper::before {

        display: none;

    }

    .featured-content {

        padding-left: 0;

        margin-top: 15px;

    }

    .footer-bottom {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-bottom-links {

        justify-content: center;

    }

    .footer-designer {

        text-align: center;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    section {

        padding:
            75px 0;

    }

    .hero-section {

        padding:
            65px 0;

    }

    .hero-section h1 {

        font-size: 40px;

    }

    .hero-section p {

        font-size: 14px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .hero-highlights {

        flex-direction: column;

        gap: 10px;

    }

    .hero-image {

        min-height: 320px;

    }

    .hero-image::before {

        width: 280px;

        height: 280px;

    }

    .company-snapshot {

        margin-top: 0;

        padding-top: 25px;

    }

    .section-header h2 {

        font-size: 31px;

    }

    .division-card {

        padding: 30px 24px;

    }

    .founder-image {

        max-width: 320px;

    }

    .founder-section blockquote {

        font-size: 13px;

    }

    .process-wrapper {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .process-item p {

        max-width: 280px;

    }

    .why-bottom {

        padding: 30px 25px;

    }

    .why-bottom .btn {

        margin-top: 25px;

    }

    .featured-content h3 {

        font-size: 25px;

    }

    .cta-box {

        padding:
            55px 22px;

    }

    .cta-actions {

        flex-direction: column;

    }

    .cta-actions .btn {

        width: 100%;

    }

    .footer {

        padding-top: 60px;

    }

    .whatsapp-float {

        width: 52px;

        height: 52px;

        right: 18px;

        bottom: 18px;

        font-size: 24px;

    }

}


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

@media (max-width: 400px) {

    .hero-section h1 {

        font-size: 34px;

    }

    .navbar-brand img {

        width: 48px;

        height: 48px;

    }

    .navbar-brand h5 {

        font-size: 16px;

    }

    .navbar-brand small {

        display: none;

    }

}/* =========================================================
   PREMIUM INDEX CSS — PART 3
   Sections:
   WHY CHOOSE
   HOW WE WORK
   PARTNERS
   CLIENT STORIES
   TESTIMONIALS
   ========================================================= */


/* =========================================================
   GLOBAL PREMIUM BACKGROUND
   ========================================================= */

body {
    background:
        radial-gradient(circle at 10% 20%, rgba(30, 64, 175, 0.06), transparent 28%),
        radial-gradient(circle at 90% 60%, rgba(14, 165, 233, 0.06), transparent 30%),
        #f7f9fc;
}


/* =========================================================
   SECTION COMMON
   ========================================================= */

section {
    position: relative;
    overflow: hidden;
}

.section-header {
    max-width: 760px;
    margin: 0 auto;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #2563eb;
}

.section-label::before {
    content: "";
    width: 28px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    border-radius: 50px;
}

.section-header h2 {
    margin-top: 15px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 800;

    color: #0f172a;
}

.section-header p {
    margin-top: 18px;

    color: #64748b;
    line-height: 1.8;
}


/* =========================================================
   WHY CHOOSE SECTION
   ========================================================= */

.why-choose-section {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 5% 80%,
            rgba(37, 99, 235, .08),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 15%,
            rgba(6, 182, 212, .08),
            transparent 30%
        ),
        #ffffff;
}


/* decorative SVG-like circles */

.why-choose-section::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    top: 100px;

    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(37, 99, 235, .025),
        0 0 0 70px rgba(37, 99, 235, .018);
}

.why-card {
    position: relative;

    height: 100%;

    padding: 32px 28px;

    border-radius: 24px;

    background: rgba(255, 255, 255, .78);

    border: 1px solid rgba(148, 163, 184, .18);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .06);

    backdrop-filter: blur(15px);

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

.why-card::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: -20px;
    bottom: -20px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .06);

    transition: transform .4s ease;
}

.why-card:hover {
    transform: translateY(-12px);

    border-color: rgba(37, 99, 235, .25);

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .12);
}

.why-card:hover::after {
    transform: scale(2.2);
}

.why-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 24px;

    border-radius: 18px;

    color: white;
    font-size: 22px;

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #06b6d4
        );

    box-shadow:
        0 12px 25px rgba(37, 99, 235, .22);
}

.why-card h4 {
    font-family: "Poppins", sans-serif;

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

    color: #0f172a;

    margin-bottom: 12px;
}

.why-card p {
    color: #64748b;
    line-height: 1.75;
    margin: 0;
}


/* =========================================================
   WHY BOTTOM
   ========================================================= */

.why-bottom {
    position: relative;

    padding: 38px 45px;

    border-radius: 28px;

    color: white;

    background:
        linear-gradient(
            120deg,
            #0f172a 0%,
            #172554 45%,
            #075985 100%
        );

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .18);

    overflow: hidden;
}

.why-bottom::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -70px;
    top: -100px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(255,255,255,.025),
        0 0 0 70px rgba(255,255,255,.018);
}

.why-bottom h3 {
    position: relative;

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

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

    margin-bottom: 12px;
}

.why-bottom p {
    position: relative;

    max-width: 700px;

    color: rgba(255,255,255,.72);

    line-height: 1.7;
}

.why-bottom .btn {
    position: relative;

    padding: 13px 25px;

    background: white;
    color: #0f172a;

    border-radius: 50px;

    font-weight: 700;

    transition: .3s ease;
}

.why-bottom .btn:hover {
    transform: translateY(-3px);

    background: #06b6d4;
    color: white;
}


/* =========================================================
   HOW WE WORK
   ========================================================= */

.how-we-work {
    padding: 115px 0;

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


/* Decorative grid */

.how-we-work::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(37,99,235,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37,99,235,.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}

.process-wrapper {
    position: relative;

    display: grid;

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

    gap: 25px;
}


/* connecting line */

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

    position: absolute;

    top: 44px;
    left: 9%;
    right: 9%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #93c5fd,
            #06b6d4,
            #93c5fd,
            transparent
        );

    z-index: 0;
}

.process-item {
    position: relative;

    z-index: 1;

    text-align: center;

    padding: 30px 18px;

    border-radius: 25px;

    background: rgba(255,255,255,.72);

    border: 1px solid rgba(148,163,184,.16);

    backdrop-filter: blur(12px);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

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

    box-shadow:
        0 25px 60px rgba(15,23,42,.10);
}

.process-number {
    position: absolute;

    top: -13px;
    right: 18px;

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

    letter-spacing: 1px;

    color: #2563eb;
}

.process-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #06b6d4
        );

    color: white;

    font-size: 23px;

    border: 6px solid #eef5ff;

    box-shadow:
        0 12px 30px rgba(37,99,235,.22);

    transition: transform .4s ease;
}

.process-item:hover .process-icon {
    transform: rotate(8deg) scale(1.08);
}

.process-item h4 {
    font-family: "Poppins", sans-serif;

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

    color: #0f172a;

    margin-bottom: 12px;
}

.process-item p {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}

.process-note {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 20px;

    border-radius: 50px;

    background: rgba(255,255,255,.8);

    border: 1px solid rgba(37,99,235,.1);

    color: #64748b;

    font-size: 13px;
}

.process-note i {
    color: #2563eb;
}


/* =========================================================
   PARTNERS
   ========================================================= */

.partners-section {
    padding: 100px 0;

    background: #0b1220;

    color: white;
}

.partners-section .section-label {
    color: #38bdf8;
}

.partners-section .section-label::before {
    background: #38bdf8;
}

.partners-section .section-header h2 {
    color: white;
}

.partners-section .section-header p {
    color: #94a3b8;
}

.partner-card {
    height: 105px;

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

    padding: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

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

    backdrop-filter: blur(12px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.partner-card:hover {
    transform: translateY(-8px);

    border-color: rgba(56,189,248,.5);

    background:
        rgba(255,255,255,.12);
}

.partner-card img {
    max-width: 125px;
    max-height: 55px;

    object-fit: contain;

    filter: grayscale(100%) brightness(0) invert(1);

    opacity: .75;

    transition: .35s ease;
}

.partner-card:hover img {
    filter: none;

    opacity: 1;

    transform: scale(1.06);
}

.partner-note {
    color: #64748b;
}


/* =========================================================
   CLIENT SUCCESS STORIES
   ========================================================= */

.client-stories {
    padding: 115px 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(14,165,233,.08),
            transparent 28%
        ),
        #f8fafc;
}

.featured-video {
    position: relative;

    padding: 8px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #7c3aed
        );

    box-shadow:
        0 30px 80px rgba(37,99,235,.18);
}

.featured-video video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 23px;

    background: #020617;
}

.featured-content {
    padding-left: 20px;
}

.review-tag {
    display: inline-block;

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(37,99,235,.08);

    color: #2563eb;

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

    letter-spacing: 1.3px;
}

.featured-content h3 {
    margin-top: 18px;

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

    font-size: 32px;

    line-height: 1.25;

    color: #0f172a;
}

.featured-content > p {
    color: #64748b;

    line-height: 1.8;

    margin: 18px 0;
}

.review-info h5 {
    margin: 0;

    font-weight: 700;

    color: #0f172a;
}

.review-info small {
    color: #64748b;
}

.stars,
.review-stars {
    color: #f59e0b;

    letter-spacing: 3px;
}


/* =========================================================
   VIDEO REVIEW CARDS
   ========================================================= */

.video-review-card {
    overflow: hidden;

    height: 100%;

    border-radius: 24px;

    background: white;

    border: 1px solid rgba(148,163,184,.15);

    box-shadow:
        0 18px 45px rgba(15,23,42,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.video-review-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 28px 65px rgba(15,23,42,.13);
}

.video-review-card video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #020617;
}

.video-content {
    padding: 24px;
}

.video-category {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #2563eb;
}

.video-content h5 {
    margin-top: 8px;

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

    color: #0f172a;

    font-size: 18px;
}

.video-content p {
    color: #64748b;

    margin-bottom: 8px;
}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonial-section {
    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f1f5f9
        );
}

.testimonial-card {
    position: relative;

    height: 100%;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255,255,255,.9);

    border: 1px solid rgba(148,163,184,.15);

    box-shadow:
        0 20px 55px rgba(15,23,42,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.testimonial-card::before {
    content: "“";

    position: absolute;

    top: 5px;
    right: 25px;

    font-family: Georgia, serif;

    font-size: 90px;

    line-height: 1;

    color: rgba(37,99,235,.08);
}

.testimonial-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 30px 75px rgba(15,23,42,.12);
}

.review-stars {
    margin-bottom: 18px;

    font-size: 15px;
}

.testimonial-card p {
    position: relative;

    color: #475569;

    line-height: 1.8;

    font-size: 15px;
}

.testimonial-card hr {
    border: 0;

    border-top: 1px solid #e2e8f0;

    margin: 25px 0;
}

.testimonial-card h5 {
    font-family: "Poppins", sans-serif;

    color: #0f172a;

    margin-bottom: 5px;
}

.testimonial-card small {
    color: #64748b;
}

.testimonial-card .btn {
    position: relative;

    border-width: 1px;

    font-size: 13px;

    font-weight: 700;

    padding: 10px 18px;

    transition: .3s ease;
}

.testimonial-card .btn:hover {
    transform: translateY(-3px);

    background: #2563eb;

    border-color: #2563eb;

    color: white;
}


/* =========================================================
   FAQ PREMIUM
   ========================================================= */

.faq-section {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(37,99,235,.07),
            transparent 25%
        ),
        #f8fafc;
}

.faq-section .accordion {
    max-width: 900px;

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

.faq-section .accordion-item {
    margin-bottom: 14px;

    overflow: hidden;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    background: white;

    box-shadow:
        0 8px 25px rgba(15,23,42,.04);
}

.faq-section .accordion-button {
    padding: 21px 25px;

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

    font-weight: 600;

    color: #0f172a;

    background: white;

    box-shadow: none !important;
}

.faq-section .accordion-button:not(.collapsed) {
    color: #2563eb;

    background:
        linear-gradient(
            90deg,
            #eff6ff,
            #ffffff
        );
}

.faq-section .accordion-body {
    padding: 0 25px 25px;

    color: #64748b;

    line-height: 1.8;
}


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

.cta-section {
    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #172554,
            #075985
        );
}

.cta-box {
    position: relative;

    max-width: 900px;

    margin: auto;

    padding: 65px 35px;

    border-radius: 35px;

    background:
        rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(15px);

    overflow: hidden;
}

.cta-box::before,
.cta-box::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.1);
}

.cta-box::before {
    width: 280px;
    height: 280px;

    right: -120px;
    top: -120px;
}

.cta-box::after {
    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -90px;
}

.cta-box .section-label {
    color: #67e8f9;
}

.cta-box .section-label::before {
    background: #67e8f9;
}

.cta-box h2 {
    position: relative;

    margin-top: 15px;

    color: white;

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

    font-size: clamp(30px, 4vw, 48px);
}

.cta-box p {
    position: relative;

    max-width: 650px;

    margin: 18px auto 28px;

    color: #cbd5e1;

    line-height: 1.8;
}

.cta-actions {
    position: relative;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}

.cta-actions .btn {
    padding: 13px 24px;

    border-radius: 50px;

    font-weight: 700;

    transition: .3s ease;
}

.cta-actions .btn-primary {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    border: 0;

    box-shadow:
        0 12px 30px rgba(37,99,235,.25);
}

.cta-actions .btn:hover {
    transform: translateY(-4px);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: relative;

    padding: 85px 0 25px;

    background: #020617;

    color: #94a3b8;
}

.footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2563eb,
            #06b6d4,
            transparent
        );
}

.footer-logo {
    width: 65px;

    filter:
        drop-shadow(
            0 8px 20px rgba(37,99,235,.2)
        );
}

.footer-brand h3 {
    margin-top: 15px;

    color: white;

    font-family: "Poppins", sans-serif;
}

.footer-brand p {
    line-height: 1.8;

    max-width: 390px;
}

.footer-tagline {
    color: #38bdf8;
}

.footer-column h5 {
    color: white;

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

    margin-bottom: 22px;
}

.footer-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #94a3b8;

    text-decoration: none;

    transition: .3s ease;
}

.footer-column a:hover {
    color: #38bdf8;

    padding-left: 5px;
}

.footer-contact a,
.footer-address {
    display: flex;

    gap: 12px;

    margin-bottom: 15px;
}

.footer-contact i {
    color: #38bdf8;

    margin-top: 4px;
}

.footer-social {
    display: flex;

    gap: 10px;

    margin-top: 25px;
}

.footer-social a {
    width: 40px;
    height: 40px;

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

    padding: 0 !important;

    border-radius: 50%;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    transition: .3s ease;
}

.footer-social a:hover {
    transform: translateY(-4px);

    background: #2563eb;

    color: white;

    padding-left: 0;
}

.footer-divider {
    height: 1px;

    margin: 50px 0 25px;

    background: rgba(255,255,255,.08);
}

.footer-bottom {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;

    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom-links {
    display: flex;

    gap: 20px;
}

.footer-designer {
    text-align: right;
}

.footer-designer strong {
    color: #38bdf8;
}


/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */

.whatsapp-float {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 58px;
    height: 58px;

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

    z-index: 999;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    color: white;

    font-size: 27px;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(22,163,74,.3);

    animation:
        whatsappPulse 2.2s infinite;

    transition: .3s ease;
}

.whatsapp-float:hover {
    color: white;

    transform: scale(1.1);
}

@keyframes whatsappPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(34,197,94,.45);
    }

    70% {
        box-shadow:
            0 0 0 18px rgba(34,197,94,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(34,197,94,0);
    }

}


/* =========================================================
   SCROLL REVEAL ANIMATION
   ========================================================= */

.why-card,
.process-item,
.video-review-card,
.testimonial-card,
.partner-card {
    animation: premiumReveal .8s ease both;
}

@keyframes premiumReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 991px) {

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

    .process-wrapper::before {
        display: none;
    }

    .featured-content {
        padding-left: 0;
    }

    .footer-bottom {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }

    .footer-designer {
        text-align: center;
    }

}


@media (max-width: 767px) {

    .why-choose-section,
    .how-we-work,
    .client-stories,
    .testimonial-section,
    .faq-section {
        padding: 80px 0;
    }

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

    .why-bottom {
        padding: 30px 25px;
    }

    .why-bottom .text-lg-end {
        text-align: left !important;
        margin-top: 20px;
    }

    .featured-content h3 {
        font-size: 27px;
    }

    .cta-box {
        padding: 50px 25px;
    }

    .footer {
        padding-top: 65px;
    }

}


@media (max-width: 480px) {

    .whatsapp-float {
        width: 52px;
        height: 52px;

        right: 16px;
        bottom: 16px;
    }

    .testimonial-card,
    .why-card {
        padding: 28px 22px;
    }

}/* =========================================================
   PART 4
   PREMIUM BUSINESS SECTIONS
   PK GROUP
   ========================================================= */


/* =========================================================
   BUSINESS DIVISIONS
   ========================================================= */

.business-divisions {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at 90% 10%,
        rgba(37, 99, 235, 0.08),
        transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    overflow: hidden;
}


/* Decorative circle */

.business-divisions::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: 50%;

    top: -180px;
    right: -120px;

    pointer-events: none;
}


.business-divisions .container {
    position: relative;
    z-index: 2;
}


/* Division Card */

.division-card {
    position: relative;

    height: 100%;

    padding: 38px 32px;

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

    border: 1px solid #e5eaf2;

    border-radius: 24px;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.05);

    overflow: hidden;

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


/* Top line */

.division-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #38bdf8
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: 0.4s ease;
}


.division-card:hover {
    transform: translateY(-10px);

    border-color: rgba(37, 99, 235, 0.18);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.10);
}


.division-card:hover::before {
    transform: scaleX(1);
}


/* Company Logo */

.division-logo {
    width: 82px;
    height: 82px;

    object-fit: contain;

    padding: 12px;

    background: #f8fafc;

    border: 1px solid #edf1f7;

    border-radius: 18px;

    margin-bottom: 22px;

    transition: 0.4s ease;
}


.division-card:hover .division-logo {
    transform: translateY(-4px) scale(1.04);

    background: #eff6ff;
}


/* Tag */

.division-tag {
    display: inline-block;

    padding: 6px 13px;

    border-radius: 50px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    margin-bottom: 13px;
}


.division-card h3 {
    font-family: "Poppins", sans-serif;

    color: #0f172a;

    font-size: 25px;

    font-weight: 700;

    margin-bottom: 13px;
}


.division-card p {
    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 22px;
}


/* List */

.division-list {
    list-style: none;

    padding: 0;
    margin: 0;
}


.division-list li {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: #334155;

    font-size: 14px;

    font-weight: 500;
}


.division-list li i {
    color: #2563eb;

    font-size: 11px;
}


/* Button */

.division-card .btn {
    border-radius: 10px;

    padding: 11px 18px;

    font-size: 13px;

    transition: 0.3s ease;
}


.division-card .btn:hover {
    transform: translateX(4px);
}


/* =========================================================
   BUSINESS SOLUTIONS
   ========================================================= */

.business-solutions {
    position: relative;

    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            #0b1830 0%,
            #10284d 50%,
            #0b1830 100%
        );

    overflow: hidden;
}


/* Soft background glow */

.business-solutions::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.13),
            transparent 68%
        );

    top: -230px;
    left: -160px;
}


.business-solutions::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.15),
            transparent 68%
        );

    bottom: -250px;
    right: -150px;
}


.business-solutions .container {
    position: relative;
    z-index: 2;
}


/* Section text */

.business-solutions .section-label {
    color: #60a5fa;
}


.business-solutions .section-header h2 {
    color: #ffffff;
}


.business-solutions .section-header p {
    color: #b8c4d6;
}


/* Solution card */

.solution-card {
    position: relative;

    height: 100%;

    padding: 32px 27px;

    border-radius: 21px;

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

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

    backdrop-filter: blur(12px);

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


.solution-card:hover {
    transform: translateY(-9px);

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

    border-color:
        rgba(96, 165, 250, 0.35);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.20);
}


/* Icon */

.solution-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    color: #ffffff;

    font-size: 20px;

    margin-bottom: 23px;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.25);

    transition: 0.4s ease;
}


.solution-card:hover .solution-icon {
    transform: rotate(-5deg) scale(1.08);
}


.solution-card h4 {
    color: #ffffff;

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

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 12px;
}


.solution-card p {
    color: #b8c4d6;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 18px;
}


.solution-card a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #7dd3fc;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: 0.3s ease;
}


.solution-card a:hover {
    color: #ffffff;

    gap: 13px;
}


/* =========================================================
   WHY CHOOSE PK GROUP
   ========================================================= */

.why-choose-section {
    position: relative;

    padding: 110px 0;

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

    overflow: hidden;
}


.why-choose-section::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.08),
            transparent 70%
        );

    top: 40px;
    left: -150px;
}


.why-card {
    position: relative;

    height: 100%;

    padding: 30px 26px;

    background: #ffffff;

    border: 1px solid #e7ecf3;

    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.045);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.why-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.09);
}


.why-icon {
    width: 56px;
    height: 56px;

    display: flex;

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

    border-radius: 15px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 20px;

    margin-bottom: 21px;

    transition: 0.35s ease;
}


.why-card:hover .why-icon {
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-3px);
}


.why-card h4 {
    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 600;

    color: #0f172a;

    margin-bottom: 11px;
}


.why-card p {
    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

    margin: 0;
}


/* Bottom banner */

.why-bottom {
    position: relative;

    padding: 35px 38px;

    border-radius: 23px;

    background:
        linear-gradient(
            120deg,
            #0f2344,
            #163766
        );

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(15, 35, 68, 0.14);
}


.why-bottom::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    right: -100px;
    top: -120px;

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

    box-shadow:
        0 0 0 35px rgba(255,255,255,0.025),
        0 0 0 70px rgba(255,255,255,0.015);
}


.why-bottom h3 {
    position: relative;
    z-index: 2;

    color: #ffffff;

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

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 10px;
}


.why-bottom p {
    position: relative;
    z-index: 2;

    color: #cbd5e1;

    font-size: 14px;

    line-height: 1.8;

    margin: 0;
}


.why-bottom .btn {
    position: relative;
    z-index: 3;

    background: #ffffff;

    color: #0f2344;

    border: none;

    border-radius: 10px;

    padding: 12px 20px;

    font-size: 13px;

    font-weight: 600;

    transition: 0.3s ease;
}


.why-bottom .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15);
}


/* =========================================================
   HOW WE WORK
   ========================================================= */

.how-we-work {
    position: relative;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(37, 99, 235, 0.07),
            transparent 25%
        ),
        #f4f7fb;

    overflow: hidden;
}


/* Process wrapper */

.process-wrapper {
    position: relative;

    display: grid;

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

    gap: 20px;
}


/* Connecting line */

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

    position: absolute;

    top: 53px;

    left: 9%;
    right: 9%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cbd5e1,
            #2563eb,
            #cbd5e1,
            transparent
        );

    z-index: 0;
}


.process-item {
    position: relative;

    z-index: 2;

    text-align: center;

    padding: 0 10px;
}


/* Number */

.process-number {
    color: #2563eb;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 10px;
}


/* Circle */

.process-icon {
    width: 72px;
    height: 72px;

    margin: auto;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border: 5px solid #f4f7fb;

    color: #2563eb;

    font-size: 21px;

    box-shadow:
        0 0 0 1px #dbe3ef,
        0 10px 25px rgba(15, 23, 42, 0.08);

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


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

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(37, 99, 235, 0.25);
}


.process-item h4 {
    margin-top: 20px;

    color: #0f172a;

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

    font-size: 17px;

    font-weight: 600;
}


.process-item p {
    color: #64748b;

    font-size: 13px;

    line-height: 1.75;

    margin-top: 8px;
}


/* Process note */

.process-note {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #64748b;

    font-size: 13px;

    background: #ffffff;

    border: 1px solid #e5eaf2;

    padding: 10px 17px;

    border-radius: 50px;

    box-shadow:
        0 6px 20px rgba(15,23,42,0.04);
}


.process-note i {
    color: #2563eb;
}


/* =========================================================
   PARTNERS
   ========================================================= */

.partners-section {
    position: relative;

    padding: 95px 0;

    background: #ffffff;
}


.partner-card {
    height: 105px;

    display: flex;

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

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e8edf4;

    border-radius: 17px;

    box-shadow:
        0 7px 25px rgba(15, 23, 42, 0.04);

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


.partner-card:hover {
    transform: translateY(-6px);

    border-color: #c9dcfb;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.08);
}


.partner-card img {
    max-width: 120px;

    max-height: 55px;

    object-fit: contain;

    filter: grayscale(80%);

    opacity: 0.72;

    transition: 0.35s ease;
}


.partner-card:hover img {
    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.05);
}


.partner-note {
    color: #94a3b8;

    font-size: 13px;
}


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

@media (max-width: 991px) {

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

        row-gap: 45px;
    }

    .process-wrapper::before {
        display: none;
    }

}


@media (max-width: 767px) {

    .business-divisions,
    .business-solutions,
    .why-choose-section,
    .how-we-work {
        padding: 75px 0;
    }

    .division-card {
        padding: 30px 25px;
    }

    .why-bottom {
        padding: 28px 24px;
    }

    .why-bottom h3 {
        font-size: 20px;
    }

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

    .process-item {
        max-width: 360px;

        margin: auto;
    }

    .process-note {
        border-radius: 15px;

        padding: 12px 15px;
    }

}


@media (max-width: 575px) {

    .division-logo {
        width: 72px;
        height: 72px;
    }

    .solution-card {
        padding: 27px 23px;
    }

    .partner-card {
        height: 90px;
    }

}/* =========================================================
   PART 5 — PREMIUM CLIENT SUCCESS STORIES
   ========================================================= */

.client-stories {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.10), transparent 32%),
        linear-gradient(135deg, #f7faff 0%, #eef5ff 48%, #ffffff 100%);
}

/* Decorative background circles */

.client-stories::before,
.client-stories::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.client-stories::before {
    width: 280px;
    height: 280px;
    top: -120px;
    left: -100px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow:
        0 0 0 35px rgba(37, 99, 235, 0.025),
        0 0 0 70px rgba(37, 99, 235, 0.02);
}

.client-stories::after {
    width: 320px;
    height: 320px;
    right: -150px;
    bottom: -160px;
    border: 1px solid rgba(14, 165, 233, 0.15);
}


/* Section heading */

.client-stories .section-header {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: auto;
}

.client-stories .section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(37, 99, 235, 0.15);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
}

.client-stories .section-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.10);
}

.client-stories .section-header h2 {
    margin-top: 20px;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.client-stories .section-header p {
    max-width: 650px;
    margin: 20px auto 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   FEATURED VIDEO
   ========================================================= */

.featured-video {
    position: relative;
    padding: 10px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.12),
        0 8px 25px rgba(37, 99, 235, 0.08);
    backdrop-filter: blur(18px);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.featured-video:hover {
    transform: translateY(-8px);
    box-shadow:
        0 40px 100px rgba(15, 23, 42, 0.16),
        0 12px 35px rgba(37, 99, 235, 0.12);
}

.featured-video::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    top: -25px;
    right: -25px;
    z-index: -1;
}

.featured-video video {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
    background: #0f172a;
}


/* =========================================================
   FEATURED CONTENT
   ========================================================= */

.featured-content {
    position: relative;
    padding: 35px 10px 35px 25px;
}

.review-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 13px;
    border-radius: 8px;
    background: #e8f1ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.featured-content h3 {
    color: #0f172a;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.featured-content > p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
    max-width: 520px;
}

.review-info {
    margin-top: 28px;
    padding-left: 18px;
    border-left: 3px solid #2563eb;
}

.review-info h5 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
}

.review-info small {
    color: #64748b;
    font-size: 13px;
}

.stars {
    margin-top: 20px;
    color: #f59e0b;
    font-size: 18px;
    letter-spacing: 3px;
}


/* =========================================================
   VIDEO REVIEW CARDS
   ========================================================= */

.video-review-card {
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(15px);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.video-review-card:hover {
    transform: translateY(-10px);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow:
        0 30px 65px rgba(15, 23, 42, 0.13),
        0 10px 30px rgba(37, 99, 235, 0.08);
}

.video-review-card video {
    display: block;
    width: 100%;
    height: 235px;
    object-fit: cover;
    background: #0f172a;
}

.video-content {
    padding: 25px;
}

.video-category {
    display: inline-block;
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.video-content h5 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 19px;
    font-weight: 700;
}

.video-content p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.video-content .stars {
    margin-top: 14px;
    font-size: 14px;
}


/* =========================================================
   PREMIUM TESTIMONIAL SECTION
   ========================================================= */

.testimonial-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.10), transparent 25%),
        #ffffff;
}

.testimonial-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    left: -250px;
    bottom: -250px;
    border: 1px solid rgba(37, 99, 235, 0.10);
    box-shadow:
        0 0 0 45px rgba(37, 99, 235, 0.025),
        0 0 0 90px rgba(37, 99, 235, 0.018);
}

.testimonial-section .section-header {
    max-width: 700px;
    margin: auto;
}

.testimonial-section .section-header h2 {
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-top: 18px;
}

.testimonial-section .section-header p {
    color: #64748b;
    line-height: 1.8;
}


/* =========================================================
   TESTIMONIAL CARD
   ========================================================= */

.testimonial-card {
    position: relative;
    height: 100%;
    padding: 34px;
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 249, 255, 0.92)
        );
    border: 1px solid rgba(37, 99, 235, 0.10);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.12),
        0 10px 30px rgba(37, 99, 235, 0.07);
}

.testimonial-card::before {
    content: "“";
    position: absolute;
    top: 13px;
    right: 25px;
    color: rgba(37, 99, 235, 0.08);
    font-family: Georgia, serif;
    font-size: 100px;
    line-height: 1;
}

.review-stars {
    color: #f59e0b;
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.testimonial-card > p {
    position: relative;
    color: #475569;
    font-size: 15px;
    line-height: 1.9;
    min-height: 115px;
}

.testimonial-card hr {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

.testimonial-card h5 {
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
}

.testimonial-card small {
    color: #64748b;
    font-size: 13px;
}


/* Google Review Button */

.testimonial-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid rgba(37, 99, 235, 0.20);
    color: #2563eb;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.testimonial-card .btn:hover {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.22);
}


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

@media (max-width: 991px) {

    .client-stories,
    .testimonial-section {
        padding: 90px 0;
    }

    .featured-content {
        padding: 25px 0;
    }

    .featured-video video {
        height: 360px;
    }

}

@media (max-width: 767px) {

    .client-stories,
    .testimonial-section {
        padding: 75px 0;
    }

    .client-stories .section-header h2,
    .testimonial-section .section-header h2 {
        font-size: 34px;
    }

    .featured-video {
        border-radius: 20px;
    }

    .featured-video video {
        height: 260px;
        border-radius: 14px;
    }

    .video-review-card video {
        height: 220px;
    }

    .testimonial-card {
        padding: 27px;
    }

    .testimonial-card > p {
        min-height: auto;
    }

}

@media (max-width: 480px) {

    .client-stories .section-header h2,
    .testimonial-section .section-header h2 {
        font-size: 30px;
    }

    .featured-content h3 {
        font-size: 28px;
    }

    .featured-video video {
        height: 220px;
    }

}/* =========================================================
   PREMIUM BUTTON + LABEL UPGRADE
   CLIENT EXPERIENCES / OUR NETWORK
   ========================================================= */


/* =========================================================
   1. SECTION LABELS — CLIENT EXPERIENCES / OUR NETWORK
   ========================================================= */

.client-stories .section-label,
.testimonial-section .section-label,
.partners-section .section-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 9px 18px;

    border-radius: 50px;

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

    border: 1px solid rgba(37, 99, 235, 0.14);

    color: #2563eb;

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

    letter-spacing: 2px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(12px);

    transition: all 0.35s ease;
}


/* Small animated dot */

.client-stories .section-label::before,
.testimonial-section .section-label::before,
.partners-section .section-label::before {
    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 0 5px rgba(37, 99, 235, 0.08);

    animation: labelPulse 2s infinite;
}


@keyframes labelPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(37, 99, 235, 0.07);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(37, 99, 235, 0.02);
    }

}


/* Hover */

.client-stories .section-label:hover,
.testimonial-section .section-label:hover,
.partners-section .section-label:hover {

    transform: translateY(-2px);

    border-color: rgba(37, 99, 235, 0.28);

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.10);
}


/* =========================================================
   2. OUR NETWORK — PREMIUM PARTNER CARDS
   ========================================================= */

.partners-section {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),
        #f7faff;
}


.partners-section .section-header {
    position: relative;
    z-index: 2;
}


.partners-section .section-header h2 {

    margin-top: 20px;

    color: #0f172a;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.6px;
}


.partners-section .section-header p {

    max-width: 680px;

    margin: 18px auto 0;

    color: #64748b;

    line-height: 1.8;
}


/* Partner logo card */

.partners-section .partner-card {

    position: relative;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 22px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(244, 248, 255, 0.88)
        );

    border: 1px solid rgba(37, 99, 235, 0.10);

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.06);

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


.partners-section .partner-card::after {

    content: "";

    position: absolute;

    width: 40px;
    height: 40px;

    right: 12px;
    top: 12px;

    border-top: 1px solid rgba(37, 99, 235, 0.15);
    border-right: 1px solid rgba(37, 99, 235, 0.15);

    border-radius: 0 12px 0 0;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.partners-section .partner-card:hover {

    transform: translateY(-8px);

    border-color: rgba(37, 99, 235, 0.20);

    box-shadow:
        0 25px 55px rgba(15, 23, 42, 0.10),
        0 8px 25px rgba(37, 99, 235, 0.07);
}


.partners-section .partner-card:hover::after {
    opacity: 1;
}


.partners-section .partner-card img {

    max-width: 135px;

    max-height: 58px;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.65;

    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}


.partners-section .partner-card:hover img {

    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.06);
}


.partner-note {

    color: #94a3b8;

    font-size: 13px;

    letter-spacing: 0.5px;
}


/* =========================================================
   3. DISCOVER PK GROUP BUTTON
   ========================================================= */

/* Specific button inside WHY section */

.why-bottom .btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 23px;

    border: 0;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.2px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.18);

    overflow: hidden;

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


/* Shine */

.why-bottom .btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.16),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.why-bottom .btn:hover::before {
    left: 140%;
}


.why-bottom .btn:hover {

    transform: translateY(-4px);

    color: #ffffff;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.24);
}


.why-bottom .btn i {

    transition: transform 0.3s ease;
}


.why-bottom .btn:hover i {

    transform: translateX(5px);
}


/* =========================================================
   4. GOOGLE REVIEW BUTTON — PREMIUM
   ========================================================= */

.testimonial-card .btn {

    position: relative;

    display: inline-flex;

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

    gap: 8px;

    padding: 11px 19px;

    border-radius: 12px !important;

    border: 1px solid rgba(15, 23, 42, 0.10) !important;

    background: #ffffff !important;

    color: #334155 !important;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.2px;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06);

    overflow: hidden;

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


/* Google icon */

.testimonial-card .btn i {

    color: #4285f4;

    font-size: 14px;

    transition: transform 0.3s ease;
}


/* Top highlight */

.testimonial-card .btn::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #4285f4,
            #34a853,
            #fbbc05,
            #ea4335
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s ease;
}


.testimonial-card .btn:hover {

    transform: translateY(-4px);

    color: #0f172a !important;

    border-color: rgba(37, 99, 235, 0.18) !important;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.11);
}


.testimonial-card .btn:hover::before {

    transform: scaleX(1);
}


.testimonial-card .btn:hover i {

    transform: scale(1.12);
}


/* =========================================================
   5. TESTIMONIAL CARD — EXTRA PREMIUM
   ========================================================= */

.testimonial-card {

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbff 100%
        ) !important;
}


.testimonial-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -60px;
    bottom: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.08),
            transparent 65%
        );

    pointer-events: none;

    transition:
        transform 0.5s ease;
}


.testimonial-card:hover::after {

    transform: scale(1.5);

}


/* =========================================================
   6. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .partners-section {
        padding: 80px 0;
    }

    .partners-section .partner-card {
        height: 105px;
        border-radius: 18px;
    }

    .partners-section .partner-card img {
        max-width: 110px;
        max-height: 48px;
    }

    .why-bottom .btn {
        margin-top: 20px;
    }

}/* =========================================================
   REVIEWS + FAQ — PREMIUM DESIGN
========================================================= */

.reviews-faq-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(37, 99, 235, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(14, 165, 233, 0.08),
            transparent 28%
        ),
        linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    overflow: hidden;
}


/* Decorative background */

.reviews-faq-section::before {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: 50%;

    top: -120px;
    right: 8%;

    pointer-events: none;
}

.reviews-faq-section::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.04);

    bottom: -80px;
    left: 5%;

    pointer-events: none;
}


/* =========================================================
   REVIEW LIST
========================================================= */

.review-list {
    position: relative;
    margin-top: 35px;
}

.review-item {
    position: relative;

    padding: 25px 0;

    border-top: 1px solid rgba(15, 23, 42, 0.10);

    transition: all 0.35s ease;
}

.review-item:last-child {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

.review-item:hover {
    padding-left: 12px;
}


/* Review top */

.review-top {
    display: flex;
    align-items: center;

    gap: 14px;
}


/* Avatar */

.review-avatar {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #2563eb
        );

    color: #ffffff;

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

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

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.20);
}


/* Name */

.review-top h5 {
    margin: 0;

    color: #0f172a;

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

    font-size: 15px;
    font-weight: 600;
}


/* Client type */

.review-top span {
    display: block;

    margin-top: 3px;

    color: #64748b;

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

    font-size: 12px;
}


/* Stars */

.review-stars {
    margin-left: auto;

    color: #f59e0b;

    font-size: 13px;

    letter-spacing: 2px;
}


/* Review text */

.review-item p {
    max-width: 590px;

    margin: 17px 0 0 62px;

    color: #64748b;

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

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   GOOGLE REVIEW BUTTON
========================================================= */

.google-review-btn {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-top: 28px;

    padding: 13px 20px;

    border: 1px solid rgba(15, 23, 42, 0.12);

    border-radius: 50px;

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

    color: #0f172a;

    text-decoration: none;

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

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

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);

    backdrop-filter: blur(10px);

    transition: all 0.35s ease;
}

.google-review-btn i:first-child {
    color: #4285f4;
    font-size: 17px;
}

.google-review-btn i:last-child {
    color: #94a3b8;
    font-size: 10px;

    transition: transform 0.3s ease;
}

.google-review-btn:hover {
    transform: translateY(-4px);

    background: #0f172a;

    color: #ffffff;

    border-color: #0f172a;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.18);
}

.google-review-btn:hover i:last-child {
    color: #ffffff;

    transform: translate(2px, -2px);
}


/* =========================================================
   PREMIUM FAQ
========================================================= */

.premium-faq {
    position: relative;

    margin-top: 35px;

    border-top: 1px solid rgba(15, 23, 42, 0.10);
}


/* FAQ item */

.faq-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);

    transition: all 0.3s ease;
}


/* Question */

.faq-question {
    width: 100%;

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

    gap: 20px;

    padding: 21px 5px;

    border: 0;

    outline: none;

    background: transparent;

    color: #0f172a;

    text-align: left;

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

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

    cursor: pointer;

    transition: all 0.3s ease;
}

.faq-question:hover {
    color: #2563eb;
}


/* Plus button */

.faq-question i {
    width: 31px;
    height: 31px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8f0ff;

    color: #2563eb;

    font-size: 10px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.4s ease,
        opacity 0.3s ease;
}

.faq-answer p {
    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 50px 0 5px;

    color: #64748b;

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

    font-size: 13px;

    line-height: 1.8;

    transition: padding 0.35s ease;
}


/* =========================================================
   ACTIVE FAQ
========================================================= */

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;

    opacity: 1;
}

.faq-item.active .faq-answer p {
    padding-bottom: 22px;
}

.faq-item.active .faq-question {
    color: #2563eb;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);

    background: #0f172a;

    color: #ffffff;
}


/* =========================================================
   SECTION HEADER — SAME THROUGHOUT WEBSITE
========================================================= */

.reviews-faq-section .section-header {
    position: relative;
    z-index: 2;
}

.reviews-faq-section .section-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #2563eb;

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

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

    letter-spacing: 2px;
    text-transform: uppercase;
}

.reviews-faq-section .section-header h2 {
    margin-bottom: 15px;

    color: #0f172a;

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

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

    font-weight: 700;

    line-height: 1.2;
}

.reviews-faq-section .section-header p {
    max-width: 560px;

    margin-bottom: 0;

    color: #64748b;

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

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.review-item,
.faq-item {
    animation: reviewFadeUp 0.7s ease both;
}

.review-item:nth-child(1) {
    animation-delay: 0.10s;
}

.review-item:nth-child(2) {
    animation-delay: 0.20s;
}

.review-item:nth-child(3) {
    animation-delay: 0.30s;
}

.faq-item:nth-child(1) {
    animation-delay: 0.10s;
}

.faq-item:nth-child(2) {
    animation-delay: 0.18s;
}

.faq-item:nth-child(3) {
    animation-delay: 0.26s;
}

.faq-item:nth-child(4) {
    animation-delay: 0.34s;
}

.faq-item:nth-child(5) {
    animation-delay: 0.42s;
}

@keyframes reviewFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .reviews-faq-section {
        padding: 85px 0;
    }

    .review-item p {
        margin-left: 0;
    }

    .premium-faq {
        margin-top: 45px;
    }

}


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

@media (max-width: 575px) {

    .reviews-faq-section {
        padding: 70px 0;
    }

    .review-top {
        flex-wrap: wrap;
    }

    .review-stars {
        width: 100%;

        margin-left: 62px;
        margin-top: -7px;
    }

    .review-item {
        padding: 22px 0;
    }

    .review-item p {
        font-size: 13px;
        line-height: 1.75;
    }

    .google-review-btn {
        width: 100%;

        justify-content: center;
    }

    .faq-question {
        padding: 19px 0;

        font-size: 13px;
    }

    .faq-question i {
        width: 28px;
        height: 28px;
    }

    .faq-answer p {
        padding-right: 10px;
    }

}/* =====================================================
   OUR NETWORK - PREMIUM SLIDING PARTNERS
===================================================== */

.our-network {
    position: relative;
    overflow: hidden;
    padding: 90px 0 80px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(14, 165, 233, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef4fb 100%
        );
}


/* Heading */

.network-intro {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.network-intro span {
    display: inline-block;
    margin-bottom: 12px;

    color: #2563eb;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.network-intro h2 {
    margin: 0;

    color: #0f172a;

    font-family: "Poppins", sans-serif;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 700;
    line-height: 1.2;
}

.network-intro h2 strong {
    color: #2563eb;
}

.network-intro p {
    max-width: 620px;
    margin: 17px auto 0;

    color: #64748b;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   SLIDER
===================================================== */

.partner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 30px 0;

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

    border-top: 1px solid rgba(15,23,42,0.07);
    border-bottom: 1px solid rgba(15,23,42,0.07);
}


/* Left / right fade */

.partner-slider::before,
.partner-slider::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 180px;

    z-index: 5;
    pointer-events: none;
}

.partner-slider::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #f8fafc 0%,
            rgba(248,250,252,0.85) 30%,
            transparent 100%
        );
}

.partner-slider::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #f8fafc 0%,
            rgba(248,250,252,0.85) 30%,
            transparent 100%
        );
}


/* Moving track */

.partner-track {
    display: flex;
    align-items: center;

    width: max-content;

    animation:
        partnerMoving 25s linear infinite;

    will-change: transform;
}


/* Hover pause */

.partner-slider:hover .partner-track {
    animation-play-state: paused;
}


/* Partner name */

.partner-name {
    flex-shrink: 0;

    padding: 0 42px;

    color: #172033;

    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.partner-name:hover {
    color: #2563eb;
    transform: scale(1.04);
}


/* Small blue separator */

.partner-line {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 0 6px rgba(37,99,235,0.08);
}


/* =====================================================
   SLIDING ANIMATION
===================================================== */

@keyframes partnerMoving {

    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }

}


/* =====================================================
   BOTTOM NOTE
===================================================== */

.network-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 30px;

    color: #64748b;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.network-note i {
    color: #2563eb;
    font-size: 13px;
}


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

@media (max-width: 768px) {

    .our-network {
        padding: 70px 0;
    }

    .network-intro {
        margin-bottom: 38px;
    }

    .network-intro h2 {
        font-size: 29px;
    }

    .network-intro p {
        padding: 0 10px;
        font-size: 13px;
    }

    .partner-slider {
        padding: 24px 0;
    }

    .partner-name {
        padding: 0 27px;
        font-size: 16px;
    }

    .partner-line {
        width: 5px;
        height: 5px;
    }

    .partner-slider::before,
    .partner-slider::after {
        width: 70px;
    }

    .network-note {
        padding: 0 15px;
        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .our-network {
        padding: 60px 0;
    }

    .network-intro h2 {
        font-size: 26px;
    }

    .network-name {
        padding: 0 22px;
        font-size: 15px;
    }

    .partner-track {
        animation-duration: 20s;
    }

}
header {

    position: relative;

    z-index: 1000;
}

.navbar {

    background:
        rgba(255,255,255,.88);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom:
        1px solid rgba(10,35,70,.08);

    padding: 16px 0;
}

.navbar-brand {

    flex-shrink: 0;
}

.navbar-brand img {

    width: 58px;
    height: 58px;

    object-fit: contain;
}

.navbar-brand h5 {

    color: var(--navy);

    font-size: 19px;

    font-weight: 800;
}

.navbar-brand small {

    color: #718096;

    font-size: 10px;

    letter-spacing: .7px;
}

.nav-link {

    color: #26364d !important;

    font-size: 14px;

    font-weight: 600;

    margin: 0 7px;

    padding: 10px 13px !important;

    border-radius: 10px;
}

.nav-link:hover,
.nav-link.active {

    color: var(--blue) !important;

    background:
        rgba(23,105,255,.07);
}

.dropdown-menu {

    border: 0;

    padding: 10px;

    border-radius: 15px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);
}

.dropdown-item {

    padding: 10px 15px;

    border-radius: 9px;
}

.dropdown-item:hover {

    background: #eef5ff;

    color: var(--blue);
}

.navbar .btn {

    margin-left: 15px;
}


/* Company name */

.navbar-brand h5 {
    margin: 0;

    color: #0f172a;

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

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

    letter-spacing: 0.2px;
}


/* Tagline */

.navbar-brand small {
    display: block;

    margin-top: 2px;

    color: #64748b;

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

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 0.3px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.navbar-nav {
    align-items: center;

    gap: 4px;
}

.navbar-nav .nav-link {
    position: relative;

    padding: 9px 15px !important;

    color: #475569;

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

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

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


/* Hover background */

.navbar-nav .nav-link:hover {
    color: #2563eb;

    background: rgba(37, 99, 235, 0.06);

    border-radius: 8px;
}


/* Active */

.navbar-nav .nav-link.active {
    color: #2563eb;

    font-weight: 600;
}


/* Active underline */

.navbar-nav .nav-link::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 2px;

    height: 2px;

    border-radius: 10px;

    background: #2563eb;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}


/* =====================================================
   DROPDOWN
===================================================== */

.navbar .dropdown-menu {
    min-width: 205px;

    margin-top: 15px;

    padding: 9px;

    border: 1px solid rgba(15, 23, 42, 0.07);

    border-radius: 13px;

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

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.12);

    animation: headerDropdown 0.25s ease;
}

@keyframes headerDropdown {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.navbar .dropdown-item {
    padding: 10px 12px;

    border-radius: 8px;

    color: #475569;

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

    font-size: 12px;
    font-weight: 500;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}

.navbar .dropdown-item:hover {
    padding-left: 17px;

    color: #2563eb;

    background: #eff6ff;
}


/* Dropdown arrow */

.navbar .dropdown-toggle::after {
    margin-left: 5px;

    vertical-align: 2px;

    border-top-color: #64748b;

    transition: transform 0.3s ease;
}


/* =====================================================
   GET STARTED BUTTON
===================================================== */

.navbar > .container > .navbar-collapse > .btn {
    display: inline-flex;

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

    min-width: 125px;

    margin-left: 20px;

    padding: 11px 19px;

    border: 1px solid #2563eb;

    border-radius: 50px;

    background: #2563eb;

    color: #ffffff;

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

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

    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.navbar > .container > .navbar-collapse > .btn:hover {
    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.25);
}


/* =====================================================
   MOBILE TOGGLE
===================================================== */

.navbar-toggler {
    width: 44px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(15, 23, 42, 0.10);

    border-radius: 10px;

    background: #ffffff;

    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}


/* Bootstrap hamburger */

.navbar-toggler-icon {
    width: 20px;
    height: 20px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1199px) {

    .navbar-nav .nav-link {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .navbar-brand {
        margin-right: 15px;
    }

    .navbar > .container > .navbar-collapse > .btn {
        margin-left: 10px;
    }

}


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

@media (max-width: 991px) {

    .navbar {
        min-height: 74px;

        padding: 10px 0;
    }

    .navbar-brand img {
        width: 46px;
        height: 46px;
    }

    .navbar-brand h5 {
        font-size: 15px;
    }

    .navbar-brand small {
        font-size: 8px;
    }

    .navbar-collapse {
        margin-top: 15px;

        padding: 15px;

        border: 1px solid rgba(15,23,42,0.07);

        border-radius: 15px;

        background: #ffffff;

        box-shadow:
            0 15px 40px rgba(15,23,42,0.08);
    }

    .navbar-nav {
        align-items: stretch;

        gap: 3px;
    }

    .navbar-nav .nav-link {
        padding: 11px 13px !important;
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar > .container > .navbar-collapse > .btn {
        width: 100%;

        margin: 12px 0 0;

        padding: 12px;
    }

    .navbar .dropdown-menu {
        margin-top: 4px;

        border: 0;

        box-shadow: none;

        background: #f8fafc;
    }

}


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

@media (max-width: 575px) {

    .navbar-brand img {
        width: 43px;
        height: 43px;
    }

    .navbar-brand h5 {
        font-size: 14px;
    }

    .navbar-brand small {
        font-size: 7px;
    }

    .navbar-brand {
        margin-right: 10px;
    }

}/* =====================================================
   GLOBAL SECTION SPACING — COMPACT PREMIUM LAYOUT
===================================================== */

/* Reset unwanted section gaps */

main {
    margin: 0 !important;
    padding: 0 !important;
}

main > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =====================================================
   STANDARD SECTION SPACING
===================================================== */

.company-snapshot,
.business-divisions,
.founder-section,
.business-solutions,
.why-choose-section,
.how-we-work,
.partners-section,
.client-stories,
.testimonial-section,
.faq-section,
.cta-section {

    margin: 0 !important;

    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


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

.hero-section {
    margin: 0 !important;

    padding-top: 75px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.section-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.section-header h2 {
    margin-top: 10px;
    margin-bottom: 12px;
}

.section-header p {
    margin-bottom: 0;
}


/* =====================================================
   BOOTSTRAP SPACING CONTROL
===================================================== */

/* mt-5 was creating too much space */

main .mt-5 {
    margin-top: 35px !important;
}


/* mt-4 */

main .mt-4 {
    margin-top: 25px !important;
}


/* mt-3 */

main .mt-3 {
    margin-top: 18px !important;
}


/* =====================================================
   ROW RESET
===================================================== */

main section .row {
    margin-bottom: 0 !important;
}


/* =====================================================
   SNAPSHOT
===================================================== */

.company-snapshot {
    padding-top: 45px !important;
    padding-bottom: 55px !important;
}


/* =====================================================
   BUSINESS DIVISIONS
===================================================== */

.business-divisions {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   FOUNDER
===================================================== */

.founder-section {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   SOLUTIONS
===================================================== */

.business-solutions {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   WHY CHOOSE
===================================================== */

.why-choose-section {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   HOW WE WORK
===================================================== */

.how-we-work {
    padding-top: 65px !important;
    padding-bottom: 60px !important;
}


/* =====================================================
   NETWORK
===================================================== */

.partners-section {
    padding-top: 60px !important;
    padding-bottom: 55px !important;
}


/* =====================================================
   CLIENT STORIES
===================================================== */

.client-stories {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}


/* =====================================================
   CLIENT REVIEWS
===================================================== */

.testimonial-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}


/* =====================================================
   FAQ
===================================================== */

.faq-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}


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

.cta-section {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
}


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

@media (max-width: 991px) {

    .company-snapshot,
    .business-divisions,
    .founder-section,
    .business-solutions,
    .why-choose-section,
    .how-we-work,
    .partners-section,
    .client-stories,
    .testimonial-section,
    .faq-section {

        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .hero-section {
        padding-top: 55px !important;
        padding-bottom: 50px !important;
    }

}


@media (max-width: 575px) {

    .company-snapshot,
    .business-divisions,
    .founder-section,
    .business-solutions,
    .why-choose-section,
    .how-we-work,
    .partners-section,
    .client-stories,
    .testimonial-section,
    .faq-section {

        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .hero-section {
        padding-top: 45px !important;
        padding-bottom: 40px !important;
    }

    main .mt-5 {
        margin-top: 25px !important;
    }

}/* =====================================================
   OUR SOLUTIONS — CLEAN WHITE PREMIUM DESIGN
===================================================== */

.business-solutions {
    position: relative;
    overflow: hidden;

    background: #ffffff !important;
}


/* Soft decorative background glow */

.business-solutions::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    left: -180px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.055);

    filter: blur(20px);

    pointer-events: none;
}


/* Second glow */

.business-solutions::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -160px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(14, 165, 233, 0.045);

    filter: blur(20px);

    pointer-events: none;
}


/* Content above glow */

.business-solutions .container {
    position: relative;
    z-index: 2;
}


/* =====================================================
   SOLUTION CARD
===================================================== */

.business-solutions .solution-card {
    position: relative;

    height: 100%;

    padding: 30px 27px;

    overflow: hidden;

    border: 1px solid #e5eaf2;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.055);

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* Mouse hover */

.business-solutions .solution-card:hover {
    transform: translateY(-10px);

    border-color: rgba(37, 99, 235, 0.22);

    box-shadow:
        0 22px 55px rgba(37, 99, 235, 0.12);
}


/* =====================================================
   MOUSE HOVER LIGHT
===================================================== */

.business-solutions .solution-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.08);

    filter: blur(20px);

    opacity: 0;

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}


.business-solutions .solution-card:hover::before {
    opacity: 1;

    transform: translate(-30px, 30px);
}


/* =====================================================
   TOP BLUE LINE
===================================================== */

.business-solutions .solution-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    border-radius: 0 10px 10px 0;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #38bdf8
        );

    transition: width 0.45s ease;
}


.business-solutions .solution-card:hover::after {
    width: 100%;
}


/* =====================================================
   ICON
===================================================== */

.business-solutions .solution-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 21px;

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


.business-solutions .solution-card:hover .solution-icon {
    transform:
        translateY(-4px)
        rotate(-5deg)
        scale(1.08);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    color: #ffffff;

    box-shadow:
        0 12px 25px rgba(37, 99, 235, 0.22);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.business-solutions .solution-card h4 {
    position: relative;
    z-index: 2;

    color: #0f172a;

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

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

    margin-bottom: 12px;

    transition: color 0.3s ease;
}


.business-solutions .solution-card:hover h4 {
    color: #2563eb;
}


.business-solutions .solution-card p {
    position: relative;
    z-index: 2;

    color: #64748b;

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 20px;
}


/* =====================================================
   EXPLORE SERVICE
===================================================== */

.business-solutions .solution-card a {
    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #2563eb;

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

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.business-solutions .solution-card a:hover {
    gap: 13px;

    color: #1d4ed8;
}


/* =====================================================
   SUBTLE FLOATING ANIMATION
===================================================== */

@keyframes solutionFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


/* Only slight movement when not hovering */

.business-solutions .solution-card {
    animation: solutionFloat 5s ease-in-out infinite;
}


/* Stop float during hover */

.business-solutions .solution-card:hover {
    animation-play-state: paused;
}


/* Different timing for cards */

.business-solutions .col-xl-3:nth-child(2) .solution-card {
    animation-delay: 0.6s;
}

.business-solutions .col-xl-3:nth-child(3) .solution-card {
    animation-delay: 1.2s;
}

.business-solutions .col-xl-3:nth-child(4) .solution-card {
    animation-delay: 1.8s;
}


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

@media (max-width: 575px) {

    .business-solutions .solution-card {
        padding: 26px 22px;

        animation: none;
    }

}
.business-solutions .section-header h2{
    color:#14213d;
    font-weight:700;
}

.business-solutions .section-header p{
    color:#5c677d;
    font-weight:500;
    line-height:1.8;
}

.section-label{
    color:#0d6efd;
    font-weight:700;
    letter-spacing:2px;
}
.founder-highlights{
    display:flex;
    gap:20px;
    margin:35px 0;
    flex-wrap:wrap;
}

.highlight-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:20px;
    min-width:160px;
    text-align:center;
    transition:.35s;
}

.highlight-box:hover{
    transform:translateY(-6px);
    border-color:#2ea8ff;
}

.highlight-box h4{
    color:#2ea8ff;
    font-size:32px;
    font-weight:700;
    margin-bottom:8px;
}

.highlight-box span{
    color:#d8e4ff;
    font-size:15px;
}

.founder-name h3{
    font-size:38px;
    margin-bottom:8px;
}

.founder-name h6{
    color:#2ea8ff;
    font-size:20px;
    margin-bottom:8px;
}

.founder-name span{
    color:#b9c8e6;
}

blockquote{
    background:rgba(255,255,255,.05);
    border-left:4px solid #2ea8ff;
    padding:28px;
    border-radius:15px;
    margin-top:20px;
}

blockquote i{
    color:#2ea8ff;
    font-size:28px;
    margin-bottom:15px;
}

blockquote p{
    margin-bottom:15px;
    font-style:italic;
}

blockquote footer{
    color:#2ea8ff;
    font-weight:600;
}/* =========================================================
   HEADER — SAME FONT SIZE ON ALL PAGES
========================================================= */

header {
    position: relative;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #edf1f5;
}

header .navbar {
    padding: 12px 0;
    background: #ffffff;
}


/* ================= LOGO ================= */

header .navbar-brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

header .navbar-brand h5 {
    margin: 0;

    color: #071426;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
}

header .navbar-brand small {
    color: #718096;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 500;
}


/* ================= NAVIGATION ================= */

header .navbar-nav {
    align-items: center;
    gap: 3px;
}

header .navbar-nav .nav-link {
    padding: 10px 13px !important;

    color: #425268 !important;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    transition: color .25s ease;
}

header .navbar-nav .nav-link:hover {
    color: #1769ff !important;
}

header .navbar-nav .nav-link.active {
    color: #1769ff !important;
}


/* ================= DROPDOWN ================= */

header .dropdown-menu {
    margin-top: 8px !important;

    padding: 8px;

    border: 1px solid #e1e8f0;
    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 15px 35px rgba(7, 20, 38, .10);
}

header .dropdown-item {
    padding: 10px 12px;

    color: #425268;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;

    border-radius: 8px;
}

header .dropdown-item:hover,
header .dropdown-item.active {
    color: #1769ff;
    background: #eef5ff;
}


/* ================= GET STARTED ================= */

header .navbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 125px;

    padding: 11px 20px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #1769ff,
        #36b8ff
    ) !important;

    color: #ffffff !important;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    box-shadow: 0 7px 20px rgba(23, 105, 255, .18);

    transition: all .25s ease;
}

header .navbar .btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    header .navbar-collapse {
        margin-top: 12px;
        padding: 12px;

        border: 1px solid #e1e8f0;
        border-radius: 12px;

        background: #ffffff;
    }

    header .navbar-nav {
        align-items: stretch;
    }

    header .navbar-nav .nav-link {
        font-size: 13px;
    }

    header .navbar .btn {
        width: 100%;
        margin-top: 10px;
    }

}


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

@media (max-width: 575px) {

    header .navbar-brand img {
        width: 46px;
        height: 46px;
    }

    header .navbar-brand h5 {
        font-size: 16px;
    }

    header .navbar-brand small {
        font-size: 8px;
    }

}/* =========================================================
   HOME PAGE — FINAL FONT SIZE OVERRIDE
========================================================= */

/* HERO */

.hero-section h1 {
    font-size: 56px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
}

.hero-section p {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

.hero-section .hero-badge {
    font-size: 13px !important;
}

.hero-section .btn {
    font-size: 14px !important;
    padding: 13px 24px !important;
}


/* ALL SECTION HEADINGS */

.section-label {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.section-header h2,
section h2 {
    font-size: 42px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.section-header p,
section .section-header p {
    font-size: 15px !important;
    line-height: 1.8 !important;
}


/* CARDS */

.service-card h3,
.about-card h3,
.card h3 {
    font-size: 21px !important;
}

.service-card p,
.about-card p,
.card p {
    font-size: 14px !important;
    line-height: 1.75 !important;
}


/* NORMAL SECTION TEXT */

section p {
    font-size: 14px !important;
    line-height: 1.75 !important;
}


/* BUTTONS */

section .btn {
    font-size: 14px !important;
    padding: 12px 22px !important;
}


/* FOOTER */

footer p,
footer span,
footer a {
    font-size: 13px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hero-section h1 {
        font-size: 46px !important;
    }

    .hero-section p {
        font-size: 15px !important;
    }

    .section-header h2,
    section h2 {
        font-size: 36px !important;
    }

}


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

@media (max-width: 575px) {

    .hero-section h1 {
        font-size: 36px !important;
    }

    .hero-section p {
        font-size: 14px !important;
    }

    .section-header h2,
    section h2 {
        font-size: 30px !important;
    }

    .section-header p {
        font-size: 13px !important;
    }

    .service-card h3,
    .about-card h3,
    .card h3 {
        font-size: 19px !important;
    }

}/* =========================================================
   HOME HERO BUTTONS
========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}


/* BOTH BUTTONS */

.hero-buttons .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 180px !important;
    min-height: 52px !important;

    padding: 14px 25px !important;

    border-radius: 8px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all .3s ease !important;
}


/* =========================================================
   EXPLORE SOLUTIONS
========================================================= */

.hero-buttons .btn:first-child {
    background: #1769ff !important;
    border: 1px solid #1769ff !important;

    color: #ffffff !important;

    box-shadow: 0 8px 20px rgba(23, 105, 255, .20) !important;
}

.hero-buttons .btn:first-child:hover {
    background: #0d5be0 !important;
    border-color: #0d5be0 !important;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =========================================================
   TALK TO EXPERT
========================================================= */

.hero-buttons .btn:last-child {
    background: rgba(255, 255, 255, .08) !important;

    border: 1px solid rgba(255, 255, 255, .35) !important;

    color: #ffffff !important;

    box-shadow: none !important;
}

.hero-buttons .btn:last-child:hover {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #071426 !important;

    transform: translateY(-2px);
}


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

@media (max-width: 575px) {

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

}/* =========================================================
   KNOW OUR JOURNEY BUTTON
========================================================= */

.hero-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 50px !important;
    padding: 13px 24px !important;

    border: 1px solid #1769ff !important;
    border-radius: 8px !important;

    background: #1769ff !important;
    color: #ffffff !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    box-shadow: 0 8px 20px rgba(23, 105, 255, .18) !important;

    transition: all .3s ease !important;
}

.hero-btn:hover {
    background: #0d5be0 !important;
    border-color: #0d5be0 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
}

.hero-btn i {
    font-size: 12px;
    margin-left: 8px;
}





/* =========================================================
   PK GROUP — LOADER → NAVBAR → HERO REVEAL
   Paste at VERY END of css/index.css
========================================================= */

/* ---------------------------------------------------------
   1. PAGE LOADER
--------------------------------------------------------- */

#pk-page-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 99999;

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

    overflow: hidden;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}


/* Loader logo */

.loader-logo-wrap {
    position: relative;
    width: 150px;
    height: 150px;

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

    transform: scale(1);
    opacity: 1;

    transition:
        transform 0.75s cubic-bezier(.22,1,.36,1),
        opacity 0.35s ease;
}


.loader-logo {
    width: 150px;
    height: 150px;

    object-fit: contain;

    display: block;

    animation:
        pkLogoRotate 1.1s ease-in-out,
        pkLogoPulse 1.1s ease-in-out;
}


/* ---------------------------------------------------------
   Logo animation
--------------------------------------------------------- */

@keyframes pkLogoRotate {

    0% {
        transform: rotate(-180deg) scale(.65);
    }

    55% {
        transform: rotate(10deg) scale(1.08);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }

}


@keyframes pkLogoPulse {

    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }

}


/* ---------------------------------------------------------
   2. IMPORTANT:
   JS adds .pk-logo-to-navbar
--------------------------------------------------------- */

#pk-page-loader.pk-logo-to-navbar {
    background: transparent;
    pointer-events: none;
}


#pk-page-loader.pk-logo-to-navbar .loader-logo-wrap {

    /*
       JS calculates exact navbar-logo position.
       Do NOT remove these variables.
    */

    position: fixed;

    left: var(--pk-logo-left);
    top: var(--pk-logo-top);

    width: var(--pk-logo-width);
    height: var(--pk-logo-height);

    transform: none;

    z-index: 100000;

    transition:
        left 0.85s cubic-bezier(.22,1,.36,1),
        top 0.85s cubic-bezier(.22,1,.36,1),
        width 0.85s cubic-bezier(.22,1,.36,1),
        height 0.85s cubic-bezier(.22,1,.36,1);
}


#pk-page-loader.pk-logo-to-navbar .loader-logo {

    width: 100%;
    height: 100%;

    animation: none;

}


/* ---------------------------------------------------------
   3. LOADER HIDE
--------------------------------------------------------- */

#pk-page-loader.pk-loader-hide {

    opacity: 0;
    visibility: hidden;
}


/* ---------------------------------------------------------
   4. NAVBAR — initially hidden
--------------------------------------------------------- */

.pk-header {

    opacity: 0;

    transform:
        translateY(-35px);

    visibility: hidden;

    transition:
        opacity 0.75s ease,
        transform 0.8s cubic-bezier(.22,1,.36,1),
        visibility 0s linear 0.8s;
}


/* When JS says page is ready */

body.pk-page-ready .pk-header {

    opacity: 1;

    transform:
        translateY(0);

    visibility: visible;

    transition:
        opacity 0.75s ease,
        transform 0.8s cubic-bezier(.22,1,.36,1);
}


/* ---------------------------------------------------------
   5. NAVBAR LOGO
--------------------------------------------------------- */

.pk-header .navbar-brand img {

    opacity: 0;

    transform:
        scale(.75);

    transition:
        opacity 0.55s ease 0.15s,
        transform 0.65s cubic-bezier(.22,1,.36,1) 0.15s;
}


body.pk-page-ready .pk-header .navbar-brand img {

    opacity: 1;

    transform:
        scale(1);
}


/* Navbar text */

body.pk-page-ready .pk-header .navbar-brand h5,
body.pk-page-ready .pk-header .navbar-brand small {

    animation:
        pkNavTextReveal 0.65s ease both;

}


@keyframes pkNavTextReveal {

    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* ---------------------------------------------------------
   6. NAVIGATION LINKS
--------------------------------------------------------- */

.pk-header .nav-link {

    opacity: 0;

    transform:
        translateY(-12px);
}


body.pk-page-ready .pk-header .nav-link {

    animation:
        pkNavLinkReveal 0.55s ease forwards;
}


body.pk-page-ready .pk-header .nav-item:nth-child(1) .nav-link {
    animation-delay: .20s;
}

body.pk-page-ready .pk-header .nav-item:nth-child(2) .nav-link {
    animation-delay: .28s;
}

body.pk-page-ready .pk-header .nav-item:nth-child(3) .nav-link {
    animation-delay: .36s;
}

body.pk-page-ready .pk-header .nav-item:nth-child(4) .nav-link {
    animation-delay: .44s;
}

body.pk-page-ready .pk-header .nav-item:nth-child(5) .nav-link {
    animation-delay: .52s;
}


@keyframes pkNavLinkReveal {

    from {

        opacity: 0;

        transform:
            translateY(-12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ---------------------------------------------------------
   7. GET STARTED BUTTON
--------------------------------------------------------- */

.pk-header .navbar-collapse > .btn {

    opacity: 0;

    transform:
        translateY(-12px);
}


body.pk-page-ready .pk-header .navbar-collapse > .btn {

    animation:
        pkNavButtonReveal 0.6s ease forwards;

    animation-delay: .6s;
}


@keyframes pkNavButtonReveal {

    from {

        opacity: 0;

        transform:
            translateY(-12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   8. HERO — INITIAL STATE
========================================================= */

.hero-section {

    position: relative;

    overflow: hidden;
}


/*
   Hero content starts hidden.
   This prevents it from appearing behind loader.
*/

.hero-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    visibility: hidden;
}


/* Hero image */

.hero-image-reveal {

    opacity: 0;

    transform:
        translateX(60px)
        scale(.94);

    visibility: hidden;
}


/* =========================================================
   9. HERO REVEAL
========================================================= */

body.pk-page-ready .hero-badge {

    animation:
        pkHeroUp 0.75s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .15s;
}


body.pk-page-ready .hero-section h1 {

    animation:
        pkHeroUp 0.8s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .28s;
}


body.pk-page-ready .hero-section p {

    animation:
        pkHeroUp 0.8s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .42s;
}


body.pk-page-ready .hero-buttons {

    animation:
        pkHeroUp 0.8s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .56s;
}


body.pk-page-ready .hero-highlights {

    animation:
        pkHeroUp 0.8s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .68s;
}


/* Right image */

body.pk-page-ready .hero-image-reveal {

    animation:
        pkHeroImage 1s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay: .30s;
}


/* ---------------------------------------------------------
   Hero animations
--------------------------------------------------------- */

@keyframes pkHeroUp {

    from {

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }

}


@keyframes pkHeroImage {

    from {

        opacity: 0;

        visibility: hidden;

        transform:
            translateX(60px)
            scale(.94);

    }

    to {

        opacity: 1;

        visibility: visible;

        transform:
            translateX(0)
            scale(1);

    }

}


/* =========================================================
   10. HERO BADGE SPECIAL EFFECT
========================================================= */

body.pk-page-ready .hero-badge {

    position: relative;
}


body.pk-page-ready .hero-badge::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: currentColor;

    animation:
        pkBadgeLine 0.7s ease forwards;

    animation-delay: .75s;
}


@keyframes pkBadgeLine {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   11. HERO BUTTONS
========================================================= */

body.pk-page-ready .hero-buttons .btn {

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


body.pk-page-ready .hero-buttons .btn:hover {

    transform:
        translateY(-3px);

}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 991px) {

    #pk-page-loader.pk-logo-to-navbar .loader-logo-wrap {

        /*
          On mobile, logo destination is calculated
          by JS as well.
        */

        transition:
            left 0.75s cubic-bezier(.22,1,.36,1),
            top 0.75s cubic-bezier(.22,1,.36,1),
            width 0.75s cubic-bezier(.22,1,.36,1),
            height 0.75s cubic-bezier(.22,1,.36,1);

    }


    .hero-section {

        padding-top: 50px;

    }


    body.pk-page-ready .hero-image-reveal {

        animation-delay: .45s;

    }

}


/* =========================================================
   13. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}