/* ------------------------- Main Elements ------------------------- */

/* Paddings between sections */
.section + [data-bg-section="dark"],
.section + [data-bg-section="light"] {
    margin: calc(var(--section-padding) / 2) 0;
}

.section + [data-bg-section="dark"]:last-of-type,
.section + [data-bg-section="light"]:last-of-type {
    margin-bottom: -2.5em;
    position: relative;
    z-index: 1;
}

.content-block + .list-polygon {
    padding-top: calc(var(--gap) * 1.66)
}

/* prevent padding on heading included by gutenberg block */
.section:has(.section-separator):not(.section-header) + .content-block {
    padding-top: 0;
}

.section-header:has(.section-separator) + .accordion-faq .section-separator {
    display: none;
}

.section-header:has(.section-separator) + .accordion-faq,
.section-header:has(.section-separator) + .content-block {
    padding-top: 0;
}


/* put back padding on colored sections */
[data-bg-section="dark"]:has(.section-separator) + .content-block,
[data-bg-section="light"]:has(.section-separator) + .content-block  {
    padding-top: calc(var(--section-padding) / 2) !important;
}

/* Pills List */
.pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.pills-list span {
    background-color: var(--color-white);
    padding: 0.5em;
    border-radius: var(--border-radius-s);
    font-weight: 600;
    font-size: var(--copy-size-m);
    line-height: 0.98em;
    color: var(--color-dark);
}

/* Bullet List */
.bullet-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin-bottom: 1em;
    font-weight: 500;
}
.bullet-list .disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--color-white);
    border-radius: var(--border-radius-s);
}

.bullet-list .disc:before {
    content: "";
    position: relative;
    width: 0.5em;
    height: 0.5em;
    background-color: var(--color-primary);
}
/* ------------------------- Heading Animation ------------------------- */
.heading-animation {
    position: relative;
    overflow: hidden;
    max-width: fit-content;
    line-height: 1.28;
    margin: 0 0 0.75rem 0;
    visibility: hidden;
}

/* Animation two lines */
.two-lines-animation {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* gap: 0.5em; */
}

.mask-line-two {
    overflow: hidden;
    display: block;
    /* padding-bottom: 0.75rem; */
}

.line-inner-two {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
}

/* ------------------------- Inner Page ------------------------- */
.section-header {
    padding-bottom: 0;
}

.inner-header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding-bottom: calc(var(--gap) * 3);
    position: relative;
    width: 80%;
}

@media (max-width: 991.98px) {
    .inner-header {
        width: 100%;
    }
}

.inner-header.is-row {
    flex-direction: row;
    gap: 0;
}

.inner-blog {
    padding-bottom: calc(var(--gap) * 3);
    position: relative;
}

.inner-header em,
.inner-blog em {
    color: var(--color-gray);
    font-style: normal;
}

/* ------------------------- Section Intro ------------------------- */
.section-intro {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-intro .section-intro-bg {
    background-image: url("https://display5.com/wp-content/uploads/2026/03/Gradient_1-web.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-b);
    padding: calc(var(--gap) * 5) calc(var(--gap) * 2);
}

.section-intro .section-intro-bg.layout-2 {
    background-image: url("https://display5.com/wp-content/uploads/2026/03/Gradient_3-web.jpg");
    aspect-ratio: 4/2;
}

@media (min-width: 992px) {
    .section-intro .section-intro-bg {
        min-height: 30em;
    }

    .section-intro .section-intro-bg.layout-2 {
        aspect-ratio: unset;
    }
}

.section-intro h2 {
    font-weight: 500;
    line-height: 0.98em;
    font-size: calc(var(--title-size) * 0.45);
}

/* ------------------------- Separators HRs ------------------------- */
.section-separator {
    padding-top: calc(var(--gap) * 1.5);
    padding-bottom: calc(var(--gap) * 3);
    position: relative;
}

.section-separator.no-padding {
    padding-bottom: 0;
}

.section-separator + .row {
    padding-bottom: calc(var(--gap) * 3);
}

.section-separator .separator:after {
    content: "";
    background-color: transparent;
    border-left: 1px solid var(--color-border-black);
    border-right: 1px solid var(--color-border-black);
    border-top: 1px solid var(--color-border-black);
    border-radius: 0.5em 0.5em 0 0;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 0.75em;
}

[data-bg-section="dark"] .separator:after {
    border-left: 1px solid var(--color-border-white);
    border-right: 1px solid var(--color-border-white);
    border-top: 1px solid var(--color-border-white);
}

.section-separator.bottom {
    padding-top: 0;
}

.section-separator.bottom .bottom-line{
    padding-top: calc(var(--gap) * 1.5);
    border-bottom: 1px solid var(--color-border-black);
}

[data-bg-section="dark"] .section-separator.bottom .bottom-line {
    border-bottom: 1px solid var(--color-border-white);
}

.section-separator .row-split {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: calc(var(--gap) * 3);
}

.section-separator .row-intro {
    justify-content: flex-end;
}

.section-separator .row-intro .col {
    width: 40%;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .section-separator .row-intro .col {
        width: 100%;
    }
}

/* ------------------------- Buttons ------------------------- */
.btn .icon {
    width: 3.5em;
    height: 3.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(var(--border-radius-b) - 0.25em);
    transition: width var(--animation-nav-smooth),
                width var(--animation-nav-smooth);
}

.btn .icon.s {
    width: 2em;
    height: 2em;
}

.btn .icon .arrow-up {
    width: 2em;
    height: 2em;
    background: url('../images/icon-arrow-up-right.svg') center no-repeat;
}

.btn .icon.s .arrow-right {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: url('../images/icon-arrow-right.svg') center no-repeat;
    background-size: contain;
}

.btn .icon.s .arrow-left {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: url('../images/icon-arrow-right.svg') center no-repeat;
    background-size: contain;
    transform: rotate(180deg);
}

.btn .text {
    padding: 0 0 0 1em;
}

.btn .text,
.btn .icon {
    position: relative;
    z-index: 2;
}

.btn.bg-white {
    background-color: var(--color-white) !important;
}

.btn:hover .text-dark,
.btn.active .text-dark {
    color: var(--color-white) !important;
}

/* Button primary */
.btn-primary {
    border-radius: var(--border-radius-b);
    color: var(--color-white);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    background-color: var(--background-glass);
    border: 1px solid var(--color-border-white);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    overflow: hidden;
    transition: color 0.35s ease;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.25em; 
    width: 3.5em;
    height: 3.5em;
    background: var(--color-primary);
    border-radius: calc(var(--border-radius-b) - 0.25em);
    transform: translateY(-50%) scaleX(1);
    transform-origin: right center;
    transition: 
        transform 0.45s cubic-bezier(.3, 1, .3, 1),
        width 0.45s cubic-bezier(.3, 1, .3, 1);
    z-index: 0;
}

.btn-primary:hover::before ,
.btn-primary:focus::before,
.btn-primary.active::before {
    width: calc(100% - 0.5em) !important;
}

.btn-primary .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
    background-color: var(--background-glass);
    border: 1px solid var(--color-border-white);
    color: var(--color-white);
}

/* overried bootstrap */
.btn-check:checked+.btn, 
.btn-primary.active, 
.btn-primary.show, 
.btn-primary:first-child:active, 
:not(.btn-check)+.btn-primary:active {
    border-color: var(--color-border-white);
    color: var(--color-dark);
    background-color: var(--background-glass);
}

[data-theme-section="light"] .btn-check:checked+.btn, 
[data-theme-section="light"] .btn-primary.active, 
[data-theme-section="light"] .btn-primary.show, 
[data-theme-section="light"] .btn-primary:first-child:active, 
[data-theme-section="light"] :not(.btn-check)+.btn-primary:active {
    border-color: var(--color-border-black);
    color: var(--color-dark) !important;
    background-color: var(--background-glass);
}

[data-theme-section="dark"] .btn-primary {
    color: var(--color-white);
}

[data-theme-section="light"] .btn-primary,
[data-bg-section="light"] .btn-primary {
    color: var(--color-dark);
    border: 1px solid var(--color-border-black);
}

[data-theme-section="light"] .btn-primary:hover,
[data-theme-section="light"] .btn-primary:focus,
[data-theme-section="light"] .btn-primary.active,
[data-bg-sectio="light"] .btn-primary:hover,
[data-bg-sectio="light"] .btn-primary:focus,
[data-bg-sectio="light"] .btn-primary.active {
    color: var(--color-white);
    border: 1px solid var(--color-border-black);
}

/* Button Secondary */
.btn-secondary {
    border-radius: var(--border-radius-b);
    color: var(--color-white);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    background-color: var(--background-glass);
    border: 1px solid var(--color-border-white);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    transition: color 0.35s ease;
}

.btn-secondary::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.25em; 
    width: 3.5em;
    height: 3.5em;
    background: var(--color-secondary);
    border-radius: calc(var(--border-radius-b) - 0.25em);
    transform: translateY(-50%) scaleX(1);
    transform-origin: right center;
    transition: 
        transform 0.45s cubic-bezier(.3, 1, .3, 1),
        width 0.45s cubic-bezier(.3, 1, .3, 1);
    z-index: 0;
}

