/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6tTY_vCk5YVqU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/8vIS7wUr0m80wwYf0QCXZzYzUoTg-A6jTY_vCk5Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Text';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/RrQJbohi_ic6B3yVSzGBrMxQbZchO8irP1CMF3E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Text';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/RrQJbohi_ic6B3yVSzGBrMxQbZcvO8irP1CM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/RrQXbohi_ic6B3yVSzGBrMxQZqctMc-JPWCN.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/RrQXbohi_ic6B3yVSzGBrMxQaKctMc-JPQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   uwweb.be - huisstijl UWISH-IT (zelfde stijl als uwish-it.com)
   Bron: ~/claude/uwweb/huisstijl/ - wordt na fonts.css in custom.css gezet
   ========================================================================== */

:root {
    /* UWISH-IT palet */
    --uw-blue:          #385e9d;
    --uw-blue-dark:     #2a4a80;
    --uw-navy:          #13254a;
    --uw-navy-deep:     #0b1833;
    --uw-blue-light:    #dbe6f5;
    --uw-blue-50:       #f1f5fb;
    --uw-amber:         #ffb400;
    --uw-amber-dark:    #f0a500;
    --uw-ink:           #253245;
    --uw-muted:         #5a6779;
    --uw-border:        #dfe6f0;
    --uw-shadow:        0 10px 30px rgba(19, 37, 74, .08);
    --uw-shadow-lg:     0 24px 60px rgba(19, 37, 74, .16);

    /* Lagom: kleuren */
    --brand-primary:                #385e9d;
    --brand-primary-lighter:        #4f78bd;
    --brand-primary-lighter-2:      #b9cbe8;
    --brand-primary-lighter-3:      #dbe6f5;
    --brand-primary-lighter-4:      #f1f5fb;
    --brand-primary-darker:         #2a4a80;
    --brand-primary-gradient-start: #385e9d;
    --brand-primary-gradient-end:   #13254a;

    --brand-secondary:                #13254a;
    --brand-secondary-lighter:        #5a6779;
    --brand-secondary-lighter-2:      #8794a8;
    --brand-secondary-lighter-3:      #5a6779;
    --brand-secondary-darker:         #0b1833;
    --brand-secondary-gradient-start: #0b1833;
    --brand-secondary-gradient-end:   #13254a;

    --brand-info:           #385e9d;
    --gray-base:            #5a6779;
    --gray-darker:          #13254a;
    --gray-lighter-3:       #dfe6f0;
    --gray-lighter-4:       #e8eef6;
    --gray-faded:           #f1f5fb;
    --gray-gradient-end:    #dbe6f5;

    --text-heading-color:   #13254a;
    --text-body-color:      #253245;
    --body-bg:              #f1f5fb;

    /* Lagom: typografie en vormen */
    --font-family-base:     "Red Hat Text", system-ui, sans-serif;
    --border-radius-xs:     8px;
    --border-radius-sm:     10px;
    --border-radius-base:   12px;
    --border-radius-lg:     16px;
    --border-radius-xlg:    20px;
}

/* --- Typografie --------------------------------------------------------- */

body {
    font-family: "Red Hat Text", system-ui, sans-serif;
    color: var(--uw-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header-title,
.package-title,
.price-amount,
.btn {
    font-family: "Red Hat Display", system-ui, sans-serif;
}

h1, h2, h3, .h1, .h2, .h3,
.main-header-title {
    font-weight: 800;
    color: var(--uw-navy);
    letter-spacing: -.01em;
}

a { color: var(--uw-blue); }
a:hover, a:focus { color: var(--uw-blue-dark); }

/* --- Header ------------------------------------------------------------- */

.app-nav {
    background: #fff;
    box-shadow: 0 1px 0 var(--uw-border), 0 6px 24px rgba(19, 37, 74, .06);
}

.app-nav .logo img { max-height: 40px; width: auto; }

.app-nav-menu .nav > li > a,
.app-nav-menu .nav-item > a {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-weight: 600;
    color: var(--uw-navy);
    position: relative;
}

.app-nav-menu .nav > li > a::after,
.app-nav-menu .nav-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
    background: var(--uw-amber);
    transition: left .2s ease, right .2s ease;
}

.app-nav-menu .nav > li > a:hover::after,
.app-nav-menu .nav > li.active > a::after,
.app-nav-menu .nav-item > a:hover::after,
.app-nav-menu .nav-item.active > a::after {
    left: 12px;
    right: 12px;
}

.app-nav-menu .nav > li > a:hover,
.app-nav-menu .nav-item > a:hover { color: var(--uw-blue); }

/* --- Paginakop ---------------------------------------------------------- */

.main-header {
    background: linear-gradient(120deg, var(--uw-navy-deep) 0%, var(--uw-navy) 55%, var(--uw-blue-dark) 100%);
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.main-header .main-header-title,
.main-header h1 {
    color: #fff;
}

.main-header .breadcrumb,
.main-header .breadcrumb a,
.main-header .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, .75);
}

