/* =====================================================================
   Clean Sky — site-wide custom overrides
   Loaded after style.css / responsive.css / demos/hosting/hosting.css
   so these rules win the cascade without needing !important everywhere.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Accent color — single source of truth. demos/hosting/hosting.css
      (loaded earlier) also defines --base-color, and would silently win
      over style.css's value since it loads later than style.css. This
      file loads last of all, so redeclaring it here guarantees this is
      the only place that needs to change for future accent-color updates.
   ------------------------------------------------------------------- */
:root{
    --base-color:#7FB5FF;
}

/* ---------------------------------------------------------------------
   1) Smooth scrolling for on-page anchors (e.g. "Onze oplossing")
   ------------------------------------------------------------------- */
:root{
    scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
    :root{scroll-behavior:auto;}
}
#oplossing{
    scroll-margin-top:90px;
}

/* ---------------------------------------------------------------------
   2) Mobile hero: full-screen, spacious, CTA buttons pinned near bottom
   ------------------------------------------------------------------- */
@media(max-width:767px){
    #home .row.h-100{
        align-items:stretch !important;
    }
    #home .col-xl-8.col-lg-9.col-md-12{
        display:flex !important;
        flex-direction:column;
        justify-content:flex-end;
        height:100%;
        padding-bottom:28px;
    }
}

/* ---------------------------------------------------------------------
   3) Mobile: critical-infrastructure examples shown 2-up, more compact
   ------------------------------------------------------------------- */
@media(max-width:575px){
    #infrastructuur .row.row-cols-2{
        justify-content:flex-start !important;
    }
    #infrastructuur .icon-with-text-style-04 .feature-box{
        padding:14px 8px !important;
    }
    #infrastructuur .icon-with-text-style-04 .feature-box i{
        font-size:26px !important;
        margin-bottom:8px !important;
    }
    #infrastructuur .icon-with-text-style-04 .feature-box-content span{
        font-size:13px !important;
        line-height:18px !important;
    }
    #infrastructuur .col.icon-with-text-style-04{
        margin-bottom:12px !important;
    }
}

/* ---------------------------------------------------------------------
   4) Mobile: section titles left-aligned, not full-width, bigger —
      matches the hero's treatment. Targets the common "eyebrow + h2/h3"
      centered heading blocks used across the homepage and inner pages.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h1),
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h2),
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h3){
        text-align:left !important;
        flex:0 0 94% !important;
        max-width:94% !important;
        margin-left:0 !important;
        padding-right:35px;
    }
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h1) > *,
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h2) > *,
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h3) > *{
        text-align:left !important;
    }
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h2) h2,
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h3) h3{
        font-size:3.25rem !important;
        line-height:3.4rem !important;
    }
    /* inner-page banner titles: same scale as the homepage hero */
    .page-title-big-typography h1{
        font-size:3.25rem !important;
        line-height:3.4rem !important;
        padding-right:35px;
    }
}
@media(max-width:575px){
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h1),
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h2),
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h3){
        padding-right:25px;
    }
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h2) h2,
    .row.justify-content-center > [class*="col-lg-"].text-center:has(h3) h3{
        font-size:2.75rem !important;
        line-height:2.9rem !important;
    }
    .page-title-big-typography h1{
        font-size:2.75rem !important;
        line-height:2.9rem !important;
        padding-right:25px;
    }
}

/* ---------------------------------------------------------------------
   5) Mobile hamburger-menu background: plain Clean Sky navy (no shapes)
   ------------------------------------------------------------------- */