.btn-secondary:hover::before,
.btn-secondary:focus::before,
.btn-secondary.active::before {
    width: calc(100% - 0.5em);
}

.btn-secondary .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active {
    background-color: var(--background-glass);
    border: 1px solid var(--color-border-white);
    color: var(--color-white);
}

[data-theme-section="light"] .btn-secondary,
[data-bg-section="light"] .btn-secondary {
    color: var(--color-dark);
    border: 1px solid var(--color-border-black);
}

[data-theme-section="light"] .btn-secondary:hover,
[data-theme-section="light"] .btn-secondary.active,
[data-bg-sectio="light"] .btn-secondary:hover,
[data-bg-sectio="light"] .btn-secondary.active {
    color: var(--color-white);
}

[data-theme-section="light"] .btn-secondary:focus
[data-bg-sectio="light"] .btn-secondary:focus {
    color: var(--color-dark);
}

/* override Bootstrap */
.btn-check:checked+.btn-secondary, 
.btn-secondary.active, 
.btn-secondary.show, 
.btn-secondary:first-child:active, 
:not(.btn-check)+.btn-secondary:active {
    color: var(--color-white);
    border-color: var(--color-border-white);
    background-color: var(--background-glass);
}


/* Button Loadmore */
.loadmore {
    background-color: var(--color-primary) !important;
    color: var(--color-white);
    padding: 1em !important;
    border-radius: var(--border-radius-b);
}

.loadmore:hover,
.loadmore:focus,
.loadmore.active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* ------------------------- Header ------------------------- */
.main-nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    pointer-events: all;
    transition: padding var(--animation-nav);
    isolation: isolate;
}

