/* Source code is the property of GitBusiness.com
   As of Dec. 2nd, 2020  Stan Switaj - Owner/CEO of GitBusiness.com
   Copyright 2020, All Rights Reserved
   Programmers:
               Stan Switaj - CEO/Lead Programmer

   Loaded last, after custom.css / responsive.css / developer.css, so these
   rules win. Mobile first: the base rules are the phone layout, and the wider
   layouts are added at min-width breakpoints.
*/

:root {
    --gb-navy:        #0a1033;
    --gb-navy-deep:   #060a22;
    --gb-blue:        #2563eb;
    --gb-blue-light:  #3b82f6;
    --gb-cyan:        #22d3ee;
    --gb-violet:      #7c3aed;
    --gb-gold:        #f5b301;
    --gb-ink:         #0f172a;
    --gb-body:        #475569;
    --gb-muted:       #64748b;
    --gb-line:        #e2e8f0;
    --gb-surface:     #ffffff;
    --gb-surface-alt: #f6f8fc;

    --gb-radius:      16px;
    --gb-radius-lg:   22px;
    --gb-shadow:      0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
    --gb-shadow-lg:   0 24px 60px rgba(10,16,51,.18);
    --gb-header-h:    68px;
}

/* ------------------------------------------------------------------ base */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--gb-surface);
    color: var(--gb-body);
    font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

/* Anchors sit under the sticky header without the heading hiding beneath it. */
#about, #howitworks, #pricing, #contact, #testimonial, #whybitbusiness, #offer {
    scroll-margin-top: calc(var(--gb-header-h) + 12px);
}

h1, h2, h3, h4, h5 {
    color: var(--gb-ink);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

img { max-width: 100%; height: auto; }

/* Nothing may push the page sideways on a phone. */
section, .container, .row { max-width: 100%; }
.container { padding-left: 20px; padding-right: 20px; }

@media (min-width: 1200px) {
    .container { max-width: 1200px; }
}

/* --------------------------------------------------------------- header */

/* Glass bar. Fixed rather than sticky so the hero runs underneath it and shows
   through -- sticky reserves its own height and the effect is lost. At the top
   of the page it is fully transparent over the hero; once scrolled it frosts to
   navy (see body.gb-scrolled below).

   Dark rather than light on purpose: logo.png is a white wordmark on
   transparency, which is why the original markup wrapped it in an explicit
   background-color:black. A white glass bar would erase it. */
.header_outer {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    text-align: left !important;
    transition: background-color .28s ease, border-color .28s ease,
                box-shadow .28s ease, backdrop-filter .28s ease;
}

body.gb-scrolled .header_outer,
body.gb-nav-open .header_outer {
    background: rgba(10,16,51,.72);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: rgba(255,255,255,.14);
    box-shadow: 0 8px 30px rgba(6,10,34,.28);
}

.header_outer .nav_holder,
.header_outer .container,
.header_outer .hddr_inr { width: 100%; }

.header_outer .hddr_inr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--gb-header-h);
}

/* The old markup fixed the menu at 775x50 with absolutely positioned children.
   Everything below unwinds that so the bar can size itself. */
.header_outer .hdr-rgt-part,
.header_outer #menu1,
.header_outer .hdr_menu {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    background: none !important;
    border: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
}

/* logo.png is a white wordmark on transparency, so it needs something dark
   behind it -- the original markup did this with a flat background-color:black.
   Same idea, softened into a rounded plate that suits the glass bar. */
.header_outer .logo {
    flex: 0 0 auto;
    line-height: 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .28s ease;
}

body.gb-scrolled .header_outer .logo { background: rgba(0,0,0,.42) !important; }

.header_outer .logo a { display: block; line-height: 0; }

.header_outer .logo img { height: 30px; width: auto; display: block; }

@media (min-width: 992px) {
    .header_outer .logo img { height: 34px; }
}

/* ------------------------------------------------------- nav link lists */

.header_outer .hdr_menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header_outer .hdr_menu ul li { margin: 0; }

.header_outer .hdr_menu ul li a {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 10px;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px;
    /* custom.css forces uppercase on every nav link. */
    text-transform: none !important;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
    transition: background-color .18s ease, color .18s ease;
}