[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner{
    background-image:none !important;
    background-color:#001B3D !important;
}
/* make sure the close ("X") button always stays on top and clickable */
[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-toggler{
    z-index:20 !important;
    pointer-events:auto !important;
}

/* ---------------------------------------------------------------------
   6) Homepage banner ("Benieuwd wat Clean Sky...") — smaller on mobile
   ------------------------------------------------------------------- */
@media(max-width:767px){
    #contact .feature-box-content h5{
        font-size:1.15rem !important;
        line-height:1.55rem !important;
    }
}

/* ---------------------------------------------------------------------
   7) Inner pages: on mobile, let the header photo's gradient start later
      (i.e. show more of the actual photo) — see also each page's own
      max-width:575px background-image override for the gradient stops.
   ------------------------------------------------------------------- */
@media(max-width:575px){
    .page-title-big-typography{
        background-position:right top;
    }
}

/* ---------------------------------------------------------------------
   8) Mobile: contact pop-up — smaller, with breathing room so the close
      button doesn't overlap the form
   ------------------------------------------------------------------- */
@media(max-width:575px){
    .modal .modal-dialog.modal-lg{
        max-width:calc(100% - 24px);
        margin:30px auto;
    }
    .modal .modal-content > .p-7.sm-p-5{
        padding-top:50px !important;
        padding-bottom:30px !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }
}

/* ---------------------------------------------------------------------
   9) Mobile logo — slightly bigger
   ------------------------------------------------------------------- */
@media(max-width:767px){
    header .navbar-brand img{
        max-height:42px !important;
    }
}

/* ---------------------------------------------------------------------
   10) Section headings (h2/h3 using the fs-40/sm-fs-32/xs-fs-26 scale) —
       slightly larger with more generous line-height for breathing room.
       Tag-qualified selectors so this only touches real headings, not
       the numbered "01/02" step markers that reuse the same fs-40 class.
       Hero heading (#hero-heading) and inner-page banner titles (h1 in
       .page-title-big-typography) are untouched on purpose.
   ------------------------------------------------------------------- */
h2.fs-40.sm-fs-32.xs-fs-26,
h3.fs-40.sm-fs-32.xs-fs-26{
    font-size:2.75rem !important;
    line-height:1.25 !important;
}
@media(max-width:767px){
    h2.fs-40.sm-fs-32.xs-fs-26,
    h3.fs-40.sm-fs-32.xs-fs-26{
        font-size:3.25rem !important;
        line-height:1.3 !important;
    }
}
@media(max-width:575px){
    h2.fs-40.sm-fs-32.xs-fs-26,
    h3.fs-40.sm-fs-32.xs-fs-26{
        font-size:2.75rem !important;
        line-height:1.35 !important;
    }
}

/* ---------------------------------------------------------------------
   11) Advies page ("guides.html"): the five C-UAS phases as connected
       cards with arrows between them, instead of plain stacked numbers.
   ------------------------------------------------------------------- */
.phase-steps{
    gap:14px;
}
.phase-step-card{
    flex:1 1 0;
    min-width:150px;
    padding:26px 16px;
    box-shadow:0 6px 20px rgba(0,27,61,0.08);
    border:1px solid rgba(0,27,61,0.06);
    transition:box-shadow .25s ease, transform .25s ease;
}
.phase-step-card:hover{
    box-shadow:0 12px 28px rgba(0,27,61,0.14);
    transform:translateY(-3px);
}
.phase-step-arrow{
    flex:0 0 auto;
    width:34px;
    color:var(--base-color);
    opacity:0.5;
    font-size:18px;
}
@media(max-width:991px){
    .phase-step-card{
        flex:1 1 calc(33.333% - 14px);
        min-width:140px;
    }
}
@media(max-width:575px){
    .phase-step-card{
        flex:1 1 calc(50% - 14px);
    }
}

/* ---------------------------------------------------------------------
   12) Intro paragraphs under section headings — capped width so lines
       don't stretch too wide on desktop.
   ------------------------------------------------------------------- */
.intro-narrow{
    max-width:700px;
}
.intro-narrow.mx-auto-intro{
    margin-left:auto;
    margin-right:auto;
}

/* ---------------------------------------------------------------------
   13) Mobile: left-align specific text blocks that are centered by
       default (intro paragraphs without a heading, "read more" links).
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .text-start-mobile{
        text-align:left !important;
    }
}

/* ---------------------------------------------------------------------
   14) Homepage mini-nav row (Begeleiding / Platform / Ad-hoc inzet):
       full width on mobile, stacked one per row.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .mini-nav-row > div{
        flex:0 0 100% !important;
        max-width:100% !important;
    }
}

/* ---------------------------------------------------------------------
   15) Mobile: slightly smaller card icons
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .feature-box-icon .icon-double-large{
        font-size:42px !important;
    }
}

/* ---------------------------------------------------------------------
   16) "Volgende pagina" banners: bigger heading, more breathing room
       above the button on mobile (button sits right under the text
       otherwise).
   ------------------------------------------------------------------- */
.section-pattern-corner .bg-dark-gray h3{
    font-size:2rem !important;
}
@media(max-width:767px){
    .section-pattern-corner .bg-dark-gray h3{
        font-size:1.75rem !important;
    }
    .section-pattern-corner .bg-dark-gray .col-lg-5.text-start.text-lg-end{
        margin-top:18px;
    }
}
@media(max-width:575px){
    .section-pattern-corner .bg-dark-gray h3{
        font-size:1.5rem !important;
    }
}

/* ---------------------------------------------------------------------
   17) Mobile: CTA button rows inside the "Heb je vragen?" / vendor-CTA
       sections (col-lg-9 text-center) — left-align instead of centered.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .col-lg-9.text-center .d-flex.justify-content-center{
        justify-content:flex-start !important;
    }
}

/* ---------------------------------------------------------------------
   18) Contact form (popup + inline): equal horizontal/vertical gaps
       between fields (Naam↔Organisatie same as Naam↔E-mailadres).
   ------------------------------------------------------------------- */
.contact-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.contact-form-grid > [class*="col-"]{
    width:auto;
    max-width:none;
    flex:none;
    padding:0;
    margin:0;
}
.contact-form-grid > .col-12{
    grid-column:1 / -1;
}
@media(max-width:575px){
    .contact-form-grid{
        grid-template-columns:1fr;
    }
    .contact-form-grid > .col-sm-6{
        grid-column:1 / -1;
    }
}

/* ---------------------------------------------------------------------
   19) Contact form: visible success/error notification after submit
       (Bootstrap's .alert-success/.alert-danger need the base .alert
       class for their background/border/padding to apply — the JS only
       adds the color variant, so style it directly here instead).
   ------------------------------------------------------------------- */
.form-results{
    padding:12px 16px;
    border-radius:6px;
    font-size:14px;
    line-height:1.4;
}
.form-results.alert-success{
    background-color:#e9f6ee;
    color:#1e7e34;
    border:1px solid #bfe3cb;
}
.form-results.alert-danger{
    background-color:#fbeaea;
    color:#b02a37;
    border:1px solid #f0c4c4;
}

/* ---------------------------------------------------------------------
   20) Contact/brochure popup on mobile: 10px breathing room on every
       side, smaller window, tighter padding, smaller fields — concise
       enough to fit on one screen without scrolling.
   ------------------------------------------------------------------- */
@media(max-width:575px){
    #contactModal .modal-dialog,
    #brochureModal .modal-dialog{
        margin:10px;
        max-width:calc(100% - 20px);
    }
    #contactModal .p-7.sm-p-5.pt-60px.sm-pt-40px,
    #brochureModal .p-7.sm-p-5.pt-60px.sm-pt-40px{
        padding:32px 33px 18px 33px !important;
    }
    #contactModal .btn-close,
    #brochureModal .btn-close{
        margin-top:12px !important;
        margin-right:12px !important;
    }
    #contactModal p.fw-700.fs-22,
    #brochureModal p.fw-700.fs-22{
        font-size:18px !important;
        margin-bottom:2px !important;
    }
    #contactModal p.opacity-7.mb-25px,
    #brochureModal p.opacity-7.mb-25px{
        margin-bottom:14px !important;
        font-size:13px !important;
    }
    #contactModal .contact-form-grid,
    #brochureModal .contact-form-grid{
        gap:8px;
    }
    #contactModal .form-control,
    #brochureModal .form-control{
        padding:7px 12px !important;
        font-size:14px !important;
    }
    #contactModal textarea.form-control,
    #brochureModal textarea.form-control{
        min-height:56px !important;
    }
    #contactModal .col-12.d-flex.mt-10px,
    #brochureModal .col-12.d-flex.mt-10px{
        margin-top:6px !important;
    }
}

