/* ForDo IT header: one consistent floating bar (same look at top and when scrolled).
   Overrides the theme's translucent / navy header. Markup and scroll JS are unchanged. */
#vl-header-sticky {
    --fd-teal-dark: #065a51;
    --fd-amber: #f59e0b;
    --fd-ink: #050c36;
}

/* Inner-page hero (About, Services, POS, Portfolio, Contact): all copy the About page hero.
   Height: 550px (About's). Title: 60px / 600 / 1.2, sentence case, white (About's h1 style).
   Pages whose title is long get .fd-page-hero--wide so it fits on two lines instead of growing the hero. */
.fd-inner .fd-page-hero .vl-breadcrumb h1 {
    font-size: 60px;
    font-weight: 600 !important;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: normal;
}

@media (min-width: 992px) {
    .fd-page-hero {
        min-height: 550px;
    }
}

@media (min-width: 1200px) {
    .fd-page-hero--wide .row > .col-xl-6:first-child {
        flex: 0 0 auto;
        width: 75%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
    .fd-inner .fd-page-hero .vl-breadcrumb h1 {
        font-size: 32px;
    }
}

/* Scrolled state: the theme paints the whole strip navy; keep it transparent instead */
#vl-header-sticky.header-sticky {
    background: transparent;
}

#vl-header-sticky .vl-header-bg-4 {
    margin-top: 16px;
    padding: 10px 24px;
    border-radius: 14px;
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 6px 24px rgba(5, 12, 54, 0.14);
    transition: margin-top 0.25s ease, box-shadow 0.25s ease;
}

#vl-header-sticky.header-sticky .vl-header-bg-4 {
    margin-top: 10px;
    padding: 8px 24px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(5, 12, 54, 0.22);
}

@media (max-width: 991px) {
    #vl-header-sticky .vl-header-bg-4,
    #vl-header-sticky.header-sticky .vl-header-bg-4 {
        padding: 8px 16px;
    }
}

@media (max-width: 575px) {
    #vl-header-sticky .vl-header-bg-4,
    #vl-header-sticky.header-sticky .vl-header-bg-4 {
        margin-top: 8px;
        padding: 8px 14px;
    }
}

/* Logo */
#vl-header-sticky .vl-logo img {
    display: block;
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
}

/* Menu */
#vl-header-sticky .vl-main-menu ul {
    white-space: nowrap;
}

#vl-header-sticky .vl-main-menu ul > li {
    margin-right: 0;
}

#vl-header-sticky .vl-main-menu ul > li > a {
    padding: 14px 4px;
    margin: 0 8px;
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--fd-ink);
}

#vl-header-sticky .vl-main-menu ul > li > a::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--fd-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

#vl-header-sticky .vl-main-menu ul > li > a:hover,
#vl-header-sticky .vl-main-menu ul > li > a:focus-visible {
    color: var(--fd-teal-dark);
}

#vl-header-sticky .vl-main-menu ul > li > a:hover::after,
#vl-header-sticky .vl-main-menu ul > li > a:focus-visible::after {
    transform: scaleX(1);
}

#vl-header-sticky a:focus-visible,
#vl-header-sticky .vl-offcanvas-toggle:focus-visible {
    outline: 2px solid var(--fd-teal-dark);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Get Started button: amber pill, same as the CTA band */
#vl-header-sticky .theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 22px;
    border-radius: 50px;
    background: var(--fd-amber);
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--fd-teal-dark);
}

#vl-header-sticky .theme-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    line-height: 1;
    background: var(--fd-teal-dark);
}

/* The theme's .vl-herobtn:hover .theme-btn clips the background to the text and makes
   it transparent, which hid the label on hover. Keep the label visible. */
#vl-header-sticky .vl-herobtn .theme-btn,
#vl-header-sticky .vl-herobtn:hover .theme-btn,
#vl-header-sticky .theme-btn:hover {
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

#vl-header-sticky .vl-herobtn:hover .theme-btn,
#vl-header-sticky .theme-btn:hover {
    background-color: var(--fd-teal-dark);
    color: #fff;
}

#vl-header-sticky .theme-btn:hover span {
    background: var(--fd-amber);
}

/* One timing for every part of the button, so the pill, label, circle and arrow
   all change together on hover (the theme mixes 0.3s rules on each of them). */
#vl-header-sticky .theme-btn,
#vl-header-sticky .vl-herobtn:hover .theme-btn,
#vl-header-sticky .theme-btn span,
#vl-header-sticky .theme-btn span i {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Mobile menu button */
#vl-header-sticky .vl-offcanvas-toggle {
    color: var(--fd-ink);
    background: none;
    border: 0;
    padding: 8px;
}

/* Skip link: off-screen until a keyboard user tabs to it. */
.fd-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--fd-ink, #12201d);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.fd-skip-link:focus,
.fd-skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

#main-content:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    #vl-header-sticky .vl-header-bg-4,
    #vl-header-sticky .vl-main-menu ul > li > a::after,
    #vl-header-sticky .theme-btn,
    #vl-header-sticky .theme-btn span,
    #vl-header-sticky .theme-btn span i {
        transition: none;
    }
}

/* Desktop layout: logo and button take only the space they need, the menu gets the rest,
   so seven links fit on one line without crowding the logo or the button. */
@media (min-width: 992px) {
    #vl-header-sticky .vl-header-bg-4 > .row {
        flex-wrap: nowrap;
        gap: 12px;
    }

    #vl-header-sticky .vl-header-bg-4 > .row > [class*="col-"] {
        width: auto;
        max-width: none;
    }

    #vl-header-sticky .vl-header-bg-4 > .row > :first-child,
    #vl-header-sticky .vl-header-bg-4 > .row > :last-child {
        flex: 0 0 auto;
    }

    #vl-header-sticky .vl-header-bg-4 > .row > .col-lg-6 {
        flex: 1 1 auto;
        min-width: 0;
    }

    #vl-header-sticky .vl-main-menu ul > li > a {
        margin: 0 clamp(3px, 0.55vw, 9px);
        font-size: clamp(15px, 1.15vw, 17px);
    }
}