/****************** GENERAL  **********************/
.blue {
  color: #1f9bcf;
}

body {
    color: #171717;

}


b, strong {
    font-weight: 800;
}

.text-primary {
    color: #1d9bd1 !important;
}

p, .text-secondary {
    color: #101010;
    font-weight: 400; 
}

.node__content {
    padding-top: 30px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}


/********************* BUTTONS  **********************/
.btn-outline-primary {
    border: 2px solid #1d9bd1;
}

.btn-primary {
 background-color: #1d9bd1;
}




/******************* HEADER  **********************/

a.active.dropdown-item.is-active:focus, a.active.dropdown-item.is-active:hover {
    color: white;
}

.navbar-brand .site-logo-img {
  max-height: 76px;
  width: auto;
  display: block;
}

header .bg-light {
    border-bottom: 1px solid #1f9bcf;
    background-color: rgb(248 248 248) !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff;
    background: #1f9bcf;
    padding-left: 12px;
    padding-right: 12px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    border: 1px solid black;
    padding-left: 12px;
    padding-right: 12px;
}



.nav-link {
    color: #1a1a1a;
}

header nav a.webform-dialog {
    background: #FF5722;
    border-color: #FF5722;
    margin-top: 20px;
}

nav .dropdown-item:hover {
color: white;
}
nav .dropdown-item:hover {
color: black;
}


@media screen and (min-width: 991px) {

header .nav-item {
    margin-top: 20px;
}

}

@media screen and (min-width: 991px) and (max-width: 1200px) {
    .region.region-nav-additional {
        display: none !important;
    }


}


@media screen and (max-width: 991px) {
    /* 1. Zorg dat de elementen binnen de dropdown-lijst mogen afbreken (wrappen) */
    .navbar-nav .nav-item.dropdown {
        flex-wrap: wrap !important;
    }

    /* 2. Zorg dat de hoofdlink de overgebleven ruimte inneemt, zodat het pijltje rechts blijft */
    .navbar-nav .nav-item.dropdown > a.nav-link {
        flex: 1;
    }

    /* 3. Dwing het uitklapmenu naar een nieuwe regel, over de volle breedte */
.navbar-nav .dropdown-menu {
    overflow: hidden;
    width: 100%;
    border: none;
    box-shadow: none;
    padding-left: 1.5rem;
    background-color: transparent;
    margin-top: 0;
}

    /* 4. Verwijder de harde zwarte kaders en vervang ze door een subtiele scheidingslijn */
    .navbar-nav .nav-item {
        border: none !important; /* Overschrijft de huidige harde randen */
        border-bottom: 1px solid #dee2e6 !important; /* Lichte Bootstrap scheidingslijn */
    }

    /* 5. Optimaliseer de "Request a quote" knop voor mobiel (volle breedte) */
.region-nav-additional {
    margin-top: 1.5rem;
    padding-bottom: 1rem;
    width: 250px;
    margin-left: auto;
}
    
    .region-nav-additional .btn {
        display: block;
        width: 100%;
    }

    /* Doel specifieke lijst-items in het mobiele menu */
    .navbar-nav .nav-item {
        width: 250px;
        margin-left: auto; /* Dit is de Flexbox "magie" die de knop naar rechts duwt */
        margin-right: 0; /* Zorgt dat hij strak tegen de rechtermarge aan staat */
    }




}


/******************* HOME  **********************/

