/* Homepage styles — moved out of frontend/index.blade.php (inline <style> blocks, in page order)
   so browsers cache them. Edit here, not in the view. */

/* Grayscale effect for business listing logos */
.business-listing-logo {
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.business-listing-logo:hover {
    filter: grayscale(0%);
}

/* Hero CTA buttons — SVG icon + text */
.hero-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 9px;
}
.hero-btn svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}
.hero-btn span { line-height: 1; }
.hero-btn-wa {
    background: #25D366;
    border: 1px solid #25D366;
    color: #fff;
}
.hero-btn-wa:hover,
.hero-btn-wa:focus {
    background: #1ebe5a;
    border-color: #1ebe5a;
    color: #fff;
}

/* hero — balanced layout, bold heading, larger image */
.main-banner .d-index { padding-top: 44px; padding-bottom: 44px; }
/* top-aligned (not center) so the text NEVER shifts when the
   image slider changes height — and text & photo start level */
.main-banner .row { align-items: flex-start; }
.main-banner .row .col-lg-5 { align-self: flex-start !important; }

/* bold headline — smaller + modern fade-up entrance animation */
.main-banner .hero-content h1 {
    font-weight: 600;
    font-size: 33px;
    line-height: 1.34;
    letter-spacing: -0.018em;
    margin-bottom: 16px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.main-banner .hero-content h6 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
/* tighten paragraph spacing so the hero isn't sparse */
.main-banner .hero-content p {
    margin-bottom: 12px !important;
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* gentle fade + slide-up — plays once on load */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .main-banner .hero-content h1,
    .main-banner .hero-content h6,
    .main-banner .hero-content p,
    .hero-badge, .hero-badge-dot,
    .hero-cta-row, .hero-proof { animation: none !important; }
}

@media (max-width: 991px) {
    .main-banner .hero-content h1 {
        font-size: 16px !important; font-weight: 500 !important;
        line-height: 1.35 !important; letter-spacing: 0 !important;
        margin-top: 26px !important;   /* push the heading down, away from the banner */
    }
    .main-banner .hero-content h1 .hero-hl { font-weight: 600 !important; }
    .hero-mbr { display: block !important; }   /* force a clean 2-line heading on mobile */
    .main-banner .hero-content .hero-sub { font-size: 14px !important; line-height: 1.65 !important; }
    .main-banner .d-index { padding-top: 24px; padding-bottom: 24px; }
    /* hide the floating trust badge on mobile (looks disconnected between image and heading) */
    .hero-badge { display: none !important; }
}

/* ===== modern hero content — badge · highlight · CTA · social proof ===== */
.hero-content { max-width: 560px; }
.hero-mbr { display: none; }   /* mobile-only line break in the hero heading */

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #eaf1fe; color: #3b82f6;
    font-size: 13px; font-weight: 600;
    padding: 7px 16px; border-radius: 999px;
    border: 1px solid #d6e4fd; margin-bottom: 18px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #3b82f6; flex-shrink: 0;
    animation: heroDot 2s infinite;
}
@keyframes heroDot {
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(59,130,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.main-banner .hero-content h1 { color: #0f1f3d; }
/* highlighted phrase — semi-bold with a soft blue gradient */
.main-banner .hero-content h1 .hero-hl {
    font-weight: 600;
    color: #3b82f6;
    background: linear-gradient(95deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub { font-size: 15.5px; line-height: 1.7; color: #475569; }

.hero-cta-row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
    margin: 22px 0 20px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.45s both;
}
.hero-cta-primary {
    display: inline-flex; align-items: center; gap: 7px;
    background: #3b82f6; color: #fff;
    font-weight: 600; font-size: 13.5px; white-space: nowrap;
    padding: 10px 18px; border-radius: 10px; text-decoration: none;
    box-shadow: 0 6px 16px rgba(59,130,246,0.28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hero-cta-primary:hover {
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(59,130,246,0.40);
}
.hero-cta-primary svg { width: 15px; height: 15px; }
.hero-cta-ghost {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1.5px solid #e3e8ef;
    padding: 6px 15px 6px 6px; border-radius: 10px;
    text-decoration: none; white-space: nowrap;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-cta-ghost:hover {
    border-color: #3b82f6;
    box-shadow: 0 6px 18px rgba(15,31,61,0.07);
}
.hero-cta-ico {
    width: 32px; height: 32px; border-radius: 50%;
    background: #3b82f6; color: #fff; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.hero-cta-ico svg { width: 14px; height: 14px; }
.hero-cta-ghost-txt {
    display: flex; flex-direction: column;
    line-height: 1.25; text-align: left;
}
.hero-cta-ghost-txt b { color: #0f1f3d; font-size: 13px; font-weight: 600; }
.hero-cta-ghost-txt small { color: #94a3b8; font-size: 10.5px; }

.hero-proof {
    display: flex; align-items: center; gap: 14px;
    animation: heroFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}
.hero-avatars { display: flex; flex-shrink: 0; }
.hero-avatars span {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid #fff; margin-left: -13px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px;
}
.hero-avatars span:first-child { margin-left: 0; }
.hero-stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; }
.hero-proof-txt div:last-child { color: #64748b; font-size: 13.5px; }
.hero-proof-txt b { color: #0f1f3d; }

@media (max-width: 991px) {
    .hero-content { max-width: none; }
    .hero-cta-row, .hero-proof { justify-content: center; }
}
@media (max-width: 575px) {
    /* keep the two hero CTAs side-by-side (not stacked), compact & lighter */
    .hero-cta-row { flex-wrap: nowrap !important; gap: 8px !important; justify-content: center; }
    .hero-cta-primary {
        font-size: 11px !important; font-weight: 500 !important;
        padding: 8px 12px !important; gap: 5px; white-space: nowrap;
    }
    .hero-cta-primary svg { width: 13px !important; height: 13px !important; }
    .hero-cta-ghost { padding: 4px 10px 4px 4px !important; gap: 6px; }
    .hero-cta-ico { width: 26px !important; height: 26px !important; }
    .hero-cta-ico svg { width: 12px !important; height: 12px !important; }
    .hero-cta-ghost-txt b { font-size: 11px !important; font-weight: 500 !important; }
    .hero-cta-ghost-txt small { font-size: 9px !important; }
}

/* ===== MOBILE FIX: hero columns were sizing to the image's intrinsic
   width (col-lg-* has no width below lg + flex min-width:auto), pushing
   the whole page wider than the viewport and clipping every section.
   Force full-width, shrinkable columns below lg. ===== */
@media (max-width: 991.98px) {
    /* only the OUTER hero row stacks full-width — scoped to
       .flex-row-reverse so the nested service-icon row (.row.g-0) is
       left alone and keeps its 4-across layout. */
    .main-banner .row.flex-row-reverse > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .main-banner .hero-content { text-align: center; }

    /* hero service icons: keep all four in ONE horizontal line */
    .main-banner .hero-content .row.g-0 { flex-wrap: nowrap !important; }
    .main-banner .hero-content .row.g-0 > [class*="col-"] {
        flex: 1 1 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

.gv-hero { position: relative; background: #ffffff; padding-top: 60px; }
.gv-hero-stage { position: relative; }
/* all slides share one grid cell: the hero keeps the tallest slide's height,
   so the search bar and sections below never jump when slides rotate (CLS) */
.gv-hero-track { display: grid; }
.gv-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 46% 1fr; align-items: stretch; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility .45s; }
.gv-slide.is-active { visibility: visible; opacity: 1; z-index: 1; }
.gv-slide-photo { width: 100%; height: 100%; min-height: 450px; object-fit: cover; object-position: center 42%; display: block; background: #e9eff7; position: relative; z-index: 2;
    -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%); mask-image: linear-gradient(to right, #000 68%, transparent 100%); }
.gv-slide-content { padding: 30px 56px 44px 54px; align-self: center; max-width: 760px; }
.gv-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #2563eb; margin: 0 0 14px !important; line-height: 1.5 !important; }
.gv-hero .gv-kicker { font-size: 12px !important; font-weight: 700 !important; }
.gv-quote { position: relative; font-size: 33px; line-height: 1.34; font-weight: 600; color: #12213d; letter-spacing: -0.02em; margin: 0 0 22px; padding-top: 34px; }
.gv-quote::before { content: "\201C"; position: absolute; top: 4px; left: -4px; font-family: Georgia, 'Times New Roman', serif; font-size: 72px; line-height: 1; color: #bcd3f7; }
.gv-quote .gv-hl { color: #2563eb; font-weight: 800; }
.gv-blabel { font-size: 19px; font-weight: 800; color: #0f1f3d; margin-bottom: 4px; }
.gv-bsub { font-size: 13.5px; color: #6b7a8d; margin-bottom: 26px; }
.gv-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* soft neumorphic pill CTAs (icon circle + 3D) — scoped, header untouched */
.gvh-cta, .gvh-cta-ghost { display: inline-flex; align-items: center; gap: 13px; padding: 8px 30px 8px 8px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none; border: none; transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s; }
.gvh-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.gvh-ic svg { width: 20px; height: 20px; }
/* primary — blue pill, white icon circle */
.gvh-cta { background: linear-gradient(180deg,#3b82f6,#2563eb); color: #fff; box-shadow: 0 14px 30px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.14); }
.gvh-cta .gvh-ic { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.gvh-cta .gvh-ic svg { color: #2563eb; }
.gvh-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.14); }
/* secondary — light neumorphic pill, blue icon circle (reference look) */
.gvh-cta-ghost { background: linear-gradient(180deg,#ffffff,#ebedf1); color: #16213c; box-shadow: 0 14px 28px rgba(15,31,61,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(15,31,61,.06); }
.gvh-cta-ghost .gvh-ic { background: linear-gradient(180deg,#5bb8f7,#3ba5f0); box-shadow: 0 4px 10px rgba(59,165,240,.45); }
.gvh-cta-ghost .gvh-ic svg { color: #fff; }
.gvh-cta-ghost:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(15,31,61,.2), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(15,31,61,.06); }

.gv-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #e4ecf6; color: #2563eb; font-size: 23px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(15,31,61,.16); transition: background .2s, color .2s, transform .2s; }
.gv-arrow:hover { background: #2563eb; color: #fff; transform: translateY(-50%) scale(1.06); }
.gv-prev { left: 16px; }
.gv-next { right: 16px; }
.gv-dots { position: absolute; left: 46%; right: 0; bottom: 26px; display: flex; gap: 8px; justify-content: center; z-index: 5; }
.gv-dot { width: 9px; height: 9px; border-radius: 999px; background: #c8d6ea; border: none; padding: 0; cursor: pointer; transition: width .25s, background .25s; }
.gv-dot.is-active { width: 26px; background: #2563eb; }

/* search bar floats over the bottom edge of the banner (rounded both sides) */
.gv-search-wrap { margin-top: 0; margin-bottom: -40px; position: relative; z-index: 12; }
.gv-search { position: relative; display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #eaf0f8; border-radius: 999px; padding: 0 0 0 10px; box-shadow: 0 24px 54px rgba(15,31,61,.18); }
.gv-search-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; padding-right: 12px; }
.gv-search-field > svg { position: absolute; left: 18px; width: 19px; height: 19px; color: #9aa8bd; pointer-events: none; }
.gv-search input { width: 100%; border: none; outline: none; background: transparent; font-size: 15px; color: #0f1f3d; padding: 18px 14px 18px 46px; }
.gv-search input::placeholder { color: #9aa8bd; }
/* Search = fully hard-square; Get a Quote = square left, round right (fills the pill end) */
.gv-search-btn { display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #fff; border: none; font-weight: 600; font-size: 14px; padding: 0 26px; border-radius: 0; cursor: pointer; white-space: nowrap; }
.gv-search-btn:hover { background: #1d4ed8; }
.gv-search-quote { display: inline-flex; align-items: center; gap: 8px; background: #0f1f3d; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 0 30px; border-radius: 0 999px 999px 0; white-space: nowrap; }
.gv-search-quote:hover { color: #fff; background: #16294d; }
.gv-ac { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff; border: 1px solid #e7edf5; border-radius: 14px; box-shadow: 0 20px 44px rgba(15,31,61,.14); overflow: hidden; z-index: 30; display: none; }
.gv-ac.show { display: block; }
.gv-ac a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #22314c; text-decoration: none; font-size: 14px; border-bottom: 1px solid #f2f5f9; }
.gv-ac a:last-child { border-bottom: none; }
.gv-ac a:hover, .gv-ac a.active { background: #f3f7ff; color: #2563eb; }
.gv-ac a svg { width: 15px; height: 15px; color: #9aa8bd; flex-shrink: 0; }
.gv-ac .gv-ac-empty { padding: 13px 18px; color: #8494a8; font-size: 13px; }

.tech-strip { padding-top: 62px !important; }

@media (max-width: 991px) {
    .gv-hero { padding-top: 80px; }
    .gv-slide { grid-template-columns: 1fr; }
    /* hidden slides reserve the search bar's space too, so the shared height stays constant */
    .gv-search-moved .gv-slide:not(.is-active) .gv-slide-content { margin-top: 30px; }
    /* banner images are square — show the whole photo instead of cropping a thin strip */
    .gv-slide-photo {
        width: 100%; max-width: 340px; height: auto; min-height: 0;
        /* trims only the empty top ~12% of the square artwork */
        aspect-ratio: 25 / 22; object-fit: cover; object-position: center bottom;
        margin: 0 auto; background: transparent;
        /* soft fade at the bottom edge (like the desktop side fade) so the photo's cut line never shows */
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    }
    .gv-slide-content { padding: 18px 18px 16px; text-align: center; max-width: none; }
    .gv-hero .gv-kicker { font-size: 11px !important; letter-spacing: .08em; margin-bottom: 8px !important; }
    .gv-quote { font-size: 19px; line-height: 1.42; letter-spacing: -0.01em; padding-top: 22px; margin-bottom: 14px; }
    .gv-quote::before { left: 50%; transform: translateX(-50%); top: -6px; font-size: 44px; }
    .gv-blabel { font-size: 15px; margin-bottom: 2px; }
    .gv-bsub { font-size: 13px; margin-bottom: 18px; }
    .gv-hero-cta { justify-content: center; gap: 10px; }
    /* compact CTAs on phones */
    .gvh-cta, .gvh-cta-ghost { gap: 9px; padding: 5px 18px 5px 5px; font-size: 14px; }
    .gvh-cta, .gvh-cta:hover { box-shadow: 0 8px 18px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.35); }
    .gvh-cta-ghost, .gvh-cta-ghost:hover { box-shadow: 0 6px 16px rgba(15,31,61,.12), inset 0 1px 0 rgba(255,255,255,.95); }
    .gvh-ic { width: 32px; height: 32px; }
    .gvh-ic svg { width: 16px; height: 16px; }
    .gv-arrow { display: none; }
    .gv-dots { position: static; left: auto; right: auto; bottom: auto; justify-content: center; margin: 12px 0 2px; }
    .gv-search { flex-wrap: wrap; gap: 10px; border-radius: 20px; padding: 10px; }
    .gv-search-wrap { margin-bottom: -30px; }
    .gv-search-field { flex: 1 1 100%; padding-right: 0; }
    .gv-search input { padding: 13px 14px 13px 46px; }
    .gv-search-btn, .gv-search-quote { flex: 1 1 45%; justify-content: center; padding: 13px 12px; border-radius: 12px; }
    .tech-strip { padding-top: 46px !important; }

    /* search moved (by JS) into the active slide, right under the photo */
    /* pulled up over the faded photo edge so image and search blend together */
    .gv-slide .gv-search-wrap { margin: -22px 16px 0; z-index: 12; }
    .gv-slide .gv-search { flex-wrap: nowrap; gap: 6px; padding: 5px; border-radius: 999px; box-shadow: 0 10px 28px rgba(15,31,61,.14); }
    .gv-slide .gv-search-field { flex: 1 1 auto; min-width: 0; padding-right: 0; }
    .gv-slide .gv-search-field > svg { left: 14px; width: 17px; height: 17px; }
    .gv-slide .gv-search input { padding: 11px 8px 11px 40px; font-size: 14px; }
    .gv-slide .gv-search-btn { flex: 0 0 auto; padding: 0 16px; border-radius: 999px; font-size: 13.5px; }
    .gv-slide .gv-search-quote { display: none; }
    .gv-search-moved .tech-strip { padding-top: 22px !important; }
}
@media (max-width: 575px) {
    .gv-slide-photo { max-width: 300px; }
    .gv-quote { font-size: 18px; }
    .gv-hero-cta { flex-wrap: nowrap; }
    .gvh-cta, .gvh-cta-ghost { padding: 4px 14px 4px 4px; gap: 7px; font-size: 13px; white-space: nowrap; }
    .gvh-ic { width: 30px; height: 30px; }
    .gvh-ic svg { width: 15px; height: 15px; }
}
@media (max-width: 419px) {
    .gv-hero-cta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .gv-slide { transition: none; } }

/* remove the empty gap below the hero so the strip sits right under it */
.main-banner .d-index { padding-bottom: 8px; }

/* thin strip stuck right under the hero banner */
.tech-strip {
    padding: 60px 0 14px;
    background: #f8fafc;
    border-top: 1px solid #eceff3;
    border-bottom: 1px solid #eceff3;
    margin-top: 0;
}
.tech-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tech-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: techScroll 48s linear infinite;
}
.tech-marquee:hover .tech-track { animation-play-state: paused; }
@keyframes techScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* each item — official logo + clean light text (no pill) */
/* clean item — icon chip + plain text on the light strip */
.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.01em;
}
.tech-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;             /* full circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;        /* merge with strip background */
    border: none;
    flex-shrink: 0;
    color: #3b82f6;
}
/* single-colour (monochrome) logos — no extra brand colours */
.tech-ico i { font-size: 20px; line-height: 1; color: #3b82f6; }
.tech-ico img { width: 30px; height: 30px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .tech-track { animation: none; }
}

.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #e7ecf3; border: 1px solid #e7ecf3; border-radius: 16px; overflow: hidden; }
.svc-cell { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 14px; padding: 30px 14px; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.svc-cell:hover { background: #f4f8ff; }
.svc-ic { height: 46px; background: none; color: #2563eb; display: flex; align-items: center; justify-content: center; transition: transform .25s ease, color .2s ease; }
.svc-cell:hover .svc-ic { transform: translateY(-3px); color: #1d4ed8; }
.svc-ic svg { width: 42px; height: 42px; }
.svc-name { font-size: 13.5px; font-weight: 700; color: #0f1f3d; line-height: 1.35; }
.svc-viewall { display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #fff; font-weight: 600; font-size: 14px; padding: 12px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 22px rgba(37,99,235,.28); transition: transform .2s, box-shadow .2s; }
.svc-viewall:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.4); }
@media (max-width: 991px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } .svc-cell { padding: 22px 10px; gap: 11px; } .svc-ic { height: 40px; } .svc-ic svg { width: 36px; height: 36px; } .svc-name { font-size: 12.5px; } }

.gv-team { padding: 60px 0 0; background: radial-gradient(1000px 420px at 50% 0, #eef4ff 0%, transparent 62%), #ffffff; overflow: hidden; }
.gv-team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; text-align: left; margin-bottom: 10px; }
.gv-team-head-left { max-width: 680px; }
.gv-team-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #2563eb; margin-bottom: 10px; }
.gv-team-title { font-size: 30px; font-weight: 800; color: #0f1f3d; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
.gv-team-sub { font-size: 14.5px; line-height: 1.7; color: #5b6b80; margin: 0 0 22px; }
.gv-team-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; font-weight: 700; font-size: 14px; padding: 13px 28px; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 26px rgba(37,99,235,.32); transition: transform .2s, box-shadow .2s; }
.gv-team-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,99,235,.42); }
/* the artwork runs a little wider than the text column — the section
   already clips, so the breakout can't cause a horizontal scrollbar */
.gv-team-imgwrap {
    text-align: center;
    margin-top: 8px;
    width: calc(100% + 120px);
    margin-left: -60px;
    margin-right: -60px;
}
.gv-team-img { max-width: 1260px; width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 22px 40px rgba(15,31,61,.14)); }
@media (max-width: 991px) {
    .gv-team-imgwrap { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
}
@media (max-width: 767px) {
    .gv-team { padding-top: 42px; }
    .gv-team-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .gv-team-title { font-size: 23px; }
    .gv-team-sub { font-size: 13.5px; }
    .gv-team-imgwrap { width: 100%; margin-left: 0; margin-right: 0; }
}

.gvcs { padding: 58px 0; background: #ffffff; }
.gvcs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.gvcs-head-left { max-width: 640px; }
.gvcs-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #2563eb; margin-bottom: 10px; }
.gvcs-title { font-size: 30px; font-weight: 800; color: #16213e; line-height: 1.22; margin: 0 0 10px; }
.gvcs-sub { font-size: 14.5px; color: #5b6b80; line-height: 1.6; margin: 0; }
.gvcs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gvcs-card { padding: 0; border: none; background: none; cursor: pointer; text-align: left; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(15,31,61,.1); transition: transform .25s ease, box-shadow .25s ease; display: block; }
.gvcs-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(15,31,61,.16); }
.gvcs-thumb { position: relative; display: block; aspect-ratio: 3/4; background: linear-gradient(150deg,#1e3a8a,#2563eb); overflow: hidden; }
.gvcs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gvcs-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,31,61,0) 45%, rgba(15,31,61,.72) 100%); }
.gvcs-play { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.9); color: #2563eb; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .25s ease, background .25s ease; }
.gvcs-play svg { width: 24px; height: 24px; margin-left: 2px; }
.gvcs-card:hover .gvcs-play { transform: translate(-50%,-50%) scale(1.1); background: #fff; }
.gvcs-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 16px 15px; }
.gvcs-t { display: block; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.gvcs-n { display: block; color: #d6e2f5; font-size: 12.5px; margin-top: 3px; }
/* card meta sits over the thumb — make card a positioning context */
.gvcs-card { position: relative; }
.gvcs-meta { pointer-events: none; }

.gvcs-lb { position: fixed; inset: 0; z-index: 100050; background: rgba(8,14,28,.86); display: none; align-items: center; justify-content: center; padding: 20px; }
.gvcs-lb.show { display: flex; }
.gvcs-lb-in { width: 100%; max-width: 880px; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; }
.gvcs-lb-in iframe { width: 100%; height: 100%; border: 0; display: block; }
.gvcs-lb-x { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.gvcs-lb-x:hover { background: rgba(255,255,255,.28); }

.gvcs-dots { display: none; }
@media (max-width: 991px) { .gvcs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .gvcs-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .gvcs-title { font-size: 23px; }
    /* phone: swipeable horizontal slider instead of a long vertical stack */
    .gvcs-grid {
        display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 0 -12px; padding: 4px 12px 18px; scroll-padding: 0 12px;
    }
    .gvcs-grid::-webkit-scrollbar { display: none; }
    .gvcs-card { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; box-shadow: 0 8px 20px rgba(15,31,61,.1); }
    .gvcs-card:hover { transform: none; }
    .gvcs-play { width: 46px; height: 46px; }
    .gvcs-play svg { width: 20px; height: 20px; }
    .gvcs-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
    .gvcs-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: #c8d6ea; cursor: pointer; transition: width .25s, background .25s; }
    .gvcs-dot.is-active { width: 22px; background: #2563eb; }
}

.svc2-section {
    padding: 56px 0 28px;
    background: #ffffff;
    position: relative;
}

.svc2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    text-align: left;
    margin: 0 0 34px;
}
.svc2-head-left { max-width: 640px; }
.svc-viewall-top {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; border: 1.5px solid #2563eb; color: #2563eb;
    font-weight: 700; font-size: 14px; padding: 9px 10px 9px 22px;
    border-radius: 999px; text-decoration: none; white-space: nowrap;
    flex-shrink: 0; transition: background .2s, color .2s;
}
.svc-viewall-top:hover { background: #2563eb; color: #fff; }
.svc-va-ic { width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, color .2s; }
.svc-viewall-top:hover .svc-va-ic { background: #fff; color: #2563eb; }
@media (max-width: 767px) {
    .svc2-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

.svc2-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 10px;
}

.svc2-title {
    font-size: 30px;
    font-weight: 800;
    color: #16213e;
    line-height: 1.22;
    margin: 0 0 10px;
}

.svc2-sub {
    font-size: 15px;
    color: #000000;
    line-height: 1.6;
    margin: 0;
}

/* ---- continuous (marquee) services scroll ---- */
.svc2-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.svc2-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 14px 0;
    animation: svc2Scroll 80s linear infinite;
}
.svc2-marquee:hover .svc2-track { animation-play-state: paused; }
@keyframes svc2Scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.svc2-card {
    flex-shrink: 0;
    width: 278px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #3b82f6;          /* blue border by default */
    border-radius: 16px;
    padding: 24px 22px;
    text-decoration: none;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.svc2-card:hover {
    background: #3b82f6;                   /* full blue on hover */
    box-shadow: 0 16px 34px rgba(59, 130, 246, 0.32);
    transform: translateY(-6px);
}

.svc2-card-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #16213e;
    margin: 0 0 8px;
    transition: color .3s ease;
}
.svc2-card:hover .svc2-card-title { color: #ffffff; }

.svc2-card-desc {
    font-size: 13.5px;
    color: #000000;
    line-height: 1.6;
    margin: 0 0 14px;
    flex-grow: 1;
    transition: color .3s ease;
}
.svc2-card:hover .svc2-card-desc { color: rgba(255, 255, 255, 0.92); }

.svc2-link {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .25s ease, color .3s ease;
}
.svc2-card:hover .svc2-link { color: #ffffff; gap: 11px; }

@media (prefers-reduced-motion: reduce) {
    .svc2-track { animation: none; }
}

@media (max-width: 767px) {
    .svc2-section { padding: 44px 0 22px; }
    .svc2-title { font-size: 23px; }
    .svc2-sub { font-size: 14px; }
    .svc2-card { width: 240px; }
}

.services-section {
    position: relative;
    overflow: hidden;
}

.service-box {
    /* background: rgba(255, 255, 255, 0.85); */
    /* backdrop-filter: blur(10px); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); */
    color: #333;
    transition: all 0.4s ease;
    text-align: center;
    /* padding: 10px; */
}

.content-text {
    font-weight: 500;
    font-size: 15px;
    color: #000000;
}

.content-icon {
    height: 100px;
}

/* .service-box:hover {
                                transform: translateY(-10px) scale(1.03);
                                box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
                                border-color: #3b82f6;
                            } */

.icon-wrapper {
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 14px; */
    border-radius: 50%;
    /* background: rgba(59, 130, 246, 0.1); */
    transition: all 0.4s ease;
}

@media only screen and (max-width: 767px) {
    .content-text {
        font-size: 11px;
        line-height: 1.25;
    }

    .content-icon {
        height: 42px;
    }

    .service-box { padding: 0 3px; }
}

/* .service-box:hover .icon-wrapper {
                                background: #3b82f6;
                                color: #fff;
                                transform: rotate(8deg) scale(1.1);
                            } */

.trust2-section { padding: 44px 0 40px; background: #ffffff; }

/* ---- heading ---- */
.trust2-head { text-align: center; margin-bottom: 24px; }
.trust2-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}
.trust2-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.015em;
    color: #0f1f3d;
    margin: 0;
}

/* ---- one quiet panel, hairline-divided ---- */
.trust2-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fcfdfe;
    border: 1px solid #e9eef5;
    border-radius: 0;
    overflow: hidden;
}

.trust2-cell {
    position: relative;
    padding: 16px 16px 14px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: background .25s ease;
}
.trust2-cell + .trust2-cell { box-shadow: inset 1px 0 0 #e9eef5; }
.trust2-cell:hover { background: #ffffff; }

.trust2-section.in-view .trust2-cell {
    animation: trust2Up .5s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes trust2Up { to { opacity: 1; transform: translateY(0); } }

/* thin accent that grows under the figure on hover */
.trust2-cell::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transform: translateX(-50%);
    transition: width .28s ease;
}
.trust2-cell:hover::after { width: 46px; }

.trust2-num {
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.035em;
    color: #0f1f3d;
    font-variant-numeric: tabular-nums;
}
.trust2-num i { font-style: normal; font-weight: 300; color: #2563eb; margin-left: 1px; }

.trust2-label {
    margin: 11px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #475569;
}

.trust2-desc {
    margin: 6px auto 0;
    max-width: 210px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #94a3b8;
}

.trust2-foot {
    margin: 18px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #a3adba;
}

@media (max-width: 767px) {
    .trust2-section { padding: 32px 0 28px; }
    .trust2-title { font-size: 19px; }
    .trust2-panel { grid-template-columns: repeat(2, 1fr); }
    .trust2-cell { padding: 18px 12px 16px; }
    /* hairlines: vertical between columns, horizontal between rows */
    .trust2-cell + .trust2-cell { box-shadow: none; }
    .trust2-cell:nth-child(even) { box-shadow: inset 1px 0 0 #e9eef5; }
    .trust2-cell:nth-child(n + 3) { box-shadow: inset 0 1px 0 #e9eef5; }
    .trust2-cell:nth-child(4) { box-shadow: inset 1px 0 0 #e9eef5, inset 0 1px 0 #e9eef5; }
    .trust2-num { font-size: 27px; }
    .trust2-label { font-size: 10px; letter-spacing: .1em; }
    .trust2-desc { font-size: 11px; max-width: none; }
    .trust2-foot { font-size: 11px; margin-top: 14px; }
}

.brands-section { padding: 56px 0; background: #ffffff; }
.brands-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.brands-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #3b82f6; margin-bottom: 10px;
}
.brands-title { font-size: 28px; font-weight: 800; color: #0f1f3d; line-height: 1.25; margin: 0 0 10px; }
.brands-sub { font-size: 14.5px; color: #000000; line-height: 1.65; margin: 0; }

.brand-card {
    display: flex; align-items: center; gap: 16px; height: 100%;
    background: #ffffff; border: 1px solid #e7ebf0; border-radius: 16px;
    padding: 20px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.brand-card, a.brand-card:hover, a.brand-card:focus { text-decoration: none; color: inherit; }
a.brand-card:focus-visible { outline: 2px solid var(--bc, #3b82f6); outline-offset: 3px; }
.brand-card:hover {
    transform: translateY(-6px);
    border-color: var(--bc, #3b82f6);
    box-shadow: 0 16px 32px rgba(14, 27, 43, 0.12);
}
.brand-logo {
    width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; color: #ffffff;
    background: var(--bc, #3b82f6);
}
.brand-name { font-size: 17px; font-weight: 700; color: #0f1f3d; margin: 0 0 3px; }
.brand-tag { font-size: 13px; color: #5b6573; line-height: 1.5; margin: 0; }

@media (max-width: 767px) {
    .brands-section { padding: 42px 0; }
    .brands-title { font-size: 22px; }
    /* 2 cards per row on phone — stack logo over text so it fits */
    .brand-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
        border-radius: 13px;
    }
    .brand-logo { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }
    .brand-name { font-size: 14px; }
    .brand-tag { font-size: 11.5px; line-height: 1.45; }
}
@media (max-width: 360px) {
    .brand-card { padding: 11px; }
    .brand-name { font-size: 13px; }
    .brand-tag { font-size: 11px; }
}

.news2 {
    padding: 76px 0;
    background: #f7f9fc;
    overflow: hidden;
}

/* ---- clean image gallery ---- */
.news2-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news2-main-wrap {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 22px 46px rgba(14, 27, 43, 0.16);
    opacity: 0;
}

.news2-main {
    display: block;
    width: 100%;
    height: 326px;
    object-fit: cover;
    transition: transform .5s ease;
}

.news2-main-wrap:hover .news2-main { transform: scale(1.05); }

.news2-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.42);
}
.news2-badge i { margin-right: 6px; }

.news2-thumbs {
    display: flex;
    gap: 16px;
}

.news2-thumb {
    flex: 1;
    width: 50%;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(14, 27, 43, 0.12);
    opacity: 0;
}

.news2-thumb img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform .5s ease;
}

.news2-thumb-news img { object-position: top; }
.news2-thumb:hover img { transform: scale(1.06); }

/* ---- scroll-reveal animation ---- */
.news2.in-view .news2-main-wrap { animation: n2Up .75s cubic-bezier(.2, .8, .2, 1) forwards; }
.news2.in-view .news2-thumb:nth-child(1) { animation: n2Up .65s cubic-bezier(.2, .8, .2, 1) .22s forwards; }
.news2.in-view .news2-thumb:nth-child(2) { animation: n2Up .65s cubic-bezier(.2, .8, .2, 1) .34s forwards; }

.news2-content > * { opacity: 0; }
.news2.in-view .news2-content > *:nth-child(1) { animation: n2Up .6s ease .15s forwards; }
.news2.in-view .news2-content > *:nth-child(2) { animation: n2Up .6s ease .26s forwards; }
.news2.in-view .news2-content > *:nth-child(3) { animation: n2Up .6s ease .37s forwards; }
.news2.in-view .news2-content > *:nth-child(4) { animation: n2Up .6s ease .48s forwards; }
.news2.in-view .news2-content > *:nth-child(5) { animation: n2Up .6s ease .59s forwards; }

@keyframes n2Up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---- content side ---- */
.news2-content { padding-left: 18px; }

.news2-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 14px;
}

.news2-title {
    font-size: 30px;
    font-weight: 800;
    color: #16213e;
    line-height: 1.25;
    margin: 0 0 16px;
}

.news2-text {
    font-size: 15px;
    color: #000000;
    line-height: 1.75;
    margin: 0 0 18px;
}

.news2-points {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.news2-points li {
    font-size: 14.5px;
    color: #16213e;
    margin-bottom: 11px;
}

.news2-points i { color: #3b82f6; margin-right: 9px; }

@media (prefers-reduced-motion: reduce) {
    .news2-main-wrap, .news2-thumb, .news2-content > * {
        opacity: 1 !important; animation: none !important;
    }
}

@media (max-width: 991px) {
    .news2 { padding: 54px 0; }
    .news2-main { height: 250px; }
    .news2-thumb img { height: 120px; }
    .news2-content { padding-left: 0; }
    .news2-title { font-size: 24px; }
}

.ldr-stripe { padding: 60px 0; background: linear-gradient(135deg, #eff6ff, #f0f9ff); }
.ldr-stripe .container { max-width: 1100px; }
.ldr-row {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 28px; align-items: center;
    background: #fff; padding: 26px 30px; border-radius: 16px;
    border: 1px solid #dbeafe;
    box-shadow: 0 14px 38px rgba(29,78,216,.08);
}
.ldr-photo {
    width: 110px; height: 110px; border-radius: 50%;
    overflow: hidden; background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff; box-shadow: 0 0 0 1px #bfdbfe;
}
.ldr-photo img { width: 100%; height: 100%; object-fit: cover; }
.ldr-photo .fb { font-size: 36px; font-weight: 700; color: #1d4ed8; letter-spacing: -.04em; }
.ldr-text .eb { font-size: 10px; font-weight: 600; color: #1e40af; letter-spacing: 1.5px; text-transform: uppercase; }
.ldr-text h3 { font-size: 19px; font-weight: 600; color: #0f172a; margin: 6px 0 6px; letter-spacing: -.012em; }
.ldr-text p { font-size: 13px; color: #475569; line-height: 1.7; margin: 0; max-width: 640px; }
.ldr-text p strong { color: #0f172a; font-weight: 600; }
.ldr-cta {
    background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff;
    font-size: 12px; font-weight: 600; padding: 11px 22px; border-radius: 9px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 8px 22px rgba(37,99,235,.32);
    transition: all .25s ease; white-space: nowrap;
}
.ldr-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,235,.45); }
@media (max-width: 767px) {
    .ldr-row { grid-template-columns: 1fr; text-align: center; padding: 24px; }
    .ldr-photo { margin: 0 auto; }
    .ldr-cta { justify-self: center; }
}

.why2 { padding: 52px 0; background: #ffffff; }
.why2-head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.why2-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #3b82f6; margin-bottom: 10px;
}
.why2-title { font-size: 30px; font-weight: 800; color: #0f1f3d; line-height: 1.22; margin: 0 0 10px; }
.why2-sub { font-size: 15px; color: #000000; line-height: 1.65; margin: 0; }

.why2-card {
    height: 100%; background: #fff; border: 1px solid #e7ebf0; border-radius: 0;
    padding: 14px 14px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why2-card:hover {
    transform: translateY(-5px); border-color: #3b82f6;
    box-shadow: 0 12px 26px rgba(59,130,246,.12);
}
.why2-icon {
    width: 42px; height: 42px; border-radius: 11px; display: flex;
    align-items: center; justify-content: center; background: #eaf2fe;
    color: #3b82f6; margin-bottom: 12px; transition: background .3s ease, color .3s ease;
}
.why2-icon svg { width: 21px; height: 21px; }
.why2-card:hover .why2-icon { background: #3b82f6; color: #fff; }
.why2-card-title { font-size: 15.5px; font-weight: 700; color: #0f1f3d; margin: 0 0 5px; }
.why2-card-desc { font-size: 13px; color: #000000; line-height: 1.55; margin: 0; }

/* ---- How We Work ---- */
.how2 { padding: 76px 0; background: linear-gradient(135deg, #0f1f3d 0%, #18335f 100%); }
.how2-step { position: relative; padding: 10px 6px; }
.how2-num {
    display: inline-block; font-size: 40px; font-weight: 800;
    color: rgba(255,255,255,.16); line-height: 1; margin-bottom: 8px;
}
.how2-step-title { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0 0 7px; }
.how2-step-desc { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.6; margin: 0; }
@media (min-width: 992px) {
    .how2 .col-lg-3:not(:last-child) .how2-step::after {
        content: ""; position: absolute; top: 14px; right: -12px;
        width: 24px; height: 2px; background: rgba(255,255,255,.2);
    }
}
@media (max-width: 767px) {
    .why2, .how2 { padding: 48px 0; }
    .why2-title { font-size: 23px; }
}

.dds-section { padding: 56px 0; background: #f7f9fc; overflow: hidden; }
.dds-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.dds-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #3b82f6; margin-bottom: 10px;
}
.dds-title { font-size: 28px; font-weight: 800; color: #0f1f3d; line-height: 1.25; margin: 0 0 10px; }
.dds-sub { font-size: 14.5px; color: #000000; line-height: 1.65; margin: 0; }

/* 2-row reel marquee */
.dds-marquee {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.dds-row { display: flex; gap: 16px; width: max-content; }
.dds-row-1 { animation: ddsLeft 58s linear infinite; }
.dds-row-2 { animation: ddsRight 58s linear infinite; }
.dds-marquee:hover .dds-row { animation-play-state: paused; }
@keyframes ddsLeft  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes ddsRight { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* clean white pill cards with a circular gradient icon */
.dds-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #ffffff;
    border: 1px solid #eaeef5;
    border-radius: 999px;
    padding: 9px 24px 9px 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15, 31, 61, 0.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dds-card:hover {
    transform: translateY(-5px);
    border-color: #bcd4fb;
    box-shadow: 0 16px 30px rgba(59, 130, 246, 0.18);
}
.dds-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    color: #ffffff; flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.30);
    transition: transform .35s ease;
}
.dds-icon svg { width: 22px; height: 22px; }
.dds-card:hover .dds-icon { transform: scale(1.08) rotate(-6deg); }
.dds-name {
    font-size: 14.5px; font-weight: 600; color: #16213e;
    line-height: 1.3; white-space: nowrap; padding-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dds-row-1, .dds-row-2 { animation: none; }
}
@media (max-width: 767px) {
    .dds-section { padding: 42px 0; }
    .dds-title { font-size: 22px; }
    .dds-name { font-size: 13.5px; }
}

.blp-card {
    height: 78px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blp-card:hover {
    transform: translateY(-4px);
    border-color: #3b82f6;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.15);
}
.blp-logo {
    max-height: 40px;
    max-width: 80%;
    object-fit: contain;
}

/* Counter numbers — converted from <h3> to <div> for SEO heading count; styling preserved */
.funfact .funfact-num { color: #3b82f6; font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 7px; }
@media (max-width: 767px) { .funfact .funfact-num { font-size: 25px; margin-bottom: 3px; } }

.gr2-section { padding: 40px 0; background: #f7f9fc; }
.gr2-card { display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
    background: #fff; border: 1px solid #e7ebf0; border-radius: 18px; padding: 26px 30px;
    box-shadow: 0 10px 30px rgba(14,27,43,.06); }
.gr2-logo { flex-shrink: 0; }
.gr2-score { text-align: center; flex-shrink: 0; }
.gr2-num { font-size: 38px; font-weight: 800; color: #0f1f3d; line-height: 1; }
.gr2-stars { color: #fbbc05; font-size: 15px; margin-top: 4px; }
.gr2-text { flex: 1; min-width: 200px; }
.gr2-text h3 { font-size: 19px; font-weight: 800; color: #0f1f3d; margin: 0 0 4px; }
.gr2-text p { font-size: 13.5px; color: #6b7280; margin: 0; }
.gr2-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gr2-btn { font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 9px;
    text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.gr2-btn:hover { transform: translateY(-2px); }
.gr2-btn-primary { background: #3b82f6; color: #fff; box-shadow: 0 8px 18px rgba(59,130,246,.32); }
.gr2-btn-ghost { background: #fff; color: #3b82f6; border: 1.5px solid #d6e4fd; }
@media (max-width: 767px) {
    .gr2-card { justify-content: center; text-align: center; padding: 22px; }
    .gr2-text { text-align: center; }
    .gr2-actions { width: 100%; justify-content: center; }
}

.tm2-section { padding: 32px 0; background: #ffffff; }
.tm2-head { text-align: center; margin: 0 auto 18px; }
.tm2-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #3b82f6; margin-bottom: 4px; }
.tm2-title { font-size: 18px; font-weight: 800; color: #0f1f3d; margin: 0; }
/* auto-scrolling marquee — pauses on hover */
.tm2-marquee { overflow: hidden; }
.tm2-track { display: flex; width: max-content; animation-name: tm2-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
.tm2-marquee:hover .tm2-track { animation-play-state: paused; }
@keyframes tm2-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm2-col { flex: 0 0 290px; max-width: 290px; margin-right: 14px; }
.tm2-card { height: 100%; background: #f7f9fc; border: 1px solid #e7ebf0; border-radius: 11px; padding: 15px 15px; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.tm2-card:hover { transform: translateY(-4px); border-color: #3b82f6; box-shadow: 0 10px 22px rgba(14,27,43,.1); }
.tm2-featured { background: #eef4ff; border-color: #c9dcf6; }
.tm2-stars { color: #f5a623; font-size: 10px; margin-bottom: 7px; }
.tm2-msg { font-size: 11.5px; color: #44505f; line-height: 1.55; margin: 0 0 11px; flex-grow: 1; }
.tm2-person { display: flex; align-items: center; gap: 8px; }
.tm2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tm2-avatar-letter { display: flex; align-items: center; justify-content: center; background: #3b82f6; color: #fff; font-weight: 800; font-size: 13px; }
.tm2-name { font-size: 12px; font-weight: 700; color: #0f1f3d; margin: 0; }
.tm2-role { font-size: 10px; color: #6b7280; }
@media (max-width: 767px) {
    .tm2-col { flex: 0 0 78vw; max-width: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
    .tm2-track { animation: none; }
    .tm2-marquee { overflow-x: auto; }
}

.cl2-section { padding: 46px 0; background: #f7f9fc; }
.cl2-head { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin: 0 0 26px; }
.cl2-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 38px; }
.cl2-item { display: inline-flex; align-items: center; }
.cl2-item img { height: 46px; max-width: 150px; object-fit: contain; filter: grayscale(100%); opacity: .65; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.cl2-item:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.06); }
@media (max-width: 767px) { .cl2-grid { gap: 16px 26px; } .cl2-item img { height: 36px; max-width: 110px; } }

.cert2-section { padding: 56px 0; background: #ffffff; }
.cert2-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 20px; }
.cert2-item { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #f7f9fc; border: 1px solid #e7ebf0; border-radius: 14px; padding: 22px 20px; width: 180px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cert2-item:hover { transform: translateY(-6px); border-color: #3b82f6; box-shadow: 0 14px 30px rgba(14,27,43,.1); }
.cert2-item img { height: 70px; max-width: 130px; object-fit: contain; }
.cert2-item span { font-size: 13px; font-weight: 600; color: #0f1f3d; text-align: center; line-height: 1.4; }
@media (max-width: 767px) { .cert2-section { padding: 42px 0; } .cert2-item { width: 44%; } }

.gvof { padding: 58px 0; background: #f7f9fc; }
.gvof-head { margin-bottom: 28px; }
.gvof-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #2563eb; margin-bottom: 10px; }
.gvof-title { font-size: 30px; font-weight: 800; color: #16213e; line-height: 1.22; margin: 0 0 10px; }
.gvof-sub { font-size: 14.5px; color: #5b6b80; line-height: 1.6; margin: 0; max-width: 640px; }
.gvof-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 22px; }
.gvof-photo, .gvof-map { position: relative; border-radius: 18px; overflow: hidden; min-height: 440px; box-shadow: 0 12px 30px rgba(15,31,61,.1); background: #e9eff7; }
.gvof-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gvof-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,31,61,.62) 0%, rgba(15,31,61,0) 32%, rgba(15,31,61,0) 70%, rgba(15,31,61,.45) 100%); }
.gvof-photo-title { position: absolute; top: 26px; left: 0; right: 0; z-index: 2; text-align: center; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.gvof-chip { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); color: #0f1f3d; font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; }
.gvof-chip svg { color: #2563eb; }
.gvof-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gvof-card { position: absolute; top: 16px; left: 16px; z-index: 2; width: 300px; max-width: calc(100% - 32px); background: #fff; border-radius: 16px; padding: 20px 18px; box-shadow: 0 16px 36px rgba(15,31,61,.18); }
.gvof-card h3 { font-size: 17px; font-weight: 700; color: #0f1f3d; margin: 0 0 12px; }
.gvof-from { display: flex; border: 1px solid #dfe6ef; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.gvof-from input { flex: 1; min-width: 0; border: none; outline: none; padding: 11px 14px; font-size: 13.5px; color: #0f1f3d; background: transparent; }
.gvof-from button { border: none; background: #2563eb; color: #fff; width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gvof-from button:hover { background: #1d4ed8; }
.gvof-addr { display: flex; gap: 9px; font-size: 12.8px; line-height: 1.55; color: #4b5a70; margin: 0 0 16px; }
.gvof-addr svg { flex-shrink: 0; margin-top: 2px; color: #2563eb; }
.gvof-btn { display: flex; font-family: inherit; cursor: pointer; border: 0; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #2563eb; color: #fff; font-weight: 700; font-size: 13.5px; padding: 11px 14px; border-radius: 10px; text-decoration: none; margin-bottom: 10px; transition: background .2s, transform .2s; }
.gvof-btn:hover { color: #fff; background: #1d4ed8; transform: translateY(-1px); }
.gvof-btn-ic { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; }
.gvof-btn-ghost { background: #fff; color: #2563eb; border: 1.5px solid #2563eb; margin-bottom: 0; }
.gvof-btn-ghost:hover { background: #f3f7ff; color: #1d4ed8; }
.gvof-btn-ghost .gvof-btn-ic { background: #2563eb; color: #fff; }
@media (max-width: 991px) {
    .gvof-grid { grid-template-columns: 1fr; }
    .gvof-photo { min-height: 300px; }
    .gvof-map { min-height: 0; display: flex; flex-direction: column; }
    .gvof-map iframe { position: relative; height: 300px; order: 2; }
    .gvof-card { position: relative; top: auto; left: auto; width: 100%; max-width: none; border-radius: 0; box-shadow: none; order: 1; }
}
@media (max-width: 767px) { .gvof-title { font-size: 23px; } .gvof-photo-title { font-size: 17px; } }

.blog2-section { padding: 56px 0; background: #f7f9fc; }
.blog2-head { text-align: center; margin: 0 auto 34px; }
.blog2-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #3b82f6; margin-bottom: 8px;
}
.blog2-title { font-size: 28px; font-weight: 800; color: #0f1f3d; margin: 0; }

/* Single horizontal scrolling row on all views */
.blog2-row {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 14px; margin-left: 0; margin-right: 0;
    scrollbar-width: thin; scrollbar-color: #c8d6ea transparent;
}
.blog2-row::-webkit-scrollbar { height: 7px; }
.blog2-row::-webkit-scrollbar-thumb { background: #c8d6ea; border-radius: 999px; }
.blog2-row::-webkit-scrollbar-track { background: transparent; }
.blog2-row > [class*="col-"] {
    flex: 0 0 358px; max-width: 358px; scroll-snap-align: start;
}

.blog2-card {
    height: 100%; background: #ffffff; border: 1px solid #e7ebf0;
    border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog2-card:hover {
    transform: translateY(-6px); border-color: #3b82f6;
    box-shadow: 0 16px 34px rgba(14, 27, 43, 0.12);
}
.blog2-img { display: block; overflow: hidden; }
.blog2-img img {
    width: 100%; height: 210px; object-fit: cover; display: block;
    transition: transform .45s ease;
}
/* branded placeholder when a post has no featured image */
.blog2-img-ph {
    display: flex; align-items: center; justify-content: center;
    height: 210px; background: linear-gradient(135deg, #eff4ff, #dbe8ff);
}
.blog2-img-ph img {
    width: auto; max-width: 55%; max-height: 84px; object-fit: contain;
}
.blog2-card:hover .blog2-img img { transform: scale(1.06); }
.blog2-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.blog2-date { font-size: 12.5px; color: #6b7280; margin-bottom: 8px; }
.blog2-date i { color: #3b82f6; margin-right: 5px; }
.blog2-card-title { font-size: 16.5px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.blog2-card-title a { color: #0f1f3d; text-decoration: none; }
.blog2-card-title a:hover { color: #3b82f6; }
.blog2-excerpt { font-size: 13.5px; color: #5b6573; line-height: 1.6; margin: 0 0 14px; flex-grow: 1; }
.blog2-link {
    font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: gap .25s ease;
}
.blog2-card:hover .blog2-link { gap: 11px; }

@media (max-width: 767px) {
    .blog2-section { padding: 42px 0; }
    .blog2-title { font-size: 22px; }
    /* Phone — single horizontal scrolling row instead of stacked cards */
    .blog2-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0;
        padding-bottom: 6px;
    }
    .blog2-row::-webkit-scrollbar { display: none; }
    .blog2-row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: center;
    }
    .blog2-img img { height: 180px; }
    .blog2-img-ph { height: 180px; }
}

.pk-section { padding: 70px 0; background: #f7fafd; }
.pk-section .section-title p { max-width: 620px; margin: 10px auto 0; color: #5b6b80; font-size: 15px; }

/* package type */
.pk-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 18px; }
.pk-tab {
    border: 1px solid #dbe6f3; background: #fff; color: #44546b;
    font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 999px;
    cursor: pointer; transition: all .18s ease;
}
.pk-tab:hover { border-color: #2563eb; color: #2563eb; }
.pk-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* monthly / yearly */
.pk-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.pk-tl { font-size: 14px; color: #7a8699; cursor: pointer; }
.pk-tl.on { color: #0f1f3d; font-weight: 600; }
.pk-sw { width: 46px; height: 25px; border-radius: 999px; background: #cbd8e8; border: 0; padding: 0; position: relative; cursor: pointer; transition: background .2s; }
.pk-sw.on { background: #2563eb; }
.pk-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .2s; }
.pk-sw.on .pk-knob { transform: translateX(21px); }
.pk-save { font-size: 12px; font-weight: 600; color: #16a34a; background: #e8f7ee; padding: 4px 10px; border-radius: 999px; }

/* desktop: 3 across */
/* A horizontal strip at every width. Three cards fit exactly; a fourth
   (or a longer industry list later) scrolls sideways instead of
   dropping onto a second row. */
.pk-row {
    --pk-gap: 22px;
    --pk-per-view: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--pk-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 2px 8px;
}
.pk-row::-webkit-scrollbar { display: none; }
.pk-card {
    flex: 0 0 calc((100% - (var(--pk-per-view) - 1) * var(--pk-gap)) / var(--pk-per-view));
    scroll-snap-align: start;
}

.pk-card {
    position: relative; background: #fff; border: 1.5px solid #e6edf6; border-radius: 16px;
    padding: 26px 22px 22px; display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(37,99,235,.12); }
.pk-card.hot { border-color: #2563eb; box-shadow: 0 14px 34px rgba(37,99,235,.16); }
.pk-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
    background: linear-gradient(90deg,#2563eb,#3b82f6); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.pk-name { font-size: 19px; font-weight: 700; color: #0f1f3d; margin: 0 0 3px; }
.pk-sub { font-size: 13px; color: #6b7a90; margin: 0 0 14px; min-height: 34px; }
.pk-price { display: flex; align-items: flex-start; gap: 2px; line-height: 1; }
.pk-cur { font-size: 20px; font-weight: 600; color: #0f1f3d; margin-top: 6px; }
.pk-amt { font-size: 36px; font-weight: 700; color: #0f1f3d; letter-spacing: -1px; }
.pk-per { font-size: 13px; color: #7a8699; align-self: flex-end; margin-bottom: 4px; }
.pk-alt { font-size: 12.5px; color: #7a8699; margin: 7px 0 0; }
.pk-ad { font-size: 12.5px; color: #16a34a; background: #e8f7ee; display: inline-block;
         padding: 4px 10px; border-radius: 6px; margin: 10px 0 0; }
.pk-feat { list-style: none; padding: 16px 0 0; margin: 14px 0 18px; border-top: 1px solid #eef3f9; flex-grow: 1; }
.pk-feat li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #44546b; margin-bottom: 9px; line-height: 1.5; }
.pk-feat svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; }
.pk-btn {
    display: block; text-align: center; padding: 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1.5px solid #2563eb; color: #2563eb; transition: all .18s ease;
}
.pk-btn:hover { background: #2563eb; color: #fff; }
.pk-btn.fill { background: #2563eb; color: #fff; }
.pk-btn.fill:hover { background: #1d4ed8; }
.pk-note { font-size: 12.5px; color: #7a8699; text-align: center; margin: 20px 0 0; }

/* narrower viewports show fewer cards at a time; the strip itself is
   unchanged, only how many fit */
@media (max-width: 991px) {
    .pk-row { --pk-per-view: 2; --pk-gap: 16px; }
}
@media (max-width: 767px) {
    .pk-section { padding: 46px 0; }
    .pk-row { --pk-gap: 14px; scroll-snap-type: x mandatory; }
    .pk-card { flex: 0 0 82%; scroll-snap-align: center; }
    .pk-tab { font-size: 13px; padding: 8px 14px; }
}

/* Viewport for the strip. Edges fade out so logos enter/leave softly.
   overflow-x:auto keeps it usable (manual swipe) if the animation is off. */
.dp-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* The track holds the logo list TWICE; shifting it by exactly -50%
   (= one full group) loops seamlessly. Gap lives on .dp-group, not
   here, so the two halves line up with no jump at the wrap point. */
.dp-track {
    display: flex;
    width: max-content;
    animation: dp-scroll 70s linear infinite;
    will-change: transform;
}
.dp-group {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    flex: 0 0 auto;
}
.digital-partner-logo {
    flex: 0 0 auto;
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .03);
    filter: grayscale(100%);
    transition: filter .3s;
}
.digital-partner-logo:hover { filter: grayscale(0%); }
.dp-marquee:hover .dp-track { animation-play-state: paused; }
@keyframes dp-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
    .dp-group { gap: 16px; padding-right: 16px; }
    .dp-track { animation-duration: 45s; }
    .dp-marquee .digital-partner-logo { height: 46px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .dp-marquee { overflow-x: auto; scrollbar-width: none; }
    .dp-marquee::-webkit-scrollbar { display: none; }
    .dp-track { animation: none; }
}

.cta2 { padding: 24px 0 28px; background: #ffffff; }
/* trim the empty space in the newsletter / free-trial section */
.free-trial-area { padding: 10px 0 36px; }
.free-trial-image img { max-height: 280px; width: auto; }
.free-trial-content { padding: 10px 0; }
.cta2-inner {
    background: linear-gradient(135deg, #3b82f6 0%, #1e5fd0 100%);
    border-radius: 22px;
    padding: 46px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    box-shadow: 0 24px 50px rgba(59, 130, 246, 0.28);
}
.cta2-text h2 { font-size: 26px; font-weight: 800; color: #ffffff; margin: 0 0 8px; }
.cta2-text p { font-size: 14.5px; color: rgba(255, 255, 255, 0.88); margin: 0; }
.cta2-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta2-btn {
    padding: 13px 26px; font-weight: 600; font-size: 14px;
    border-radius: 9px; text-decoration: none; display: inline-block;
}
.cta2 .cta2-btn.btn-primary {
    background: #ffffff !important; color: #1e5fd0 !important; border-color: #ffffff !important;
}
.cta2-btn-wa { background: #25D366; color: #fff; border: 1px solid #25D366; }
.cta2-btn-wa:hover { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }
@media (max-width: 767px) {
    .cta2-inner { padding: 30px 22px; }
    .cta2-text h2 { font-size: 20px; }
}