.header_outer .hdr_menu ul li a:hover,
.header_outer .hdr_menu ul li.active > a {
    background: rgba(255,255,255,.16);
    color: #ffffff !important;
}

/* The two call-to-action links carry inline colours in the page source, so
   these have to be forceful to restyle them. */
.header_outer .hdr_menu ul li a.customer,
.header_outer .hdr_menu ul li a#admin,
.header_outer .hdr_menu ul li a#logout {
    background: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,.42);
    margin-left: 6px;
}

.header_outer .hdr_menu ul li a.customer:hover,
.header_outer .hdr_menu ul li a#admin:hover,
.header_outer .hdr_menu ul li a#logout:hover {
    background: rgba(255,255,255,.2) !important;
    border-color: rgba(255,255,255,.7);
}

/* The last CTA (Login, or Logout when signed in) is the solid one. */
.header_outer .hdr_menu ul li:last-child a.customer,
.header_outer .hdr_menu ul li:last-child a#logout {
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet)) !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(37,99,235,.28);
}

.header_outer .hdr_menu ul li:last-child a.customer:hover,
.header_outer .hdr_menu ul li:last-child a#logout:hover {
    filter: brightness(1.07);
    color: #fff !important;
}

/* ------------------------------------------------------ hamburger button */

/* responsive.css pins this with position:absolute; right:10px; top:50% and a
   translateY, which fights the flex row. Put it back in the flow. */
.header_outer .menu_trigger {
    display: block;
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    order: 3;
}

.header_outer .menu_trigger .menu_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 12px;
    background: rgba(255,255,255,.1);
}

.header_outer .menu_trigger .menu_btn span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform .25s ease, opacity .2s ease;
}

body.gb-nav-open .header_outer .menu_trigger .menu_btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.gb-nav-open .header_outer .menu_trigger .menu_btn span:nth-child(2) {
    opacity: 0;
}
body.gb-nav-open .header_outer .menu_trigger .menu_btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------- mobile menu behaviour */

@media (max-width: 991px) {

    .header_outer .hdr-rgt-part {
        position: fixed !important;
        top: var(--gb-header-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--gb-header-h));
        overflow-y: auto;
        background: rgba(10,16,51,.94);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid rgba(255,255,255,.14);
        box-shadow: var(--gb-shadow-lg);
        padding: 10px 18px 22px !important;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    body.gb-nav-open .header_outer .hdr-rgt-part {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .header_outer .hdr_menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .header_outer .hdr_menu ul li a {
        width: 100%;
        justify-content: flex-start;
        padding: 14px 14px;
        font-size: 16.5px;
        border-radius: 12px;
    }

    .header_outer .hdr_menu ul li a.customer,
    .header_outer .hdr_menu ul li a#admin,
    .header_outer .hdr_menu ul li a#logout {
        justify-content: center;
        margin: 8px 0 0;
        padding: 15px 14px;
    }
}