.ll-hero-banner {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-image: 
    url("https://starterkit.omegawebdesign.be/sites/default/files/img/latchlock-banner.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 0;
  margin-top: -30px;
  margin-bottom: 40px;
}

.ll-hero-banner h1,
.ll-hero-banner p {
  color: #fff !important;
}

.ll-hero-banner p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.ll-series-section {
    padding-bottom: 2rem;
}


.ll-series-card {
    border: 1px solid #cfd6dd;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ll-series-card:hover {
    transform: translateY(-5px);
    border-color: #1d9bd1;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}

.ll-series-card .card-body {
    padding: 1.5rem 1.3rem;
}

.ll-series-img {
    height: 210px;
    width: 100%;
    object-fit: contain;
    margin-bottom: 0.8rem !important;
    transition: transform 0.25s ease;
}

.ll-series-card:hover .ll-series-img {
    transform: scale(1.04);
}

/* Verwijdert ongewenste streepjes of decoratieve lijntjes */
.ll-series-card h3::before,
.ll-series-card h3::after,
.ll-series-title::before,
.ll-series-title::after {
    content: none !important;
    display: none !important;
}

.ll-series-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.ll-series-title {
    display: inline-block;
    background: #1d9bd1;
    border: 1px solid #1d9bd1;
    color: #fff;
    padding: 0.65rem 1.15rem;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ll-series-title:hover,
.ll-series-title:focus {
    background: #007bb5;
    border-color: #007bb5;
    color: #fff;
}

.ll-series-card p {
    margin-bottom: 0;
    line-height: 1.65;
}

@media (max-width: 575.98px) {
    .ll-series-img {
        height: 190px;
    }
}


/********************* ABOUT  **********************/
.benefit-cards {
    --accent-color: #1f9bcf;
}

.benefit-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(31, 155, 207, 0.18);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(16, 39, 62, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.benefit-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--accent-color);
}

.benefit-card::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 22px;
    width: 58px;
    height: 58px;
    background:
        linear-gradient(to right, rgba(31, 155, 207, 0.28), rgba(31, 155, 207, 0.28)) top right / 58px 2px no-repeat,
        linear-gradient(to bottom, rgba(31, 155, 207, 0.28), rgba(31, 155, 207, 0.28)) top right / 2px 58px no-repeat,
        linear-gradient(to right, rgba(31, 155, 207, 0.14), rgba(31, 155, 207, 0.14)) 10px 10px / 38px 1px no-repeat,
        linear-gradient(to bottom, rgba(31, 155, 207, 0.14), rgba(31, 155, 207, 0.14)) 48px 10px / 1px 38px no-repeat;
    border-radius: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.benefit-card:hover::after {
    transform: translate(-4px, 4px);
    opacity: 1;
}
.benefit-card:hover {
    transform: translateY(-6px);
    border-color: rgba(31, 155, 207, 0.5);
    box-shadow: 0 16px 36px rgba(16, 39, 62, 0.13);
}

.benefit-card:hover::after {
    transform: scale(1.15);
    background: rgba(31, 155, 207, 0.14);
}

.benefit-card .card-body {
    position: relative;
    z-index: 1;
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    background: rgba(31, 155, 207, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(31, 155, 207, 0.3);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.benefit-card h2 {
    color: #142033;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.benefit-card p {
    color: #526173;
    line-height: 1.7;
    font-size: 0.97rem;
}

.benefit-card strong {
    color: #142033;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .benefit-card .card-body {
        padding: 2rem !important;
    }
}


/********************* THOMAS BLOCK  **********************/
.ll-support-cta {
    background: #ffffff;
}

.ll-support-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(31, 155, 207, 0.08) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfe 100%);
    border: 1px solid rgba(31, 155, 207, 0.18);
    box-shadow: 0 24px 70px rgba(16, 45, 73, 0.10);
}

/* Rechte technische lijnen, geen cirkels */
.ll-support-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 46%;
    width: 260px;
    height: 260px;
    border-top: 1px solid rgba(31, 155, 207, 0.18);
    border-right: 1px solid rgba(31, 155, 207, 0.18);
    transform: skewX(-18deg);
    pointer-events: none;
}

.ll-support-card::after {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(31, 155, 207, 0.08);
    pointer-events: none;
}

.ll-support-image {
    position: relative;
    height: 100%;
    min-height: 560px;
    background: #eef7fb;
}

.ll-support-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0) 55%, rgba(246,251,254,0.94) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(246,251,254,0.55) 100%);
    pointer-events: none;
}

.ll-support-image img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center left;
    display: block;
}

.ll-support-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 4.25rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ll-eyebrow {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-bottom: 1.35rem;
    padding-bottom: 0.75rem;
    color: #1f9bcf;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ll-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 3px;
    background: #1f9bcf;
    left: 50%;
    transform: translateX(-50%);
}

.ll-support-content h2 {
    margin: 0 0 1.35rem;
    color: #102842;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 800;
    text-transform: none !important;
}

.ll-support-content p {
    margin: 0;
    color: #506274;
    font-size: 1.02rem;
    line-height: 1.75;
}

.ll-support-content strong {
    color: #102842;
    font-weight: 800;
}

.ll-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 300px;
}

.ll-cta-actions .btn {
    width: 100%;
}


.ll-btn-primary,
.ll-btn-secondary {
    min-height: 56px;
    padding: 0.95rem 1.35rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.22s ease;
}

.ll-btn-primary {
    background: #1f9bcf;
    border: 1px solid #1f9bcf;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(31, 155, 207, 0.25);
}