/* ---------------------------------------------------------------------
   21) Tablet (768–991px): give things room to breathe. Container edges
       get a bit more padding, and card grids that would otherwise show
       2–3 cramped columns stack to one column, same as on mobile.
   ------------------------------------------------------------------- */
@media(max-width:991px){
    .container{
        padding-left:28px !important;
        padding-right:28px !important;
    }
    .row-cols-sm-2 > *,
    .row-cols-md-3 > *{
        flex:0 0 100% !important;
        max-width:100% !important;
    }
}

/* ---------------------------------------------------------------------
   22) Mobile header: only logo, language switcher and hamburger show;
       "Contact" is now a plain item at the bottom of the mobile menu
       list instead of a styled floating button.
   ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   23) Language switcher: compact dropdown trigger (just the current
       language code + a small chevron) so adding more languages later
       only adds rows to the dropdown, never widens the header.
   ------------------------------------------------------------------- */
.btn-lang-switcher{
    background:transparent;
    border:none;
    padding:0;
    line-height:1;
}
.btn-lang-switcher:focus{
    box-shadow:none;
    outline:none;
}
.btn-lang-switcher i{
    font-size:14px;
}
.lang-switcher-menu{
    min-width:160px;
    max-height:340px;
    overflow-y:auto;
    padding:8px;
    border-radius:8px;
    border:none;
    box-shadow:0 10px 30px rgba(0,27,61,0.15);
}
.lang-switcher-menu .dropdown-item{
    border-radius:6px;
    padding:8px 12px;
    font-size:14px;
}
.lang-switcher-menu .dropdown-item.active{
    background-color:rgba(0,27,61,0.06);
    color:#001B3D;
    font-weight:600;
    cursor:default;
}