@media (min-width: 992px) {
    .header_outer .menu_trigger { display: none !important; }
    .header_outer .hdr-rgt-part {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* ----------------------------------------------------------------- hero */

/* The tint is deliberately lighter than a normal hero overlay so the server
   room photograph reads through it. It stays darkest at the top left, which is
   where the fixed glass header sits -- the white wordmark and nav links need
   something dark behind them. */
.hero-slider-main {
    position: relative;
    background:
        linear-gradient(135deg, rgba(6,10,34,.58) 0%, rgba(10,16,51,.34) 45%, rgba(37,99,235,.26) 100%),
        url('../images/hero-img-01.jpg') center/cover no-repeat;
    color: #fff;
    text-align: left;
    overflow: hidden;
}

/* The header is fixed, so the hero carries its height as top padding -- that is
   what lets the hero artwork run up behind the glass bar. */
.gb-hero-inner {
    position: relative;
    z-index: 2;
    padding: calc(var(--gb-header-h) + 56px) 0 72px;
    max-width: 760px;
}

/* Frosted white panel over the photograph -- the modern form of the original
   #opaque box, which was a flat white div at 0.5 opacity with a fixed 365px
   height. Being real glass it blurs what is behind it, so the text sits on an
   even field however busy that part of the photo is. */
/* Near-clear glass: the pane itself is barely tinted so the server room reads
   straight through it. Legibility does not come from the tint here -- it comes
   from ::after, a soft dark pool that sits directly behind the copy and fades
   out before the panel edge. Contrast where the text is, transparency
   everywhere else. */
.gb-hero-glass {
    position: relative;
    isolation: isolate;
    padding: 34px 28px 36px;
    border-radius: var(--gb-radius-lg);
    background: rgba(255,255,255,.09);
    -webkit-backdrop-filter: saturate(135%) blur(7px);
    backdrop-filter: saturate(135%) blur(7px);
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: 0 28px 70px rgba(6,10,34,.42),
                inset 0 1px 0 rgba(255,255,255,.5);
    overflow: hidden;
}

/* The contrast pool. Anchored to the top left, where the copy starts, and
   dissolved well before the far edge so the glass still reads as glass.
   White, so black type reads on it -- the dark version of this pool worked
   just as well but made the hero feel heavier than the rest of the page. */
.gb-hero-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 130% at 8% 20%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.74) 34%,
                                             rgba(255,255,255,.34) 62%, rgba(255,255,255,0) 84%);
}


/* Black type on the white pool. No per-line plates -- the contrast is in the
   background, which is the whole point of the pool. The faint white text-shadow
   is a halo, not a drop shadow: it keeps the letters separated from the
   photograph where the pool has thinned out. */
.gb-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(37,99,235,.3);
    border-radius: 999px;
    background: rgba(37,99,235,.12);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(255,255,255,.7);
    box-shadow: none;
}

.gb-hero-eyebrow i { color: var(--gb-blue); }

.hero-slider-main h1.gb-hero-title {
    display: block;
    padding: 0;
    margin: 0 0 14px;
    background: none;
    color: #000000;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 10px rgba(255,255,255,.65);
    box-shadow: none;
}

.gb-hero-sub {
    display: block;
    padding: 0;
    margin: 0 0 26px;
    background: none;
    color: #111827;
    font-size: 16.5px;
    line-height: 1.65;
    max-width: 46ch;
    text-shadow: 0 1px 8px rgba(255,255,255,.7);
    box-shadow: none;
}

.gb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.gb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.gb-btn:hover { transform: translateY(-2px); text-decoration: none; }

/* Solid, like the text plates around them -- a translucent button next to
   opaque white copy looked like it had been missed. Colour carries the
   hierarchy instead: filled blue leads, white follows. */