.main-nav-bar .row {
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.main-nav-bar .logo {
    width: 216px;
    height: 38px;
    display: block;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

[data-theme-section="dark"] .main-nav-bar .logo {
    background-image: url('../images/logo-display5-white.svg');
}

[data-theme-section="light"] .main-nav-bar .logo {
    background-image: url('../images/logo-display5.svg');
}

[data-scrolling-started="true"] header[data-theme-section="light"] .main-nav-bar .logo {
    background-image: url('../images/logo-display5-white.svg');
}

.main-nav-bar .logo svg {
    width: 7em;
}

.main-nav-bar .logo svg path {
    fill: var(--color-dark);
    transition: fill var(--animation-nav);
}

/* Background change */
.main-nav-bar .overlay-background {
    background-color: transparent;
    transition: background-color var(--animation-nav-smooth);
}

/* Scrolling Started */
[data-scrolling-started="true"] .main-nav-bar {
    padding: calc(var(--gap) * 0) var(--container-padding);
}

@media (max-width: 991.98px) {
    [data-scrolling-started="true"] .main-nav-bar {
        padding: calc(var(--gap) * 0.5) var(--container-padding);
    }
}

[data-scrolling-started="true"] .main-nav-bar .overlay-background {
    background-color: rgba(var(--color-dark-rgb), 0.34);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    border-bottom: 1px solid var(--color-border-black)
}

[data-scrolling-started="true"] .main-nav-bar ul.nav,
[data-scrolling-started="true"] .main-nav-bar ul.nav::before {
    border-radius: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: transparent;
    border: 0;
}

[data-scrolling-started="true"] .main-nav-bar ul.sublevel {
    background-color: rgba(var(--color-dark-rgb), 0.34);
    border: 1px solid var(--color-border-black);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
}

[data-scrolling-started="true"] .main-nav-bar .btn-primary {
    background-color: var(--color-white) !important;
    color: var(--color-dark);
    border: 1px solid var(--color-border-white);
}

[data-scrolling-started="true"] .main-nav-bar .btn-primary:hover,
[data-scrolling-started="true"] .main-nav-bar .btn-primary.active {
    color: var(--color-white);
}

[data-scrolling-started="true"] .main-nav-bar .btn-primary:focus {
    color: var(--color-white);
}

[data-scrolling-started="true"] .main-nav-bar .btn-primary.active {
    background-color: var(--color-white);
}

[data-scrolling-started="true"] .main-nav-bar .btn .icon,
[data-scrolling-started="true"] .main-nav-bar .btn-primary::before {
    width: 2.5em;
    height: 2.5em;
}

[data-scrolling-started="true"] header[data-theme-section="light"] 
.main-nav-bar .nav-link .nav-link-click span,
[data-scrolling-started="true"] header[data-theme-section="light"] .main-nav-bar ul.sublevel li {
    color: var(--color-white);
}

/* ------------------------- Navigation ------------------------- */
nav {
    position: relative;
}

nav[aria-label="navigation desktop"] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 991.98px) {
    nav[aria-label="navigation desktop"] {
        align-items: end;
    }
}

.has-children .arrow {
    display: inline-block;
    background: url('../images/icon-chevron-down.svg') center no-repeat;
    width: 1em;
    height: 1em;
    transition: all var(--animation-smooth);
}

[data-theme-section="light"] .has-children .arrow {
    background-image: none;
    background:  var(--color-dark);    
    -webkit-mask-image: url("../images/icon-chevron-down.svg");
    mask-image: url("../images/icon-chevron-down.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

[data-scrolling-started="true"] [data-theme-section="light"] .has-children .arrow {
    background:  var(--color-white); 
}

.main-nav-bar ul.nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    justify-content: center;
    width: fit-content;
    transition: background-color var(--animation-nav-smooth);
}

.main-nav-bar ul.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    background-color: var(--background-glass);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-white);
    transition: background-color var(--animation-nav-smooth);
}

[data-theme-section="light"] .main-nav-bar ul::before,
[data-theme-section="light"] .main-nav-bar .sublevel {
    border: 1px solid var(--color-border-black);
}

.nav {
    height: 66px;
    align-items: center;
}

.main-nav-bar .nav-link {
    display: flex;
    transition: all var(--animation-nav) 0.1s;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.main-nav-bar .nav-link .nav-link-click {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--btn-height-small);
    position: relative;
    cursor: pointer;
}

.main-nav-bar .nav-link .nav-link-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 calc(var(--copy-size-m) * 1);
    gap: 0.05em;
}

.main-nav-bar .nav-link .nav-link-click span {
    font-size: var(--copy-size-m);
    font-weight: 400;
    margin-top: 0.05em;
    white-space: nowrap;
    text-shadow: 0px calc(var(--btn-shadow-distance) * 1.5) transparent;
    transform: translateY(0em) rotate(0.001deg);
    transition: text-shadow var(--animation-smooth), color var(--animation-nav);
    line-height: 1.1;
}

[data-theme-section="dark"] .main-nav-bar .nav-link .nav-link-click span {
    color: var(--color-white);
}

[data-theme-section="light"] .main-nav-bar .nav-link .nav-link-click span {
    color: var(--color-dark);
}

.main-nav-bar:hover .nav-link .nav-link-click span {
    transition: text-shadow var(--animation-smooth), color 0s linear;
}

[data-links-no-hover="active"] .main-nav-bar:hover .nav-link .nav-link-click span {
    transition: text-shadow var(--animation-smooth), color var(--animation-nav);
}

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

        .main-nav-bar .nav-link .nav-link-click:hover span {
            transition: all var(--animation-smooth);
            transform: translateY(calc(var(--btn-shadow-distance) * -1)) rotate(0.001deg);
            color: transparent;
        }

        [data-theme-section="dark"] .main-nav-bar .nav-link .nav-link-click:hover span {
            text-shadow: 0px var(--btn-shadow-distance) var(--color-white);
        }

        [data-theme-section="light"] .main-nav-bar .nav-link .nav-link-click:hover span {
            text-shadow: 0px var(--btn-shadow-distance) var(--color-dark);
        }

        [data-scrolling-started="true"] header[data-theme-section="light"] .main-nav-bar .nav-link .nav-link-click:hover span {
            text-shadow: 0px var(--btn-shadow-distance) var(--color-white);
        }
    }
}

.main-nav-bar .sublevel {
    border-radius: var(--border-radius);
    visibility: hidden;
    position: absolute;
    top: 3em;
    top: calc(100% + 0.5rem);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 1em;
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    background-color: var(--background-glass);
    border: 1px solid var(--color-border-white);
    width: fit-content;
    transition: background-color var(--animation-nav-smooth);
}

.main-nav-bar .has-children:hover .arrow {
    transform: rotate(180deg);
}

@media (min-width: 1025px) {
    .main-nav-bar .sublevel {
        visibility: visible;
        overflow: hidden;
        clip-path: inset(0 0 100% 0);
        will-change: clip-path;
    }

    .main-nav-bar .sublevel li {
        display: block;
        transition: var(--animation-primary);
    }

    [data-theme-section="dark"] .main-nav-bar .sublevel li {
        color: var(--color-white);
    }

    [data-theme-section="light"] .main-nav-bar .sublevel li {
        color: var(--color-dark);
    }

    .main-nav-bar .sublevel li:hover {
        color: var(--color-primary) !important;
    }

    .main-nav-bar .has-children:hover .sublevel {
        visibility: visible;
    }
}