.ll-btn-primary:hover {
    background: #1688b6;
    border-color: #1688b6;
    color: #ffffff;
    transform: translateY(-2px);
}

.ll-btn-secondary {
    background: #ffffff;
    border: 1px solid rgba(31, 155, 207, 0.55);
    color: #147fab;
}

.ll-btn-secondary:hover {
    background: rgba(31, 155, 207, 0.07);
    border-color: #1f9bcf;
    color: #0f6f98;
    transform: translateY(-2px);
}

.ll-contact-card {
    position: relative;
    z-index: 2;
    height: calc(100% - 4rem);
    margin: 2rem 2rem 2rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 155, 207, 0.18);
    box-shadow: 0 18px 45px rgba(16, 45, 73, 0.09);
    backdrop-filter: blur(10px);
}

.ll-contact-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.35rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(31, 155, 207, 0.16);
}

.ll-contact-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 155, 207, 0.09);
    border: 1px solid rgba(31, 155, 207, 0.35);
    color: #1f9bcf;
    font-weight: 900;
    font-size: 1.1rem;
}

.ll-contact-top h3 {
    margin: 0;
    color: #102842;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-transform: none !important;
}

.ll-contact-top p {
    margin: 0.2rem 0 0;
    color: #1f9bcf;
    font-size: 0.95rem;
    font-weight: 700;
}

.ll-email {
    display: block;
    padding: 0.85rem 0 1rem;
    margin-bottom: 0.3rem;
    color: #102842;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 155, 207, 0.13);
}

.ll-email:hover {
    color: #1f9bcf;
}

.ll-phone-list a {
    display: block;
    padding: 0.72rem 0;
    color: #405367;
    font-size: 0.93rem;
    line-height: 1.35;
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 155, 207, 0.10);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.ll-phone-list a:hover {
    color: #1f9bcf;
    padding-left: 0.25rem;
}

.ll-phone-list span {
    display: block;
    margin-bottom: 0.15rem;
    color: #8291a0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ll-support-card::before,
    .ll-support-card::after {
        display: none;
    }

    .ll-support-image,
    .ll-support-image img {
        min-height: 380px;
    }

    .ll-support-image::after {
        background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(246,251,254,0.96) 100%);
    }

    .ll-support-content {
        padding: 3rem 2rem;
    }

    .ll-contact-card {
        height: auto;
        margin: 0 2rem 2rem;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ll-support-content {
        padding: 2.25rem 1.35rem;
    }

    .ll-support-content h2 {
        font-size: 2rem;
    }

    .ll-support-image,
    .ll-support-image img {
        min-height: 300px;
    }

    .ll-cta-actions {
        flex-direction: column;
    }

    .ll-btn-primary,
    .ll-btn-secondary {
        width: 100%;
    }

    .ll-contact-card {
        margin: 0 1.35rem 1.35rem;
        padding: 1.35rem;
    }
}