/* --- Knoppen ------------------------------------------------------------ */

.btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-primary,
.btn-primary:focus,
.btn-order-now {
    background-color: var(--uw-amber);
    border-color: var(--uw-amber);
    color: var(--uw-navy);
    box-shadow: 0 8px 20px rgba(255, 180, 0, .28);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-order-now:hover {
    background-color: var(--uw-amber-dark);
    border-color: var(--uw-amber-dark);
    color: var(--uw-navy);
    transform: translateY(-1px);
}

.btn-default,
.btn-outline {
    background-color: #fff;
    border-color: var(--uw-blue);
    color: var(--uw-blue);
}

.btn-default:hover,
.btn-default:focus,
.btn-outline:hover {
    background-color: var(--uw-blue);
    border-color: var(--uw-blue);
    color: #fff;
}

/* --- Blokken en pakketten ----------------------------------------------- */

.panel,
.package,
.section-body,
.list-group {
    border-radius: 16px;
    border-color: var(--uw-border);
}

.package {
    box-shadow: var(--uw-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.package:hover {
    box-shadow: var(--uw-shadow-lg);
    transform: translateY(-3px);
}

.package .package-title { color: var(--uw-navy); font-weight: 700; }
.package .price-amount { color: var(--uw-blue); font-weight: 800; }
.package .price-cycle { color: var(--uw-muted); }

.main-sidebar .list-group-item.active,
.main-sidebar .list-group-item.active:hover {
    background-color: var(--uw-blue-light);
    color: var(--uw-navy);
    font-weight: 600;
}

/* --- Formulieren -------------------------------------------------------- */

.form-control:focus {
    border-color: var(--uw-blue);
    box-shadow: 0 0 0 3px rgba(56, 94, 157, .18);
}

/* --- Footer ------------------------------------------------------------- */

.main-footer {
    background: var(--uw-navy-deep);
    color: rgba(255, 255, 255, .72);
    border-top: 4px solid var(--uw-amber);
}

.main-footer a,
.main-footer .footer-nav a,
.main-footer .footer-copyright {
    color: rgba(255, 255, 255, .72);
}

.main-footer a:hover { color: var(--uw-amber); }

.main-footer .footer-bottom { border-top-color: rgba(255, 255, 255, .1); }

.lm-go-top { color: #fff; }

/* --- Iconen ------------------------------------------------------------- */

:root {
    --gray-icons:       #5a6779;
    --gray-icons-hover: #385e9d;
}

.main-sidebar .list-group-item i,
.main-sidebar .list-group-item [class^="ls-"],
.main-sidebar .list-group-item [class*=" ls-"],
.main-sidebar .list-group-item .list-group-item-icon {
    color: var(--uw-blue);
}

.main-sidebar .list-group-item.active i,
.main-sidebar .list-group-item.active [class^="ls-"],
.main-sidebar .list-group-item.active .list-group-item-icon {
    color: var(--uw-navy);
}

/* --- Pakketkaarten: kenmerken als vinkjeslijst ---------------------------- */

.package .package-content ul,
.package .package-body ul {
    list-style: none;
    padding: 0;
    margin: 16px auto 0;
    display: inline-block;
    text-align: left;
}

.package .package-content ul li,
.package .package-body ul li {
    position: relative;
    padding: 4px 0 4px 26px;
    color: var(--uw-ink);
}

.package .package-content ul li::before,
.package .package-body ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 14px;
    height: 8px;
    border-left: 2.5px solid var(--uw-blue);
    border-bottom: 2.5px solid var(--uw-blue);
    transform: rotate(-45deg);
}

/* ==========================================================================
   Modernisering in de stijl van uwish-it.com (2026-10-15)
   ========================================================================== */

/* --- Illustraties en banners in huisstijlkleuren ------------------------ */

:root {
    --svg-illustration-color-0: #385e9d;
    --svg-illustration-color-1: #385e9d;
    --svg-illustration-color-2: #ffb400;
    --svg-illustration-color-3: #7f9fd4;
    --svg-illustration-color-4: #a9bfe3;
    --svg-illustration-color-5: #c9d7ee;
    --svg-illustration-color-6: #e3ebf7;
    --svg-illustration-color-7: #ffffff;
    --svg-illustration-line-color: rgba(56, 94, 157, .24);
    --svg-banner-shape-left: #13254a;
    --svg-banner-shape-right: #2a4a80;
    --svg-icon-color-1: #7f9fd4;
    --svg-icon-color-2: #385e9d;
}

.main-banner.banner-home {
    background: linear-gradient(120deg, var(--uw-navy-deep) 0%, var(--uw-navy) 55%, var(--uw-blue-dark) 100%);
}

.main-banner .banner-content h1,
.main-banner .banner-title {
    font-family: "Red Hat Display", system-ui, sans-serif;
    font-weight: 800;
    color: #fff;
}

/* --- Bovenbalk ---------------------------------------------------------- */

.uwt-topbar {
    background: var(--uw-navy-deep);
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    line-height: 1;
}

.uwt-topbar-in {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 36px;
    flex-wrap: wrap;
}

.uwt-topbar a.uwt-tb-item,
.uwt-topbar .uwt-tb-item { color: rgba(255, 255, 255, .8); text-decoration: none; }
.uwt-topbar a.uwt-tb-item:hover { color: var(--uw-amber); }
.uwt-tb-spacer { flex: 1; }

@media (max-width: 767px) {
    .uwt-hide-sm { display: none; }
    .uwt-topbar-in { justify-content: center; gap: 16px; }
    .uwt-tb-spacer { display: none; }
}

/* --- Secties op de startpagina ------------------------------------------ */

.uwt-sec { padding: 64px 0; }
.uwt-sec-alt { background: #fff; }
.uwt-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.uwt-head h2 { font-family: "Red Hat Display", sans-serif; font-weight: 800; color: var(--uw-navy); font-size: 32px; margin: 8px 0 10px; }
.uwt-head p { color: var(--uw-muted); font-size: 17px; margin: 0; }

.uwt-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--uw-amber-dark);
}

.uwt-label::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--uw-amber); }