/* ------------------------- Mobile Menu / Hamburguer ------------------------- */
.main-nav-bar .hamburguer {
    width: 3em;
    height: 3em;
    border-radius: var(--border-radius-all);
    background-color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

/* [data-scrolling-started="true"] .main-nav-bar .hamburguer {
    margin: 0.5em 0;
} */

.overlay.side-nav-back {
    opacity: 0;
    visibility: hidden;
    transition: all var(--animation-slow);
    pointer-events: all;
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    transition-delay: 0.3s;
    background-color: rgba(var(--color-dark-rgb), 0.66);
}

[data-navigation-status="active"] .side-nav-back {
    transition-delay: 0s;
    opacity: 1;
    visibility: visible;
}

.side-nav-box {
    position: relative;
    right: 0;
    transform: translateX(111%);
    transition: transform var(--animation-slow);
    pointer-events: all;
    transition-delay: 0.1s;
    min-width: 33.333%;
    height: 100%;
}

[data-navigation-status="active"] .side-nav-box {
    transform: translateX(11%);
    transition-delay: 0s;
}

@media screen and (max-width: 992px) {
   .side-nav-box {
      width: 90%;
      min-width: 90%;
      max-width: 90%;
   }
}

.close {
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    position: absolute;
    top: calc(var(--gap) * 1.1);
    right: var(--container-padding);
    margin-right: calc(var(--bs-gutter-x) * 0.5);
}

.close-inner {
    width: 2em;
    height: 2em;
    border-radius: var(--border-radius-all);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--color-offwhite)
}

.side-nav {
    height: 100%;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    padding-top: calc((var(--gap) * 1.1) + var(--btn-height-small));
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    z-index: 2;
    position: relative;
}

.side-nav .row-links-primary {
    /* height: 100%; */
    padding: var(--gap) var(--container-padding);
    margin: 0;
}

@media screen and (min-height: 720px) {
    .side-nav .row-links-primary {
        padding-top: 8vh;
    }
}

.side-nav .eyebrow {
    padding-bottom: 1em;
    color: var(--color-dark);
}

.side-nav .row-links-primary .col {
    width: 100%;
}

.side-nav .row-links-primary ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5em;
}

.side-nav .row-links-primary .nav-link {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.side-nav .row-links-primary .nav-link-click {
    display: flex;
    width: 100%;
    padding: 0.25em 0;
    transition: all var(--animation-smooth);
    position: relative;
}

.side-nav .row-links-primary .nav-link-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 0.5em;
}

.side-nav .nav-link .arrow {
    background: transparent;
    background-color: var(--color-dark) !important;
    mask-image: url('../images/icon-chevron-down.svg');
    -webkit-mask-image: url('../images/icon-chevron-down.svg'); 
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    transition: all var(--animation-smooth);
}

.side-nav .nav-link.is-open .arrow {
    transform: rotate(180deg);
    background-color: var(--color-primary);
}

.side-nav .row-links-primary ul .nav-link span {
    font-weight: 400;
    font-size: calc(var(--title-size) * 0.4);
    line-height: 1.2;
    color: var(--color-dark);
    transition: var(--animation-primary);
}

.side-nav .nav-link.is-open span {
    color: var(--color-primary) !important;
}

/* mobile sublevel */
.mobile-nav .nav-link {
    position: relative;
}

.mobile-nav .sublevel {
    position: relative;
    z-index: 0;
}

.mobile-nav .nav-link-click {
    position: relative;
    z-index: 2;
    background: var(--color-white);
}

.mobile-nav .sublevel {
    height: 0;
    overflow: hidden;
    will-change: height;
    padding-top: 0.5em;
}

.mobile-nav .sublevel a {
    display: block;
    font-size: 1.25em;
    margin-bottom: 0.35em;
    line-height: 1;
}
/* end of mobile sublevel */

.side-nav .row-company-info,
.side-nav .row-links-secondary {
    position: relative;
    flex-shrink: 0;
    padding: max(var(--gap), 6vh) var(--container-padding);
    gap: var(--gap);
    margin: 0;
}

.side-nav .row-company-info .information {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.side-nav .row-company-info .information p {
    color: var(--color-dark);
}

.side-nav .row-company-info .social {
    padding-top: 2em;
}

.side-nav .row-links-secondary .col {
    min-width: 10em;
    width: 100%;
}

.side-nav .row-links-secondary ul {
    display: flex;
    gap: 1.5em;
}


@media screen and (max-width: 1024px) {

    .side-nav .row-links-primary ul .nav-link span {
        font-size: calc(var(--title-size) * 0.475);
    }

}

/* CTA */
.col-cta {
    display: flex;
}

@media (max-width: 1399.98px) {
    .col-cta {
        display: none;
    }
    .col-nav {
        width: 80%;
    }
    nav[aria-label="navigation desktop"] {
        align-items: end;
    }
}

@media (max-width: 991.98px) {
    .col-nav {
        width: unset;
    }
}

@media screen and (max-width: 1024px) {

   .main-nav-bar {
      padding: calc(var(--gap) * 0.5em) var(--container-padding);
   }

   .main-nav-bar ul,
   .main-nav-bar nav .deco-line {
      display: none;
   }
}

@media (max-width: 991.98px) {
    .main-nav-bar {
        padding: calc(var(--gap) * 0.5) var(--container-padding);
    }
}

/* ------------------------- Hero Banner ------------------------- */
.section-home-header {
    overflow: hidden;
    padding: 0;
    /* min-height: 100vh; */
}

.section-home-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://display5.com/wp-content/uploads/2026/03/Gradient_2-web.jpg');
    background-size: cover; 
    background-repeat: no-repeat; 
    z-index: -1; 
    transform: rotate(180deg);
    transform-origin: center;
}

.section-home-header .row-title {
    padding-top: calc(var(--section-padding) * 3);
    align-items: flex-end;
    padding-bottom: calc(var(--gap) * 3);
    position: relative;
}

.section-home-header .row-content {
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: var(--section-padding);
}

.section-home-header .row-content-inner {
    width: 66.66666667%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-right: var(--container-padding);
}

.section-home-header .row-content .col-cta {
    display: flex;
    justify-content: flex-end;
    width: 30%;
}

.section-home-header .row-content .col-content {
    width: 70%;
}