.gb-btn-primary {
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(37,99,235,.4);
}
.gb-btn-primary:hover { filter: brightness(1.08); color: #fff !important; }

.gb-btn-ghost {
    background: #ffffff;
    color: #000000 !important;
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(6,10,34,.28);
}
.gb-btn-ghost:hover { background: #eef2ff; color: #000000 !important; }

.gb-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Light glass chips -- they sit near the bottom of the panel where the pool has
   faded, so they carry a little tint of their own rather than relying on it. */
.gb-hero-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #0b1020;
    font-size: 13.5px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.gb-hero-points li i { color: var(--gb-blue); }

@media (min-width: 768px) {
    .gb-hero-inner { padding: calc(var(--gb-header-h) + 84px) 0 100px; }
    .gb-hero-glass { padding: 42px 44px 44px; }
    .hero-slider-main h1.gb-hero-title { font-size: 44px; }
    .gb-hero-sub { font-size: 18px; }
}

@media (min-width: 1200px) {
    .gb-hero-inner { padding: calc(var(--gb-header-h) + 110px) 0 126px; }
    .gb-hero-glass { padding: 52px 54px 54px; }
    .hero-slider-main h1.gb-hero-title { font-size: 52px; }
}

/* backdrop-filter is unsupported on some older mobile browsers, so the pane
   loses its blur and the photograph shows through sharply. The copy end of the
   gradient is pushed nearer opaque there so black type still holds; the far end
   still fades out, so it reads as glass either way. */
/* Without backdrop-filter the pane loses its blur, but the copy never depended
   on it -- the ::after pool is an ordinary gradient and renders everywhere.
   Thicken the pool slightly to make up for the missing blur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .gb-hero-glass::after {
        background:
            radial-gradient(120% 130% at 8% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 34%,
                                                 rgba(255,255,255,.4) 62%, rgba(255,255,255,0) 84%);
    }
    .gb-hero-points li { background: rgba(255,255,255,.8); }
}

/* -------------------------------------------------------------- sections */

section { padding: 56px 0; }

@media (min-width: 768px) { section { padding: 78px 0; } }

.aboutsection, .pricing-sec { background: var(--gb-surface); }
.twocolumn-sec, .testimonial-sec { background: var(--gb-surface-alt); }

.section-heading { margin-bottom: 34px; text-align: center; }

.section-heading span {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--gb-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-heading h2 {
    font-size: 27px;
    margin-bottom: 14px;
}

.section-heading p { color: var(--gb-muted); font-size: 16.5px; margin: 0 auto; max-width: 62ch; }

.section-heading .gb-icon { margin: 0 auto 14px; }
.section-heading .gb-icon img { height: 46px; width: auto; }

@media (min-width: 768px) {
    .section-heading h2 { font-size: 36px; }
}

/* -------------------------------------------------------------- pricing */

.pricing-sec .row { align-items: stretch; }

.pricing-sec .col-lg-4,
.pricing-sec .col-lg-3 {
    display: flex;
    margin-bottom: 26px;
    /* A flex item defaults to min-width:auto, which lets a long word push the
       card wider than its column and get cut off at the container edge. */
    min-width: 0;
}

.price-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 0 0 26px;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-lg);
    box-shadow: var(--gb-shadow);
    /* Not overflow:hidden -- that clipped the top of the price header and the
       corner of the badge. The header rounds its own top corners instead. */
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gb-shadow-lg);
    border-color: rgba(37,99,235,.4);
}