.uwt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.uwt-cards-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 991px) { .uwt-cards, .uwt-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .uwt-cards, .uwt-cards-3 { grid-template-columns: 1fr; } }

.uwt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--uw-border);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: var(--uw-shadow);
    color: var(--uw-ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.uwt-sec-alt .uwt-card { background: var(--uw-blue-50); }
.uwt-card:hover { transform: translateY(-4px); box-shadow: var(--uw-shadow-lg); color: var(--uw-ink); text-decoration: none; }
.uwt-card-top { border: 2px solid var(--uw-blue); }
.uwt-card h3 { font-family: "Red Hat Display", sans-serif; font-weight: 800; color: var(--uw-navy); font-size: 22px; margin: 0 0 8px; }
.uwt-card p { color: var(--uw-muted); margin: 8px 0 20px; flex: 1; }
.uwt-price { font-family: "Red Hat Display", sans-serif; font-weight: 800; font-size: 34px; color: var(--uw-blue); line-height: 1.1; }
.uwt-note { font-size: 13px; color: var(--uw-muted); }

.uwt-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--uw-amber);
    color: var(--uw-navy);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
}

.uwt-btn {
    align-self: flex-start;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    color: var(--uw-blue);
    border: 2px solid var(--uw-blue);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background-color .2s ease, color .2s ease;
}

.uwt-card:hover .uwt-btn { background: var(--uw-blue); color: #fff; }
.uwt-center { text-align: center; margin-top: 28px; }
.uwt-link { font-weight: 700; color: var(--uw-blue); }

.uwt-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .uwt-usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .uwt-usps { grid-template-columns: 1fr; } }
.uwt-usps > div { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--uw-shadow); border-top: 4px solid var(--uw-amber); }
.uwt-usps h3 { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 18px; color: var(--uw-navy); margin: 0 0 8px; }
.uwt-usps p { margin: 0; color: var(--uw-ink); }

.uwt-cta { background: linear-gradient(120deg, var(--uw-navy-deep) 0%, var(--uw-navy) 55%, var(--uw-blue-dark) 100%); color: #fff; padding: 56px 0; }
.uwt-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.uwt-cta h2 { font-family: "Red Hat Display", sans-serif; font-weight: 800; color: #fff; margin: 0 0 6px; }
.uwt-cta p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 17px; }
.uwt-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.uwt-cta .btn-default { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.uwt-cta .btn-default:hover { background: #fff; color: var(--uw-navy); }

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

.uwt-footer { background: var(--uw-navy); color: rgba(255, 255, 255, .72); padding: 56px 0 40px; border-top: 4px solid var(--uw-amber); }
.uwt-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 32px; }
@media (max-width: 991px) { .uwt-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .uwt-footer-grid { grid-template-columns: 1fr; } }
.uwt-footer h4 { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 16px; color: #fff; margin: 0 0 14px; }
.uwt-footer a { display: block; color: rgba(255, 255, 255, .72); padding: 3px 0; text-decoration: none; }
.uwt-footer a:hover { color: var(--uw-amber); }
.uwt-footer p { margin: 0 0 10px; line-height: 1.6; }
.uwt-footer-logo { height: 34px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.main-footer { border-top: 0; }