.section-home-header .video-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 720px;
    width: 66.66666667%;
    margin-top: var(--section-padding);
    margin-right: var(--container-padding);
}

.section-home-header .video {
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.section-home-header .video video {
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1900px) {
    .section-home-header .video-wrapper {
        height: 700px;
    }
}

@media (max-width: 1800px) {
    .section-home-header .video-wrapper {
        height: 680px;
    }
}

@media (max-width: 1700px) {
    .section-home-header .video-wrapper {
        height: 640px;
    }
}

@media (max-width: 1600px) {
    .section-home-header .video-wrapper {
        height: 600px;
    }
}

@media (max-width: 1500px) {
    .section-home-header .row-title {
        padding-bottom: calc(var(--gap) * 5);
    }
    .section-home-header .video-wrapper {
        height: 560px;
    }
}

@media (max-width: 1260px) {
    .section-home-header .row-title {
        padding-bottom: calc(var(--gap) * 12);
    }

    .section-home-header .row-content-inner,
    .section-home-header .video-wrapper  {
        width: 80%;
    }
}

@media (max-width: 991.98px) {
    .section-home-header {
        min-height: 100%;
    }
    .section-home-header .row-title {
        padding-top: calc(var(--section-padding) * 2);
        padding-bottom: calc(var(--gap) * 12);
    }

    .section-home-header .row-content .col-cta,
    .section-home-header .row-content .col-content {
        width: 100%;
        justify-content: flex-start;
    }

    .section-home-header .video-wrapper {
        width: calc(100% - (var(--container-padding) * 2));
        margin-left: var(--container-padding);
        height: 450px;
    }

    .section-home-header .row-content-inner {
        width: 100%;
        margin-right: 0;
        gap: 1em;
    }

    .section-home-header .row-content {
        padding: 0;
        margin: 0;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: calc(var(--gap) * 4);
    }
}

@media (max-width: 575.98px) {
    .section-home-header .row-title {
        padding-bottom: calc(var(--gap) * 6);
    }
}

/* ------------------------- Footer ------------------------- */
.section-footer {
    padding: 0;
    padding-top: 2.5em !important;
    padding-bottom: 0 !important;
    background: url('https://display5.com/wp-content/uploads/2026/03/Gradient_2-web.jpg') center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.section-footer * {
    color: var(--color-white);
}

.section-footer .col {
    padding-top: calc(var(--gap) * 2.25);
    padding-bottom: calc(var(--gap) * 2.25);
    position: relative;
}

.section-footer h2.xs {
    font-size: calc(var(--title-size) * 0.3);
}

.section-footer .company-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.75);
}

.section-footer .company-info .logo {
    padding-top: calc(var(--gap) * 4);
    width: 40%;
}

.section-footer .company-info .logo img {
    width: 100%;
}

.section-footer .row-links .eyebrow {
    color: rgba(var(--color-white-rgb), 0.66);
    padding-bottom: calc(var(--gap) * 1);
}

@media (max-width: 991.98px) {
    .section-footer .row-links .eyebrow {
        padding-bottom: 0;
    }
}

.section-footer .row-links .footer-nav li {
    font-size: 0.88em;
}

.section-footer .row-links .footer-nav li a {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    gap: 0.38em;
}

.section-footer .row-links .footer-nav li .icon {
    border-bottom-left-radius: var(--border-radius-xs);
    opacity: 0.4;
    width: 0.65em;
    height: 0.5em;
    position: relative;
    border-bottom: 1px solid var(--color-white);
    border-left: 1px solid var(--color-white);
    transition: opacity 0.4s;
}

.section-footer .row-links .footer-nav li:hover .icon {
    opacity: 1;
}

.section-footer .row-links .footer-nav li .icon-inner {
    opacity: 0;
    filter: blur(2px);
    position: absolute;
    bottom: 0px;
    left: 0px;
    transition: opacity 0.4s;
}

.section-footer .row-links .footer-nav li:hover .icon-inner {
    opacity: 0.4;
}

.section-footer [aria-label="navigation footer primary"] {
    display: flex;
    flex-direction: column; 
    gap: 0.5em;
}

.section-footer [aria-label="navigation footer primary"] .eyebrow {
    padding-bottom: 0 !important;
}

.section-footer [aria-label="navigation footer primary"] a {
    color: rgba(var(--color-white-rgb), 0.66) !important;
    transition: var(--animation-primary);
}

.section-footer [aria-label="navigation footer primary"] a:hover {
    color: rgba(var(--color-white-rgb), 1) !important;
}

.section-footer .row-credits {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.section-footer .border-top {
    background-color: var(--color-border-white);
    color: transparent;
}

.section-footer .row-credits * {
    color: rgba(var(--color-white-rgb), 0.66);
}

.section-footer .row-credits .col-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25em;
}

.section-footer .row-credits .col-links li a {
    font-size: var(--copy-size-m);
    transition: var(--animation-primary);
}

.section-footer .row-credits .col-links li a:hover {
    color: rgba(var(--color-white-rgb), 1);
}

@media (max-width: 991.98px) { 
    .section-footer .row-credits .col-copyright,
    .section-footer .row-credits .col-madeby {
        padding-top: 0;
    }

    .section-footer .row-credits .col-links ul {
        justify-content: center;
    }
}

/* ------------------------- Logos Slider ------------------------- */
.logos-slider .logo {
    padding: 1em;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    height: 3.75em;
}
.logos-slider .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%);
}

.logos-slider .slick-track {
    display: flex;
    gap: 2rem;
}

.logos-slider .slick-list {
    overflow: visible;
}

/* ------------------------- B5 Accordion  ------------------------- */
.accordion {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
}