.price-card-hdr {
    padding: 30px 20px 26px;
    background: linear-gradient(135deg, var(--gb-navy) 0%, #1e3a8a 100%);
    color: #fff;
    text-align: center;
    /* Rounds with the card now that the card no longer clips its children. */
    border-radius: var(--gb-radius-lg) var(--gb-radius-lg) 0 0;
}

.price-card-hdr-1 { background: linear-gradient(135deg, #334155 0%, #64748b 100%); }
.price-card-hdr-2 { background: linear-gradient(135deg, #4c1d95 0%, var(--gb-violet) 100%); }
.price-card-hdr-3 { background: linear-gradient(135deg, #a16207 0%, var(--gb-gold) 100%); }
.price-card-hdr-4 { background: linear-gradient(135deg, var(--gb-blue) 0%, var(--gb-cyan) 100%); }

.price-card-hdr h3 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
    overflow-wrap: break-word;
}

.price-card-hdr h3 span {
    display: block;
    font-size: 38px;
    font-weight: 800;
    /* 1.05 cropped the tops of the digits and the dollar sign. */
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

/* Four across only has room for a smaller number on mid-size screens. */
@media (min-width: 992px) and (max-width: 1199px) {
    .price-card-hdr h3 span { font-size: 32px; }
    .price-card-hdr { padding: 26px 14px 22px; }
    .price-card .package-listing { padding: 0 18px 0 36px; }
    .pricing-btn-block { padding: 0 16px; }
}

.price-card .cardtype {
    display: block;
    padding: 15px 24px 6px;
    color: var(--gb-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-align: center;
}

.price-card .package-listing {
    flex: 1 1 auto;
    margin: 10px 0 22px;
    padding: 0 26px 0 44px;
}

.price-card .package-listing li {
    margin-bottom: 11px;
    color: var(--gb-body);
    font-size: 15px;
    line-height: 1.6;
}

.price-card .package-listing .fa-li { color: var(--gb-blue); }

.pricing-btn-block { padding: 0 24px; margin-top: auto; text-align: center; }

.price-card a.pricing-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff !important;
    font-weight: 700;
    font-size: 15.5px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37,99,235,.26);
    transition: filter .16s ease, transform .16s ease;
}

.price-card a.pricing-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* The tier we want to draw the eye to. */
.price-card.gb-featured {
    border-color: var(--gb-blue);
    box-shadow: 0 20px 48px rgba(37,99,235,.2);
}

.gb-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gb-gold);
    color: #201400;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.price-card { position: relative; }

/* ------------------------------------------------------------- security */

.gb-security-sec {
    position: relative;
    background:
        radial-gradient(820px 380px at 8% 0%, rgba(37,99,235,.12), transparent 60%),
        radial-gradient(760px 360px at 94% 100%, rgba(124,58,237,.12), transparent 58%),
        var(--gb-surface);
}

/* One rounded panel holding the whole section: heading, the four points and
   the closing note. A gradient hairline edge rather than a flat border, so it
   reads as a single deliberate block against the page. */
.gb-security-panel {
    position: relative;
    padding: 34px 22px 32px;
    border-radius: 26px;
    background: var(--gb-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 26px 60px rgba(10,16,51,.12);
}

/* The border is drawn as a gradient ring: a 1px inset backdrop the panel sits
   on top of, which a plain `border` cannot do in a single colour. */
.gb-security-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    /* no negative z-index: that would put the ring behind the panel's own
       background, where nothing of it would ever be visible */
    pointer-events: none;
    padding: 1px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(37,99,235,.55), rgba(124,58,237,.4) 45%, rgba(34,211,238,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
}

/* Browsers without mask-composite still get a visible edge rather than none. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .gb-security-panel { border: 1px solid rgba(37,99,235,.35); }
    .gb-security-panel::before { display: none; }
}

@media (min-width: 768px) {
    .gb-security-panel { padding: 46px 44px 42px; }
}

@media (min-width: 1100px) {
    .gb-security-panel { padding: 54px 54px 48px; }
}

.gb-security-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 6px;
}

@media (min-width: 620px) {
    .gb-security-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
    .gb-security-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Tinted rather than white: these sit inside a white panel now, so a white
   card on white would only be its border. */
.gb-security-card {
    padding: 26px 22px 24px;
    background: var(--gb-surface-alt);
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-lg);
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.gb-security-card:hover {
    border-color: rgba(37,99,235,.4);
    background: var(--gb-surface);
    transform: translateY(-3px);
}

.gb-security-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff;
    font-size: 19px;
}

.gb-security-card h3 {
    margin: 0 0 8px;
    color: var(--gb-ink);
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gb-security-card p {
    margin: 0;
    color: var(--gb-body);
    font-size: 14.5px;
    line-height: 1.65;
}

.gb-security-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 62ch;
    margin: 30px auto 0;
    padding: 15px 18px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius);
    background: var(--gb-surface-alt);
    color: var(--gb-body);
    font-size: 14.5px;
    line-height: 1.6;
}

.gb-security-note i { margin-top: 3px; color: var(--gb-blue); }
.gb-security-note strong { color: var(--gb-ink); }

/* --------------------------------------------------------- testimonials */

.testimonial-sec {
    position: relative;
    background:
        radial-gradient(900px 420px at 12% 8%, rgba(37,99,235,.1), transparent 62%),
        radial-gradient(760px 400px at 92% 92%, rgba(124,58,237,.1), transparent 60%),
        var(--gb-surface-alt);
}

/* custom.css pins a large decorative quote graphic at right:0; top:-90px on
   .testimonial-sec-outer -- the double quotes that sat above the top right of
   the carousel. */
section.testimonial-sec .testimonial-sec-outer:before { display: none !important; content: none !important; }

/* custom.css gives this panel `background:#fff` and nothing else, so the
   heading and the carousel both sat hard against its edges. */
.testimonial-sec-outer {
    padding: 30px 22px 34px;
    border-radius: var(--gb-radius-lg);
    box-shadow: none;
}

@media (min-width: 992px) {
    .testimonial-sec-outer { padding: 46px 40px 48px; }
}

.gb-testimonial-heading { text-align: left; margin-bottom: 26px; }
.gb-testimonial-heading p { margin: 0; max-width: 34ch; }

/* Keeps the heading column off the carousel beside it. */
@media (min-width: 992px) {
    .gb-testimonial-heading { padding-right: 26px; margin-bottom: 0; }
}

@media (max-width: 991px) {
    .gb-testimonial-heading { text-align: center; }
    .gb-testimonial-heading p { margin: 0 auto; }
}

/* The template gave the quote and the portrait each a bootstrap column, so the
   photo sat in a wide empty gutter. A card with the attribution beneath the
   quote holds together at any width. */
/* Flat: outlined rather than raised. The card sits on a white panel, so a drop
   shadow only muddies the edge it shares with it. */
.gb-quote-card {
    position: relative;
    margin: 0 10px 6px;
    padding: 34px 28px 28px;
    background: var(--gb-surface);
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-lg);
    box-shadow: none;
    transition: border-color .2s ease;
}

.gb-quote-card:hover {
    border-color: rgba(37,99,235,.32);
}

/* custom.css sets `.testimonial-item { color: #fff }` for the original design,
   which is white text on what is now a white card. */
.testimonial-item.gb-quote-card { color: var(--gb-ink); }

.gb-quote-text {
    position: relative;
    margin: 14px 0 24px;
    padding: 0;
    border: 0;
    color: var(--gb-ink);
    font-size: 16.5px;
    font-style: normal;
    line-height: 1.72;
    quotes: none;
}

/* The template's own quote-mark graphics. They were written for `.testimonial-item p`
   and this quote is a <blockquote>, so they had stopped appearing. */
.gb-quote-text::before,
.gb-quote-text::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    opacity: .9;
}

.gb-quote-text::before {
    background-image: url(../images/testimonial-txt-element-01.png);
    left: -6px;
    top: -16px;
}

.gb-quote-text::after {
    background-image: url(../images/testimonial-txt-element-02.png);
    right: -4px;
    bottom: -18px;
}

.gb-quote-text a { color: var(--gb-blue); font-weight: 600; }

.gb-quote-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--gb-line);
}