/******************* FOOTER **********************/
.ll-footer {
  background: linear-gradient(135deg, #111827, #1f2937);
}

.ll-footer h2,
.ll-footer h3,
.ll-footer p {
  color: #d6d6d6 !important;
  letter-spacing: 0.02em;
}

.ll-footer a {
  color: #d6d6d6 !important;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.ll-footer a:hover {
  color: #0dcaf0;
}

.ll-footer-mission {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ll-footer-links li {
  margin-bottom: 0.65rem;
}

.ll-footer-links a {
  font-size: 0.95rem;
}

.ll-footer-contact address {
  line-height: 1.7;
}

.ll-footer-trust .badge {
  font-weight: 600;
}

.ll-social-link {
  font-size: 0.875rem;
  font-weight: 600;
}

.ll-footer-bottom {
  border-color: rgba(255, 255, 255, 0.15) !important;
}


/*********** clienst logo slider ***********/
.clients-logo-slider .client-logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 35px;
  align-items: center;
  justify-items: center;
  min-height: 100px;
}

.clients-logo-slider .client-logo-row img {
  max-height: 100px;
  width: 100%;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

@media (max-width: 991px) {
  .clients-logo-slider .client-logo-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .clients-logo-slider .client-logo-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .clients-logo-slider .client-logo-row img {
    height: 45px;
  }
}



/******************** PRODUCTS **********************/
.ll-series-page {
    background: #ffffff;
}

.ll-series-page * {
    box-sizing: border-box;
}

.ll-series-page a {
    transition: all 0.22s ease;
}

.ll-series-hero {

    margin-inline: auto;
}

.ll-series-hero .lead {

    color: #536477;
    line-height: 1.75;
}

.ll-eyebrow {
    color: #1f9bcf;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ll-main-btn,
.ll-outline-btn,
.ll-info-btn {
    border-radius: 0;
    padding: 0.95rem 1.35rem;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-transform: uppercase;
    text-decoration: none;
}

.ll-main-btn {
    background: #1f9bcf;
    border: 1px solid #1f9bcf;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(31, 155, 207, 0.24);
}

.ll-main-btn:hover,
.ll-main-btn:focus {
    background: #1688b6;
    border-color: #1688b6;
    color: #ffffff;
    transform: translateY(-2px);
}

.ll-outline-btn {
    background: #ffffff;
    border: 1px solid rgba(31, 155, 207, 0.55);
    color: #147fab;
}

.ll-outline-btn:hover,
.ll-outline-btn:focus {
    background: rgba(31, 155, 207, 0.08);
    border-color: #1f9bcf;
    color: #0f6f98;
    transform: translateY(-2px);
}

/* Series navigation */
.ll-series-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.25rem;
    background: #f7fbfd;
    border: 1px solid rgba(31, 155, 207, 0.16);
}

.ll-series-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    background: #ffffff;
    border: 1px solid rgba(31, 155, 207, 0.22);
    color: #17324d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 5px;
}

.ll-series-nav a:hover,
.ll-series-nav a:focus {
    background: #1f9bcf;
    border-color: #1f9bcf;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Cards */
.ll-series-list {
    display: grid;
    gap: 1.5rem;
}

.ll-series-card {
    position: relative;
    overflow: hidden;
    padding: 2%;
    background:
        linear-gradient(135deg, rgba(31, 155, 207, 0.065), rgba(255, 255, 255, 0) 44%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    border: 1px solid rgba(31, 155, 207, 0.18);
    box-shadow: 0 14px 38px rgba(15, 47, 76, 0.07);
    scroll-margin-top: 110px;
}

.ll-series-card::before {
    content: "";
    position: absolute;
    right: 24px;
    top: 24px;
    width: 70px;
    height: 70px;
    border-top: 2px solid rgba(31, 155, 207, 0.18);
    border-right: 2px solid rgba(31, 155, 207, 0.18);
    pointer-events: none;
}

.ll-series-card::after {
    content: "";
    position: absolute;
    right: 36px;
    top: 36px;
    width: 52px;
    height: 52px;
    border-top: 1px solid rgba(31, 155, 207, 0.12);
    border-right: 1px solid rgba(31, 155, 207, 0.12);
    pointer-events: none;
}

.ll-series-card:hover {
    border-color: rgba(31, 155, 207, 0.42);
    box-shadow: 0 22px 55px rgba(15, 47, 76, 0.11);
    transform: translateY(-3px);
}

.ll-series-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 270px;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(31, 155, 207, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.ll-series-image img {
    width: auto;
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
}

.ll-series-image-wide img {
    width: 100%;
    max-height: 210px;
}

.ll-series-content {
    position: relative;
    z-index: 1;
}

.ll-series-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.1rem;
}

.ll-series-type {
    color: #1f9bcf;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ll-series-content h2 {
    color: #102842;
    letter-spacing: -0.035em;
}

.ll-series-content p {
    max-width: 920px;
    color: #536477;
    font-size: 1.02rem;
    line-height: 1.75;
}

.ll-series-content strong {
    color: #102842;
    font-weight: 900;
}

/* Descriptive More Info button */
.ll-info-btn {
    min-width: 260px;
    max-width: 340px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f6fc;
    border: 1px solid rgba(31, 155, 207, 0.58);
    color: #0f6f98;
    text-align: center;
    box-shadow: 8px 8px 0 rgba(31, 155, 207, 0.12);
}

.ll-info-btn:hover,
.ll-info-btn:focus {
    background: #1f9bcf;
    border-color: #1f9bcf;
    color: #ffffff;
    box-shadow: 4px 4px 0 rgba(31, 155, 207, 0.18);
    transform: translateY(-2px);
}

/* Part buttons */
.ll-part-group {
    margin-top: 1.25rem;
}

.ll-part-group h3 {
    margin-bottom: 0.65rem;
    color: #102842;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ll-part-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ll-part-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.48rem 0.78rem;
    background: #ffffff;
    border: 1px solid rgba(31, 155, 207, 0.25);
    color: #17324d;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(15, 47, 76, 0.04);
}

.ll-part-buttons a:hover,
.ll-part-buttons a:focus {
    background: #1f9bcf;
    border-color: #1f9bcf;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Bottom CTA */
.ll-bottom-cta {
    padding: 2.25rem;
    background:
        linear-gradient(135deg, rgba(31, 155, 207, 0.10), rgba(255, 255, 255, 0) 55%),
        #f7fbfd;
    border: 1px solid rgba(31, 155, 207, 0.18);
    box-shadow: 0 18px 45px rgba(15, 47, 76, 0.08);
}

.ll-bottom-cta h2 {
    color: #102842;
    letter-spacing: -0.03em;
}

.ll-bottom-cta p {
    color: #536477;
    line-height: 1.7;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ll-series-card {
        padding: 1.5rem;
    }

    .ll-series-card::before,
    .ll-series-card::after {
        display: none;
    }

    .ll-series-header {
        flex-direction: column;
    }

    .ll-info-btn {
        width: 100%;
        max-width: 100%;
    }

    .ll-series-image {
        min-height: 230px;
    }

    .ll-series-image img {
        max-height: 220px;
    }
}



/* Mobile */
@media (max-width: 575.98px) {
    .ll-series-page {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .ll-series-card,
    .ll-bottom-cta,
    .ll-series-nav {
        padding: 1.25rem;
    }

    .ll-series-hero h1 {
        font-size: 2rem;
    }

    .ll-series-hero .lead {
        font-size: 1rem;
    }

    .ll-main-btn,
    .ll-outline-btn,
    .ll-info-btn {
        width: 100%;
    }

    .ll-series-nav a {
        width: 100%;
    }

    .ll-series-image {
        min-height: 190px;
    }

    .ll-series-image img {
        max-height: 185px;
    }

    .ll-part-buttons a {
        width: 100%;
        justify-content: flex-start;
    }
}


.ll-group-heading {
    margin-bottom: 1rem;
    line-height: 1.2;
}
.ll-group-heading .ll-group-type {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a6b8c; /* De lichtblauwe/grijze 'eyebrow' kleur */
    margin-bottom: 0.25rem;
    font-family: inherit; /* Past zich aan jouw thema font aan */
}
.ll-group-heading .ll-group-name {
    display: block;
    font-size: 1.75rem; /* Bootstrap H3 formaat */
    font-weight: 700;
    color: #002d5a; /* De donkerblauwe hoofdtitel kleur */
}

@media (min-width: 1200px) {
.display-5 {
    font-size: 2.3rem;
}
}



.navbar-nav .nav-item.dropdown.d-flex {
  align-items: stretch !important;
}


/* 2. STANDAARD STATE: De pijl-knop (rechterzijde van de knop) */
.navbar-nav .nav-item .dropdown-toggle-split {
  background-color: #ffffff !important; /* Wit net als Home en About */
  color: #000000 !important;             /* Zwart pijltje */
  
  /* Expliciete randen aanbrengen om de ontbrekende rand te fixen */
  border-top: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important; /* HIERMEE FIX JE DE RECHTERRAND */
  border-left: 1px solid #000000 !important;  /* Dit vormt het subtiele scheidingslijntje tussen tekst en pijl */
  
  margin-left: -1px !important; /* Schuift de knop strak tegen de link aan */
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* 3. ACTIVE STATE: Als 'Products' (of een subpagina) actief is */
.navbar-nav .nav-item .nav-link.active + .dropdown-toggle-split {
  background-color: #1ba1e2 !important; /* <--- VERVANG DIT door jouw exacte blauwcode */
  color: #ffffff !important;            /* Wit pijltje in de blauwe balk */
  
  /* Behoud de zwarte buitenlijnen in de actieve status */
  border-top-color: #000000 !important;
  border-bottom-color: #000000 !important;
  border-right-color: #000000 !important; /* Garandeert de rechterrand in het blauw */
  
  /* Optioneel: het scheidingslijntje binnenin de blauwe knop een zacht witte kleur geven */
  border-left-color: rgba(255, 255, 255, 0.3) !important; 
}

/* 4. HOVER STATES */
.navbar-nav .nav-item .dropdown-toggle-split:hover {
  background-color: #f8f9fa !important;
}
.navbar-nav .nav-item .nav-link.active + .dropdown-toggle-split:hover {
  filter: brightness(0.9); /* Maakt het blauw van de pijl iets donkerder bij hoveren */
}

.ui-dialog .button:active, .ui-dialog .button:focus, .ui-dialog .button:not(:focus):active, .ui-dialog .button:not(:focus):focus, .ui-dialog .form-actions .button:active, .ui-dialog .form-actions .button:focus, .ui-dialog .project__action_button:active, .ui-dialog .project__action_button:focus, .ui-dialog .action-link--icon-trash.action-link:active, .ui-dialog .action-link--icon-trash.action-link:focus, .ui-dialog .ui-widget-content.ui-dialog-buttonpane .button {
    background: #1f9bcf !important;
    border-radius: 0;
    b
}

.ui-dialog, .ui-dialog:focus, .ui-dialog:focus:active, .ui-dialog:focus:hover, .ui-dialog .ui-dialog-titlebar {
    border-radius: 0 !important;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    text-decoration: none;
}


/* Geforceerde styling voor de Webform layover (overschrijft jQuery UI core) */
body .ui-widget-overlay.ui-front {
    background: #000000 !important; /* 'background' i.p.v. 'background-color' verwijdert verborgen basis-afbeeldingen */
    opacity: 0.6 !important; /* Bepaal hier de donkerte (0.1 is heel licht, 0.9 is heel donker) */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
}

/* Herstel en styling van de sluitknop (close button) op de Webform popup */
.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    position: absolute;
    right: 15px; /* Afstand vanaf de rechterkant */
    top: 50%;
    transform: translateY(-50%); /* Zorgt voor perfecte verticale centrering */
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    margin: 0;
}

/* Voeg het kruisje (X) visueel toe via CSS */
.ui-dialog .ui-dialog-titlebar-close::after {
    content: "\00D7"; /* Dit is de Unicode voor een mooi vermenigvuldigingsteken (kruisje) */
    font-size: 32px;
    line-height: 1;
    color: #333333; /* Kleur van het kruisje, pas aan naar wens */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif; /* Zorgt dat het symbool strak gerenderd wordt */
}

/* Optioneel: Een klein hover-effect om hem interactief te maken */
.ui-dialog .ui-dialog-titlebar-close:hover::after {
    color: #007bff; /* Verander naar de blauwe themakleur van je knoppen */
}

.ui-dialog .ui-dialog-title {
    text-transform: capitalize;
    font-weight: 500;
    color: #404040;
}

.privacy p {
    font-size: 12px;
    color: #4a4a4a;
}

.form-control:focus {
    background-color: white;
}

body.full-width main > .container {
    max-width: none !important; 
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

section#latchlock-guide {
    margin-bottom: -17px;
}

h1.display-5 {
    font-size: 27px !important;
}

.page-route-view-blogs-page-1 main {
    padding-top: 40px;
    padding-bottom: 80px;
}


div#block-starterkit-calltoactionlinks, div#block-starterkit-calltoactionlinks-2  {
    padding-right: 40px;
    padding-top: 40px;
}

.page-node-type-article .region-content {
    padding-top: 40px;
    padding-bottom: 30px;
}

.ll-product-page img {
    max-height: 300px;
}

.ll-part-buttons a {
    background: #ff5722;
    color: white;
}

.ll-product-flags .text-primary {
    font-size: 20px;
}

.ll-series-image.video-sidebar {
    padding:0;
    padding-right: 38px;
    border: 0;
    padding-top: 40px;
}

/* Styling voor de submenu's */
.dropdown-menu {
    /* Het zwarte lijntje */
    border: 1px solid #000000; 

    /* Moderne, zachte en gelaagde schaduw */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #1f9bcf;
}


/* Homepage search API */
.path-frontpage .block-views-exposed-filter-blocksearch-results-page-1 {
    padding: 36px;
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    margin-top: 100px;
    border-radius: 12px;
    margin-left: 100px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);

    animation: searchSwoodgeIn 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity, filter;
}

@keyframes searchSwoodgeIn {
    0% {
        opacity: 0;
        transform: translateY(-42px) scale(0.985);
        filter: blur(8px);
    }

    65% {
        opacity: 1;
        transform: translateY(4px) scale(1.002);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.block-views-exposed-filter-blocksearch-results-page-1 .form--inline .form-item {
    float: none;
    margin-right: 0px;
}

.path-frontpage .block-views-exposed-filter-blocksearch-results-page-1 #edit-submit-search-results {
    background: #FF5722;
    border: 1px solid #FF5722;
    width: 100%;
}

.path-frontpage .block-views-exposed-filter-blocksearch-results-page-1 #edit-submit-search-results:hover {
    background: #1f9bcf;
    border: 1px solid #1f9bcf;
}

.path-frontpage .block-views-exposed-filter-blocksearch-results-page-1 #edit-actions {
    margin-bottom: 0px;
}