.accordion-item {
    color: var(--color-dark);
    background-color: transparent;
    border: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.accordion-button {
    border-radius: var(--border-radius-b) !important;
    padding: 1.5em;
    font-size: var(--copy-size-l);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: none;
}

.accordion-button::after {
    content: "\f00d";
    font-family: "Font Awesome 7 Pro";
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    transform-origin: center;
    transition: transform 0.25s ease;
    transform: rotate(-45deg);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
    background-image: none;
}

.accordion-button:focus {
    box-shadow: none;
    background-color: var(--color-white);
}

.accordion-body {
    padding: var(--gap);
}

/* ------------------------- List  ------------------------- */
.card-polygon {
    position: relative;
    background: var(--color-white);
    border-radius: var(--border-radius-b);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(var(--gap) * 0.5);
    padding: calc(var(--gap) * 1.5) var(--gap);
    /* min-height: 19em; */
    aspect-ratio: 4/3;
}

.card-polygon::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-image: url(../images/shape-polygon.svg);
    background-repeat: no-repeat;
    transition: background-image 0.2s ease;
}

.card-polygon > * {
    position: relative;
    z-index: 2;
}

.card-polygon .icon {
    width: 1.50em;
    height: 1.50em;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-xs);
    margin-bottom: calc(var(--gap) * 1);
}

.card-polygon .number {
    position: absolute;
    top: 2em;
    right: 2em;
    font-size: var(--copy-size-m);
    color: var(--color-primary);
}

.card-polygon h2 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 20px;
}

/* when it's a link */
.card-polygon:is(a) {
    transition: background-color 0.2s ease;
}

.card-polygon:is(a):hover {
    background-color: var(--color-dark);
}

.card-polygon:is(a):hover h3 {
    color: var(--color-white);
}

.card-polygon:is(a):hover::before {
    background-image: url(../images/shape-polygon-dark.svg);
}

/* ------------------------- Grid Content ------------------------- */
.col-card-wrapper {
    min-height: 100%;
}

.grid-content .col-card {
    padding: var(--gap);
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: var(--border-radius-b);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(var(--gap) * 0.5);
    transition: var(--animation-smooth);
    min-height: 18em;
    height: 100%;
}

.grid-content[data-bg-section="dark"] .col-card {
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
}

.grid-content[data-bg-section="light"] .col-card  {
    background-color: var(--color-offwhite);
    border: 1px solid var(--color-offwhite);
}

@media (max-width: 991.98px) { 
    .grid-content .col-card {
        aspect-ratio: 4 / 3;
        min-height: auto;
        height: auto;
    }
}

.grid-content .col-card:hover {
    background-color: rgba(var(--color-black-rgb), 0.1);
    border: 1px solid rgba(var(--color-black-rgb), 0);
}

.grid-content[data-bg-section="dark"] .col-card:hover {
    border: 1px solid var(--color-border-white);
    background-color: var(--color-dark)
}

.grid-content .col-card > * {
    color: var(--color-dark);
}

.grid-content[data-bg-section="dark"] .col-card > * {
    color: var(--color-white);
}

.grid-content .col-card a:hover {
    color: var(--color-primary);
}

.grid-content .link .link-click::before {
    background-color: var(--color-primary);
}

/* bento */
.grid-content.bento .col-card {
    padding: calc(var(--gap) * 2) var(--gap);
    min-height: 100%;
    height: 100%;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);

    grid-template-areas:
        "card1 card2 image"
        "card3 card4 image"
        "card5 card4 image";
}

.bento-grid-4cols {
    grid-template-areas:
        "card1 card2 image"
        "card3 card4 image";
}

.card-1 { grid-area: card1; }
.card-2 { grid-area: card2; }
.card-3 { grid-area: card3; }
.card-4 { grid-area: card4; }
.card-5 { grid-area: card5; }

.bento-item-image {
    grid-area: image;
}

.bento-item-image figure,
.bento-item-image img{
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
}

@media (max-width: 991px) {
    .grid-content.bento .col-card {
        aspect-ratio: unset;
        padding: calc(var(--gap) * 3) var(--gap);
    }
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: none; /* kill desktop layout */
    }

    /* Reset all card positioning */
    .bento-grid > * {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .bento-item-image {
        grid-column: span 2;
    }

    .bento-item-image figure,
    .bento-item-image img {
        width: 100%;
        height: auto; 
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 576px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item-image {
        grid-column: span 1;
    }

    .bento-item-image figure,
    .bento-item-image img {
        aspect-ratio: 16 / 9; 
    }
}
/* ------------------------- List Card Image ------------------------- */
.list-card-image .col-card {
    border: 1px solid var(--color-border-black);
    border-radius: var(--border-radius-b);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
    transition: var(--animation-smooth);
    height: 100%;
    min-height: 18em;
    position: relative;
    clip-path: border-box;
    overflow: hidden;
}

.list-card-image .col-card.is-white {
    border: 0;
    background-color: var(--color-white);
}

.list-card-image .col-card h3 {
    transition: var(--animation-smooth);
}

.list-card-image a.col-card:hover h3 {
    color: var(--color-primary)
}

.list-card-image .card-content {
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
}

.list-card-image .card-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
    clip-path: border-box;
}

.list-card-image .col-card.is-white .card-image {
    aspect-ratio: unset;
    height: 11.25em;
}

.list-card-image .card-image figure {
    width: 100%;
    height: 100%;
}

.list-card-image .card-image figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--animation-smooth);
}

.list-card-image a.col-card:hover .card-image img {
    transform: scale(1.1);
}

.list-card-image-slider .col-slide {
    padding: 0 calc(1.5em * 0.5);
}

@media (min-width: 992px) {
    .list-card-image-slider .col-slide {
        padding: 0 calc(3em * 0.5);
    }
}

/* ------------------------- CTA Footer ------------------------- */
.cta-footer {
    padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding) !important;
    background-image: url("../images/logo-shape.svg");
    background-repeat: no-repeat;
    background-position: right 0% top 35%;
    background-size: contain;
}

.cta-footer em {
    font-style: normal;
    color: var(--color-primary);
}

@media (max-width: 575.98px) {
    .cta-footer {
        background-position: right -70% top 35%;
    }
}

/* ------------------------- List Icons ------------------------- */
.list-icons .col-list {
    border-radius: var(--border-radius-b);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    min-height: 100%;
    position: relative;
    background-color: var(--color-white);
    padding: var(--gap);
}

.list-icons .col-list .list-icon {
    font-size: 2em;
    color: var(--color-primary);
}

.list-icons .col-list .list-icon i {
    justify-content: flex-start;
}

.list-icons .col-list .col-row-content {
    gap: 0;
}