/* ---------------------------------------------------------------------
   24) Slightly bigger logo, language switcher and hamburger on mobile.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    header .navbar-brand img{
        max-height:40px !important;
    }
    .header-lang-switcher .btn-lang-switcher{
        font-size:15px !important;
    }
    .header-lang-switcher .btn-lang-switcher i{
        font-size:16px;
    }
    .navbar-toggler{
        transform:scale(1.2);
        transform-origin:right center;
    }
}

/* ---------------------------------------------------------------------
   25) Mobile menu: hide the custom-scrollbar track — the menu content
       is short enough that it never actually needs to scroll.
   ------------------------------------------------------------------- */
[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .mCSB_scrollTools{
    display:none !important;
}

/* ---------------------------------------------------------------------
   26) Mobile buttons: smaller box, bigger text, less pill-shaped —
       matching the banner buttons' corner radius.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .btn.btn-extra-large{
        font-size:18px !important;
        padding:14px 28px !important;
    }
    .btn.btn-rounded.btn-extra-large{
        padding:12px 24px !important;
    }
    .btn.btn-large{
        font-size:16px !important;
        padding:12px 24px !important;
    }
    .btn.btn-rounded.btn-large{
        padding:10px 20px !important;
    }
    .btn.btn-medium{
        font-size:16px !important;
        padding:12px 22px !important;
    }
    .btn.btn-small{
        font-size:15px !important;
        padding:10px 20px !important;
    }
    .btn.btn-rounded{
        border-radius:8px !important;
    }
    /* hero buttons: small enough to fit side by side instead of stacking.
       these use btn-switch-text, so the real padding lives on the inner
       span (the .btn itself is forced to padding:0 by style.css).
       text-size-adjust stops mobile browsers from "boosting" this small
       font back up to a more readable (but too-wide-to-fit) size. */
    .hero-cta-group{
        flex-wrap:nowrap !important;
        gap:4px;
        overflow:visible;
    }
    .hero-cta-group .btn{
        white-space:nowrap;
        font-size:10px !important;
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }
    .hero-cta-group .btn.btn-switch-text > span{
        padding:6px 8px !important;
    }
    .hero-cta-group .btn i{
        display:none;
    }
    /* safety net: if the two buttons still don't quite fit on a very
       narrow phone, let them spill rather than getting clipped by the
       entrance-animation's overflow-hidden wrapper */
    #home .overflow-hidden:has(.hero-cta-group){
        overflow:visible !important;
    }
}

/* ---------------------------------------------------------------------
   27) Header contact button: match nav-link font size now that it just
       says "Contact".
   ------------------------------------------------------------------- */
.header-button .btn.btn-medium{
    font-size:17px;
}

/* ---------------------------------------------------------------------
   28) Begeleiding page (mobile): the banner had roughly double the
       space above it (previous section's own bottom padding + this
       section's own top padding) compared to below it (just this
       section's bottom padding, since it touches the footer). Zero out
       the top padding on mobile so both gaps match.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .banner-tight-top-mobile{
        padding-top:0 !important;
    }
}

/* ---------------------------------------------------------------------
   29) Mobile: a bit more padding inside cards.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .feature-box.bg-white{
        padding:18px !important;
    }
}

/* ---------------------------------------------------------------------
   30) Mobile: scale down body/paragraph text a bit across the board
       (headings and banner text already have their own mobile sizes
       set elsewhere, so this only touches the common body-text sizes).
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .fs-13{ font-size:12px !important; }
    .fs-14{ font-size:13px !important; }
    .fs-17{ font-size:15px !important; }
    .fs-18{ font-size:16px !important; }
    .fs-20{ font-size:18px !important; }
    .fs-22{ font-size:20px !important; }
}

/* ---------------------------------------------------------------------
   31) Mobile: "Volgende pagina" banner buttons — full width of the
       banner (minus its own padding) and a border-radius matching the
       banner box itself instead of a full pill.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .section-pattern-corner .bg-dark-gray .col-lg-5.text-start.text-lg-end{
        width:100%;
    }
    .section-pattern-corner .bg-dark-gray .col-lg-5.text-start.text-lg-end .btn{
        display:block;
        width:100%;
        border-radius:8px !important;
        font-size:18px !important;
    }
}

/* ---------------------------------------------------------------------
   32) Homepage (mobile): tighten the gap between the ad-hoc deployment
       image section and what follows.
   ------------------------------------------------------------------- */