/* Gradient ring around the portrait: a padded gradient background with the
   image inset inside it, so it works for a photograph and for the SVG alike.

   Scoped through .testimonial-item so it outweighs custom.css's
   `.testimonial-item span { padding-top: 20px; display: block; }` -- that rule
   is (0,1,1) against a bare `.gb-avatar` at (0,1,0), so it won that fight
   whatever the load order, and 20px of padding on one side only turned the
   ring into an egg with the photo shoved to the bottom of it. */
/* The ring is pinned square from every direction rather than by width/height
   alone. In a flex row a single stated size is not enough -- the box can still
   be pulled out of shape by an inherited padding, a stretching parent or a
   shrink factor, which is what left these as ovals. min/max on both axes plus
   aspect-ratio means nothing upstream can distort it. */
.testimonial-item .gb-avatar,
.gb-avatar {
    flex: 0 0 62px;
    display: block;
    box-sizing: border-box;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px;
    max-width: 62px;
    min-height: 62px;
    max-height: 62px;
    aspect-ratio: 1 / 1;
    padding: 3px !important;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    box-shadow: none;
    text-align: left;
    overflow: hidden;
}

/* custom.css carries `img, figure { max-width:100%; max-height:100% }` and
   `.slick-slider img { width:100% }`, and this image sits inside a
   .slick-slider, so the photo needs its own size stated unambiguously. */
.testimonial-item .gb-avatar img,
.gb-avatar img {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;      /* crops rather than squashes a non-square photo */
    object-position: center;
    background: #fff;
    border: 2px solid #fff;
}

.gb-avatar-invite img { border-color: transparent; }

/* Same override reason as .gb-avatar above -- these are spans inside
   .testimonial-item, so they inherit its padding-top:20px. */
.testimonial-item .gb-author-meta,
.gb-author-meta { display: flex; flex-direction: column; min-width: 0; padding-top: 0 !important; }