.list-icons .pills-list span {
    background-color: var(--color-offwhite);
}

[data-bg-section="dark"].list-icons .col-list {
    background-color: var(--color-dark-gray);
}

/* ------------------------- Video Training ------------------------- */
.video-training .table-contents {
    background-color: var(--color-dark);
    border-radius: var(--border-radius-b);
    padding: calc(var(--gap) * 1.5);
}

.video-training .table-contents > * {
    color: var(--color-white);
}

.video-training .table-contents ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.video-training .table-contents li {
    border-bottom: 1px solid var(--color-border-white);
    padding-bottom: var(--gap);
}

.video-training .table-contents li a {
    display: flex;
    gap: var(--gap);
    align-items: center;
    font-size: var(--copy-size-xl);
    transition: var(--animation-smooth);
}

.video-training .table-contents li a:hover {
    color: var(--color-primary);
}

.video-training .table-contents li a > *{
    flex: 0 0 auto;
}

.video-training .number {
    width: 2.5em;
    height: 2.5em;
    border-radius: var(--border-radius);
    background-color: var(--color-dark-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.video-training .row-videos {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 3);
}

.video-training .row-video-lesson {
    background-color: var(--color-white);
    border-radius: var(--border-radius-b);
    padding: calc(var(--gap) * 2) var(--gap);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.video-training .row-video-lesson .video-thumb {
    width: calc(55% - var(--gap));
    border-radius: var(--border-radius);
    overflow: hidden;
    clip-path: border-box;
    aspect-ratio: 4/3;
}

.video-training .row-video-lesson .video-thumb img,
.video-training .row-video-lesson .video-thumb iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-training .row-video-lesson .video-thumb.no-ratio {
    aspect-ratio: unset !important;
}

.video-training .row-video-lesson .video-thumb iframe {
    aspect-ratio: 16/9;
}

.video-training .row-video-lesson .content {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.video-training .row-video-lesson .row-title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
}

.video-training .row-video-lesson .number {
    background-color: var(--color-light-blue);
}

.video-training .row-video-lesson .title {
    font-weight: 500;
    font-size: calc(var(--title-size) * 0.3);
    line-height: 0.9;
    flex: 1;
}

.video-training .row-video-lesson .link .link-click {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--copy-size-m);
}

.video-training .row-video-lesson .link .icon {
    width: 1em;
    height: 1em;
    background: url("../images/icon-plus.svg") center no-repeat;
    transition: var(--animation-smooth);
}

.video-training .row-video-lesson .link-click[aria-expanded="true"] .icon{
    rotate: 45deg;
}

.video-training .row-topics {
    background-color: var(--color-white);
    border-radius: var(--border-radius-b);
    padding: var(--gap);
    margin-top: var(--gap);
}

@media (max-width: 767.98px) {
    .video-training .row-video-lesson .video-thumb {
        width: 100%;
    }

    .video-training .row-video-lesson .content {
        width: 100%;
    }
}

/* ------------------------- List Horizontal ------------------------- */
.section:has(.section-separator) + .list-horizontal {
    padding-top: 0 !important;
}
.list-horizontal .row-list {
    display: flex;
    gap: 3em;
    flex-wrap: nowrap;
}

.list-horizontal .row-list .col-logo {
    flex: 2 1 0%;
}

.list-horizontal .row-list .col-logo .logo {
    padding: 1em;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    height: 6em;
}

.list-horizontal .row-list .col-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.list-horizontal .col-partner-name {
    flex: 3 1 0%;
}

.list-horizontal .col-description {
    flex: 5 1 0%;
}

.list-horizontal .col-link {
    flex: 2 1 0%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media screen and (max-width: 1024px) {
    .list-horizontal .row-list {
        flex-wrap: wrap;
        gap: 1em 2em;
    }

    .list-horizontal .row-list .col-logo {
        flex: 1 1 25%;
    }

    .list-horizontal .col-partner-name {
        flex: 1 1 calc(75% - 2em);
    }

    .list-horizontal .col-description {
        flex: 1 1 75%;
        margin-left: calc(25% + 2em);
    }

    .list-horizontal .col-link {
        flex: 1 1 75%;
        margin-left: calc(25% + 2em);
    }
}

/* ------------------------- Comparison Table ------------------------- */
.comparison-table .list-check {
    border-top: 1px solid var(--color-border-white);
    padding: var(--gap) 0;
    margin-top: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.list-check  .check-line {
    border-bottom: 1px solid var(--color-border-white);
    color: var(--color-white);
    display: flex;
    gap: calc(var(--gap) * 0.5);
    padding-bottom: var(--gap);
    line-height: 1;
}

.list-check  .check-line > * {
    flex: 0 0 auto;
}

.list-check  .check-line .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: var(--border-radius-s);
}

.list-check  .check-line .icon.checked {
    border: 1px solid var(--color-border-white);
    background-color: var(--color-primary);
    background-image: url("../images/icon-check.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.list-check  .check-line .icon.unchecked {
    border: 1px solid var(--color-border-white);
    background-color: var(--color-white);
    background-image: url("../images/icon-dash.svg");
    background-repeat: no-repeat;
    background-position: center;
}

/* ------------------------- Image Wide ------------------------- */
.wide-image figure {
    position: relative;
    display: block;
}

.wide-image img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-b);
}

/* ------------------------- Blog ------------------------- */
.blog .blog-items .blog-card-item {
    margin-bottom: calc(var(--gap) * 2.75);
}

.blog-featured .blog-featured-card,
.blog .blog-card {
    padding: var(--gap);
    border-radius: var(--border-radius-b);
    display: flex;
    gap: calc(var(--gap) * 3);
    transition: var(--animation-fast);
    background-color: var(--color-white);
}

.blog .blog-card .eyebrow,
.blog-featured .blog-featured-card .eyebrow {
    background: var(--color-offwhite);
}

.blog[data-bg-section="light"] .blog-card {
    background-color: var(--color-offwhite);
}

.blog[data-bg-section="light"] .blog-card .eyebrow {
    background: var(--color-white);
}

.blog-featured-card > * {
    flex: 0 0 auto;
    width: calc(50% - (var(--gap) * 1.5));
}

@media (max-width: 991.98px) {
    .blog-featured .blog-featured-card {
        flex-direction: column;
        gap: calc(var(--gap) * 1.5);
    }
    .blog-featured-card > * {
        width: 100%;
    }
}

.blog .image figure {
    position: relative;
    display: block;
    border-radius: var(--border-radius-b);
    clip-path: border-box;
    overflow: hidden;
    aspect-ratio: 3/2;
}

.blog-featured .image figure {
    width: 100%;
    height: 100%;
}

.blog .image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    transition: var(--animation-fast);
}