@media(max-width:767px){
    .row.mb-6.sm-mb-50px{
        margin-bottom:24px !important;
    }
}

/* ---------------------------------------------------------------------
   33) Contact form spam protection: honeypot field, visually hidden from
       real visitors (and skipped by screen readers) but still present in
       the markup for bots that auto-fill every field.
   ------------------------------------------------------------------- */
.hp-field{
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0;
}

/* ---------------------------------------------------------------------
   34) Contact popup: a bit more breathing room on the sides.
   ------------------------------------------------------------------- */
#contactModal .p-7.sm-p-5{
    padding-left:calc(7% + 15px) !important;
    padding-right:calc(7% + 15px) !important;
}
@media(max-width:767px){
    #contactModal .p-7.sm-p-5{
        padding-left:calc(5% + 15px) !important;
        padding-right:calc(5% + 15px) !important;
    }
}

/* ---------------------------------------------------------------------
   35) Contact forms: clearly highlight the focused field with the
       accent color, and only mark a field red once the visitor tries
       to submit — not the moment they tab away from an empty field
       they haven't typed in yet (see the accompanying main.js change
       for the latter).
   ------------------------------------------------------------------- */
.contact-form-style-05 .form-control:focus{
    border-color:var(--base-color, #7FB5FF) !important;
    box-shadow:0 0 0 3px rgba(127, 181, 255, 0.25) !important;
}

/* ---------------------------------------------------------------------
   36) Contact popup heading: a bit bigger; submit button text sized to
       match the rest of the form rather than standing out.
   ------------------------------------------------------------------- */
#contactModal .fs-22{
    font-size:26px !important;
}
.contact-form-style-05 button.submit{
    font-size:14px !important;
}
@media(max-width:767px){
    #contactModal .fs-22{
        font-size:30px !important;
        line-height:1.25 !important;
    }
    .contact-form-style-05 textarea[name="message"]{
        min-height:70px !important;
        height:70px !important;
    }
}

/* ---------------------------------------------------------------------
   37) Submit button: visible "sending" state so it's clear the click
       registered while the request is in flight.
   ------------------------------------------------------------------- */
.contact-form-style-05 button.submit.loading{
    opacity:0.7;
    pointer-events:none;
    position:relative;
    color:transparent !important;
}
.contact-form-style-05 button.submit.loading::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,0.5);
    border-top-color:#fff;
    border-radius:50%;
    animation:cs-btn-spin 0.7s linear infinite;
}
@keyframes cs-btn-spin{
    to{ transform:rotate(360deg); }
}

/* ---------------------------------------------------------------------
   38) Platform page: compact "more challenges we solve" accordion —
       tighter spacing than the default accordion-style-02 so it reads
       as a minimal, secondary list rather than a full section.
   ------------------------------------------------------------------- */
.accordion-compact .accordion-header{
    padding:6px 0 !important;
}
.accordion-compact .accordion-body{
    padding-bottom:6px !important;
}

/* ---------------------------------------------------------------------
   39) Mobile menu: snappier open/close. The theme's defaults take up to
       ~1.2s for all nav items to finish appearing, and ~1s to close —
       tighten both considerably.
   ------------------------------------------------------------------- */
@media (max-width: 991px){
    /* panel itself: much shorter close delay/duration (open stays similarly fast) */
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner{
        transition:all 0.25s ease-out !important;
        transition-delay:0.1s !important;
    }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner{
        transition:all 0.2s ease-in !important;
        transition-delay:0.05s !important;
    }
    /* hamburger -> X icon: sync with the panel instead of lagging 0.8s behind */
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-toggler{
        transition:all 0.25s ease-in !important;
        transition-delay:0.05s !important;
    }
    /* nav items: shorter fade/scale + tighter stagger between items */
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav > .nav-item{
        transition:transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99) !important;
    }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(1){ transition-delay:0.10s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(2){ transition-delay:0.13s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(3){ transition-delay:0.16s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(4){ transition-delay:0.19s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(5){ transition-delay:0.22s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(6){ transition-delay:0.25s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(7){ transition-delay:0.28s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(8){ transition-delay:0.31s !important; }
    .navbar-collapse-show[data-mobile-nav-style=full-screen-menu] .navbar-nav > .nav-item:nth-child(9){ transition-delay:0.34s !important; }
}