.testimonial-item .gb-author-name,
.gb-author-name {
    padding-top: 0 !important;
    color: var(--gb-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-align: left;
}

.testimonial-item .gb-author-role,
.gb-author-role {
    padding-top: 0 !important;
    color: var(--gb-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
}

/* The open slot is visibly an invitation, not a second endorsement. */
.gb-quote-card-invite {
    border-style: dashed;
    border-color: rgba(37,99,235,.42);
    background: linear-gradient(180deg, rgba(37,99,235,.05), var(--gb-surface) 60%);
}

/* ---- carousel controls ---- */

.testimonial-slider .slick-list { padding-bottom: 6px; }

/* Showing two slides at once, slick sizes each to its own content, so a short
   quote leaves a card visibly stunted beside a long one. Stretching the track
   makes both cards the height of the taller. */
.testimonial-slider .slick-track { display: flex; align-items: stretch; }
.testimonial-slider .slick-slide { height: auto; float: none; }
.testimonial-slider .slick-slide > div { height: 100%; }
.testimonial-slider .slick-slide .item { height: 100%; }
.testimonial-slider .gb-quote-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* pushes the attribution to the bottom of whichever card is shorter */
.testimonial-slider .gb-quote-author { margin-top: auto; }

.testimonial-slider .slick-prev,
.testimonial-slider .slick-next {
    width: 42px;
    height: 42px;
    z-index: 5;
    border-radius: 50%;
    background: var(--gb-surface) !important;
    border: 1px solid var(--gb-line);
    box-shadow: none;
    transition: border-color .16s ease, transform .16s ease;
}

.testimonial-slider .slick-prev { left: -14px; }
.testimonial-slider .slick-next { right: -14px; }

.testimonial-slider .slick-prev:hover,
.testimonial-slider .slick-next:hover {
    background: var(--gb-surface) !important;
    border-color: var(--gb-blue);
    transform: translateY(-50%) scale(1.06);
}

.testimonial-slider .slick-prev:before,
.testimonial-slider .slick-next:before {
    color: var(--gb-blue);
    font-size: 19px;
    line-height: 1;
    opacity: 1;
}

/* A disabled arrow stays visible but reads as unavailable rather than vanishing
   and shifting the layout. */
.testimonial-slider .slick-prev.slick-disabled,
.testimonial-slider .slick-next.slick-disabled { opacity: .4; cursor: default; }

.testimonial-slider .slick-prev.slick-disabled:hover,
.testimonial-slider .slick-next.slick-disabled:hover {
    border-color: var(--gb-line);
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .gb-quote-card { margin: 0 4px 6px; padding: 26px 20px 22px; }
    .gb-quote-text { font-size: 15.5px; }
    /* Arrows are the only control now that the dots are gone, so they stay
       on at every size -- just tucked in tighter on a narrow card. */
    .testimonial-slider .slick-prev { left: -6px; }
    .testimonial-slider .slick-next { right: -6px; }
    .testimonial-slider .slick-prev,
    .testimonial-slider .slick-next { width: 36px; height: 36px; }
}

/* ------------------------------------------------------ generic buttons */

a.slider-btn, a.c2a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.26);
}

a.slider-btn:hover, a.c2a-btn:hover { filter: brightness(1.08); border: 0 !important; }

/* ----------------------------------------------------- back-to-top button */

#myBtn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(37,99,235,.36);
    cursor: pointer;
}

#myBtn:hover { filter: brightness(1.1); }

/* --------------------------------------------------------------- forms */

.contact-sec input[type="text"],
.contact-sec input[type="email"],
.contact-sec input[type="tel"],
.contact-sec textarea,
.contact-sec select {
    width: 100%;
    max-width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--gb-ink);
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
    transition: border-color .16s ease, box-shadow .16s ease;
}

.contact-sec input:focus,
.contact-sec textarea:focus,
.contact-sec select:focus {
    outline: none;
    border-color: var(--gb-blue);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* --------------------------------------------------------------- footer */

.footer-menu-item {
    color: rgba(255,255,255,.78) !important;
    text-decoration: none;
    transition: color .16s ease;
}

.footer-menu-item:hover { color: #fff !important; }

/* ------------------------------------------------- accessibility / motion */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(37,99,235,.5);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}