.blog .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--gap) * 1.5);
}

.blog .blog-card {
    flex-direction: column;
    gap: calc(var(--gap) * 1.5);
}

/* title animation */
.blog-featured-card h2 {
    line-height: 1.1;
}

.blog .title {
    background-image: linear-gradient(currentColor,currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition-property: background-size;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.16,1,.3,1);
}

@media (hover: hover) and (pointer: fine) {
    :is(.blog-featured-card:hover,.blog-featured-card:focus-visible) .title,
    :is(.blog-card:hover,.blog-card:focus-visible) .title {
        background-size: 100% 2px;
    }
}

/* hovers */
.blog .blog-featured-card:hover .arrow-right,
.blog .blog-card:hover .arrow-right{
    rotate: -45deg;
}

.blog .blog-featured-card:hover .image img,
.blog .blog-card:hover .image img {
    transform: scale(1.05);
}

/* filter */
.blog .filter-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.blog .filters {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: flex-end;
    text-align: right;
}

.blog .filters .filter-item {
    align-items: center;
    background: var(--color-white);
    border-radius: var(--border-radius);
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--copy-size-s);
    letter-spacing: 0;
    line-height: 1em;
    padding: calc(var(--gap) * 0.5) calc(var(--gap) * 0.4);
    text-transform: uppercase;
    transition: var(--animation-nav-smooth);
    width: -moz-fit-content;
    width: fit-content;
}

.blog .filters .filter-item:hover,
.blog .filters .filter-item:focus,
.blog .filters .filter-item.active {
    background: var(--color-dark);
    color: var(--color-white);
}

.blog .blog-list-wrapper {
    padding-top: calc(var(--gap) * 3);
}

.blog-single .blog-items {
    min-height: 50vh;
}

/* blog single */
.blog-single {
    padding-top: calc(var(--gap) * 4);
}

.blog-single .meta-data {
    display: flex;
    gap: 1em;
    align-items: center;
}

.blog span.meta-title {
    color: var(--color-gray);
    letter-spacing: calc(0.75em * 0.12);
    text-transform: uppercase;
    font-size: var(--copy-size-s);
    font-weight: 600;
    line-height: 0.86;
}

.blog-single .image-thumb {
    aspect-ratio: 16 / 9;
    height: 80vh;
    min-height: 420px;
    max-height: 620px;
    width: 100%;
}

.blog-single .blog-sidebar .meta-data.reading-time,
.blog-single .blog-sidebar .meta-data.share-social{
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: var(--gap)
}

@media (max-width: 991.98px) {  
    .blog-single {
        padding-top: calc(var(--gap) * 2);
    }
    
    .blog-single .image-thumb {
        aspect-ratio: 3 / 2;
        height: auto;
        min-height: auto;
        max-height: auto;
    }
}

/* Copy URL button */
.copy-url-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--animation-fast);
}

.copy-url-btn.copied {
    color: var(--color-primary) !important;
}

.copy-url-btn.copied i {
    animation: checkPulse 0.6s ease-in-out;
}

@keyframes checkPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* buttons  */
.blog .go-link .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    width: fit-content;
    gap: var(--gap);
}

.blog .go-link.read-more .btn {
    width: 100%;
}

.blog .go-link .icon {
    background-color: var(--color-secondary);
}

.blog .go-link .icon .arrow-right{
    transition: var(--animation-fast);
}

.blog .go-back .arrow-left{
    transition: var(--animation-fast);
}

.blog .go-back:hover .arrow-left{
    rotate: 45deg;
}

.blog .view-all .arrow-right{
    transition: var(--animation-fast);
}

.blog .view-all:hover .arrow-right{
    rotate: -45deg;
}

/* ------------------------- Forms & Contact ------------------------- */
.row-form {
    margin-top: calc(var(--gap) * 1.5);
}

.contact-form {
    margin-top: 0 !important;
}

.contact-form .contact-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 3);
}

.contact-form .contact-info span {
    color: var(--color-text);
    font-size: var(--copy-size-m);
    text-transform: uppercase;
    font-weight: 400;
}

.contact-form .contact-info p {
    color: var(--color-white);
    font-size: 1.75em;
    font-weight: 600;
}

/* ------------------------- Plans Table ------------------------- */
.plans-table .col-plan {
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-border-white);
    border-radius: var(--border-radius-b);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
    padding: var(--gap);
    height: 100%;
}

.plans-table .col-plan h2 {
    margin-bottom: calc(var(--gap) * .5)
}

.plans-table .col-plan .styled-content {
    height: max-content;
}

.plans-table .bullet-list {
    margin-top: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background-color: var(--color-medium-gray);
    padding: calc(var(--gap) * 1.5) calc(var(--gap) * 0.5);
    border-radius: var(--border-radius);
}

.plans-table .bullet-list .bullet {
    border-bottom: 1px solid var(--color-border-white);
    color: var(--color-white);
    display: flex;
    gap: calc(var(--gap) * 0.5);
    padding-bottom: var(--gap);
    line-height: 1;
}

.plans-table .bullet-list .bullet:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.plans-table .bullet-list .bullet > * {
    flex: 0 0 auto;
}

.plans-table .bullet-list .bullet .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: var(--border-radius-s);
    border: 1px solid var(--color-border-white);
    background-color: var(--color-light-blue);
}

.plans-table .bullet-list .bullet .icon .arrow{
    background-image: none;
    background:  var(--color-dark);    
    -webkit-mask-image: url("../images/icon-arrow-right.svg");
    mask-image: url("../images/icon-arrow-right.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    display: block;
    width: 90%;
    height: 90%;
}