@layer framework, injected, resets, utils, connor, zoe, craig;
@import 'bootstrap.min.css'; /* wrapped in an @layer framework */

 
 
 
 
 
 
 
 
 
:root {
    --bs-primary-rgb: 229, 49, 48;
    --bs-primary-hsl: 0 77.7% 54.3%;
    --bs-primary-hex: #e53130;
    --bs-primary: rgb(229, 49, 48);
    --bs-red-rgb: 229, 49, 48;
    --bs-red-hsl: 0 77.7% 54.3%;
    --bs-red-hex: #e53130;
    --bs-red: rgb(229, 49, 48);
    --bs-danger-rgb: 229, 49, 48;
    --bs-danger-hsl: 0 77.7% 54.3%;
    --bs-danger-hex: #e53130;
    --bs-danger: rgb(229, 49, 48);
    --bs-black-rgb: 3, 19, 27;
    --bs-black-hsl: 200 80% 5.9%;
    --bs-black-hex: #03131b;
    --bs-black: rgb(3, 19, 27);
    --bs-dark-rgb: 3, 19, 27;
    --bs-dark-hsl: 200 80% 5.9%;
    --bs-dark-hex: #03131b;
    --bs-dark: rgb(3, 19, 27);
    --bs-light-rgb: 242, 245, 252;
    --bs-light-hsl: 222 62.5% 96.9%;
    --bs-light-hex: #f2f5fc;
    --bs-light: rgb(242, 245, 252);
    --bs-secondary-rgb: 242, 245, 252;
    --bs-secondary-hsl: 222 62.5% 96.9%;
    --bs-secondary-hex: #f2f5fc;
    --bs-secondary: rgb(242, 245, 252);
    --bs-tertiary-rgb: 144, 154, 173;
    --bs-tertiary-hsl: 219 15% 62.2%;
    --bs-tertiary-hex: #909aad;
    --bs-tertiary: rgb(144, 154, 173);
    --bs-body-color-rgb: 109, 110, 112;
    --bs-body-color-hsl: 220 1.4% 43.3%;
    --bs-body-color-hex: #6d6e70;
    --bs-body-color: rgb(109, 110, 112);
    --header-font: 'PT Sans';
    --bs-body-font-family: 'Noto Sans', sans-serif;
    --bs-link-color-rgb: var(--bs-body-color-rgb);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-heading-color:var(--bs-dark);
    --space-xs: 25px;
    --space-sm: 50px;
    --space-md: 100px;
    --space-lg: 150px;
    --fz-title-1: 42px;
    --fz-title-2: 36px;
    --fz-title-3: 26px;
    --fz-title-4: 21px;
    --fz-title-5: 18px;
    --fz-content-base: var(--fz-title-5);
    --bs-border-radius: 10px;
    font-size: var(--fz-content-base);
}
@media (min-width:768px){
    :root{
        --fz-title-1: 58px;
    }
}
@layer resets {
    [data-sal] {
        --sal-easing: cubic-bezier(.25, .46, .45, .94);
    }
    body {
        font-family: 'Noto Sans', sans-serif;
        font-weight: 400;
        letter-spacing:0.025em;
        font-size:18px;
        line-height:calc(30 / 18);
        overflow-x:hidden;
    }
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6,
    .header-font{
        font-family:var(--header-font), var(--bs-font-sans-serif);
        font-weight:400;
    }
    h1, .h1{
        font-weight:700;
        font-size:var(--fz-title-1);
        line-height:1;
    }
    h2, .h2{
        font-size:var(--fz-title-2);
        line-height:calc(46 / 36);
    }
    h3, .h3{
        font-size:var(--fz-title-3);
        line-height:calc(36 / 26);
    }
    h4, .h4{
        font-size:var(--fz-title-4);
        line-height:calc(34 / 21);
    }
    h5, .h5{
        font-size:var(--fz-title-5);
    }
    ul[class] {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .pt-sans {
        font-family: 'PT Sans', sans-serif;
    }
    .noto-sans {
        font-family: 'Noto Sans', sans-serif;
    }
    .contractor-form fieldset:not([class*="filepond"]) {
        --bs-gutter-y: var(--space-md);
        display: flex;
        flex-flow: column;
        gap: 1ch;
        padding: var(--bs-gutter-y) var(--bs-gutter-x);
    }
    .btn{
        --bs-btn-padding-x: 1.15rem;
        --bs-btn-border-width: 2px;
        --bs-btn-line-height: 1;
        
        --bs-btn-font-weight: 700;
        --bs-btn-font-size: 16px;
        --bs-btn-padding-y: 20px;
        text-transform:uppercase;
        letter-spacing:0.16em;
    }

    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--bs-primary);
        --bs-btn-hover-bg: #fff;
        --bs-btn-hover-border-color:var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    .btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    .btn-outline-danger {
        --bs-btn-color: #fff;
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    .btn-light {
        --bs-btn-color: var(--bs-dark);
        --bs-btn-bg: #fff;
        --bs-btn-border-color: #fff;
        --bs-btn-hover-color: var(--bs-dark);
        --bs-btn-hover-bg: rgba(var(--bs-light-rgb), 0.75);
        --bs-btn-hover-border-color: #fff;
        --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
        --bs-btn-active-color: var(--bs-dark);
        --bs-btn-active-bg: #fff;
        --bs-btn-active-border-color: #fff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-dark-rgb), 0.125);
        --bs-btn-disabled-color: var(--bs-dark);
        --bs-btn-disabled-bg: #fff;
        --bs-btn-disabled-border-color: #fff;
    }

    .footer {
        color: var(--bs-tertiary);
        background-color: var(--bs-dark);
        padding-block: var(--space-md) var(--space-xs);
        --bs-link-color-rgb: var(--bs-tertiary-rgb);
    }
    
    .footer-menu {
        font-size: 21px;
        color: var(--bs-secondary);
        --bs-link-color-rgb: var(--bs-secondary);
        & a {
            transition: color 0.3s ease-in-out;
            --bs-link-hover-color-rgb: var(--bs-primary-rgb);
            text-decoration-color: transparent;
        }
    }

}

@layer utils {
    img[width][height] {
        content-visibility: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    section{
        padding-block: var(--space-sm);
    }
    .text-balance {
        text-wrap: balance;
    }
    .text-pretty {
        text-wrap: pretty;
    }
    .py-sm {
        padding-block: var(--space-xs);
    }
    .pt-sm {
        padding-top: var(--space-xs);
    }
    .pb-sm {
        padding-bottom: var(--space-xs);
    }
    .py-md {
        padding-block: var(--space-sm);
    }
    .pt-md {
        padding-top: var(--space-sm);
    }
    .pb-md {
        padding-bottom: var(--space-sm);
    }
    .py-lg {
        padding-block: var(--space-md);
    }
    .pt-lg {
        padding-top: var(--space-md);
    }
    .pb-lg {
        padding-bottom: var(--space-md);
    }
    .py-xl {
        padding-block: var(--space-lg);
    }
    .pt-xl {
        padding-top: var(--space-lg);
    }
    .pb-xl {
        padding-bottom: var(--space-lg);
    }
    
    @media (min-width: 576px) {
        .py-sm-mob {
            padding-block: var(--space-xs);
        }
        .pt-sm-mob {
            padding-top: var(--space-xs);
        }
        .pb-sm-mob {
            padding-bottom: var(--space-xs);
        }
        .py-md-mob {
            padding-block: var(--space-sm);
        }
        .pt-md-mob {
            padding-top: var(--space-sm);
        }
        .pb-md-mob {
            padding-bottom: var(--space-sm);
        }
        .py-lg-mob {
            padding-block: var(--space-md);
        }
        .pt-lg-mob {
            padding-top: var(--space-md);
        }
        .pb-lg-mob {
            padding-bottom: var(--space-md);
        }
        .py-xl-mob {
            padding-block: var(--space-lg);
        }
        .pt-xl-mob {
            padding-top: var(--space-lg);
        }
        .pb-xl-mob {
            padding-bottom: var(--space-lg);
        }
    }
    @media (min-width: 768px) {
        .py-sm-tab {
            padding-block: var(--space-xs);
        }
        .pt-sm-tab {
            padding-top: var(--space-xs);
        }
        .pb-sm-tab {
            padding-bottom: var(--space-xs);
        }
        .py-md-tab {
            padding-block: var(--space-sm);
        }
        .pt-md-tab {
            padding-top: var(--space-sm);
        }
        .pb-md-tab {
            padding-bottom: var(--space-sm);
        }
        .py-lg-tab {
            padding-block: var(--space-md);
        }
        .pt-lg-tab {
            padding-top: var(--space-md);
        }
        .pb-lg-tab {
            padding-bottom: var(--space-md);
        }
        .py-xl-tab {
            padding-block: var(--space-lg);
        }
        .pt-xl-tab {
            padding-top: var(--space-lg);
        }
        .pb-xl-tab {
            padding-bottom: var(--space-lg);
        }
    }
    @media (min-width: 992px) {
        .py-sm-lap {
            padding-block: var(--space-xs);
        }
        .pt-sm-lap {
            padding-top: var(--space-xs);
        }
        .pb-sm-lap {
            padding-bottom: var(--space-xs);
        }
        .py-md-lap {
            padding-block: var(--space-sm);
        }
        .pt-md-lap {
            padding-top: var(--space-sm);
        }
        .pb-md-lap {
            padding-bottom: var(--space-sm);
        }
        .py-lg-lap {
            padding-block: var(--space-md);
        }
        .pt-lg-lap {
            padding-top: var(--space-md);
        }
        .pb-lg-lap {
            padding-bottom: var(--space-md);
        }
        .py-xl-lap {
            padding-block: var(--space-lg);
        }
        .pt-xl-lap {
            padding-top: var(--space-lg);
        }
        .pb-xl-lap {
            padding-bottom: var(--space-lg);
        }
    }
    @media (min-width: 1200px) {
        .py-sm-desk {
            padding-block: var(--space-xs);
        }
        .pt-sm-desk {
            padding-top: var(--space-xs);
        }
        .pb-sm-desk {
            padding-bottom: var(--space-xs);
        }
        .py-md-desk {
            padding-block: var(--space-sm);
        }
        .pt-md-desk {
            padding-top: var(--space-sm);
        }
        .pb-md-desk {
            padding-bottom: var(--space-sm);
        }
        .py-lg-desk {
            padding-block: var(--space-md);
        }
        .pt-lg-desk {
            padding-top: var(--space-md);
        }
        .pb-lg-desk {
            padding-bottom: var(--space-md);
        }
        .py-xl-desk {
            padding-block: var(--space-lg);
        }
        .pt-xl-desk {
            padding-top: var(--space-lg);
        }
        .pb-xl-desk {
            padding-bottom: var(--space-lg);
        }
    }
}
@layer connor {
    scroll-to-top {
    --stt-bg: var(--bs-primary);
    --stt-bc: var(--bs-primary);
}
.highlighted-article {
    p {
        color: var(--bs-tertiary);
    }
}
.section-card {
    .card-title {
        color: var(--bs-black);
    }
}
.contractor-form .card.flex-card {
    width: 100% !important;
}
.text-bg-primary {
    --bs-heading-color: currentColor;
}
.agreement-dialog {
    max-width: clamp(414px, 90vw, 1200px);
}
ul.row {
    margin-inline: calc(-.5 * var(--bs-gutter-x));
    margin-top: calc(-1 * var(--bs-gutter-y));
}
.text-bg-primary :is(.form-check, .form-control) {
    --bs-body-bg: rgba(3, 19, 27, 0.149);
    --bs-body-color: white;
    --bs-border-color: var(--bs-body-bg);
}

.disclaimer-label {
    font-size: 15px;
    line-height: calc(21 / 15);
}
.article-card {
    --bs-card-border-color: transparent;
    --bs-card-spacer-x: 0ch;
    --bs-card-spacer-y: 0.25ch;
    &:has(:hover) {
        --bs-heading-color: var(--bs-primary);
    }
    [data-icon] {
        font-size: 1rem;
    }
}
[data-focal-point] {
  background-position: var(--y, center) var(--x, center) !important;
}

img[data-focal-point] {
  background-position: revert !important;
  object-position: var(--y, center) var(--x, center) !important;
}

[data-focal-point^=t i] {
  --y: top;
}

[data-focal-point^=b i] {
  --y: bottom;
}

[data-focal-point$=l i] {
  --x: left;
}

[data-focal-point$=r i] {
  --x: right;
}
multi-part :is(
    fieldset:not([data-active]), 
    fieldset:has(~ [data-active])
):not(.filepond--file-wrapper) {
    display: none;
}

multi-part :is(legend, label) {
    color: var(--bs-heading-color);
}

progress-indicator {
    display: flex;
    container-type: inline-size;
    gap: min(1ch, 1cqi);
    padding-block: 3ch;
    > * {
        flex-grow: 1;
        height: 30px;
        background-color: #efefef;
        border-radius: calc(infinity * 1px);
        transition: all 0.25s ease;
        
        &:is(.active),
        &:has(~ .active) {
            background-color: var(--bs-primary);
        }
        &:is(.active) {
            flex-grow: 2;
        }
    }
}
.form-check [popover]::backdrop {
    background-color: rgba(0,0,0,0.1);
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main {
    flex: 1;
}
multi-part .card.flex-card {
    --bs-card-border-width: 0;
    & .card-img-overlay {
        left: 0 !important;
        right: 0 !important;
    }
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus, 
.form-control:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--bs-body-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 200px 200px #fff;
}
.full-image-background {
    padding-block: 0;
    display: grid;
    align-items: center;
    > :is(picture, .container) {
        grid-area: 1 / 1 / -1 / -1;
    }
    .container {
        z-index: 11;
    }
}
.client-logo-grid {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    --border-color: rgba(255,255,255,.35);
    position:relative;
    overflow:hidden; 
    grid-auto-rows: calc(50vw - 3px);
    display:grid;
    grid-template-columns: repeat(2, 1fr) ;
    @media (min-width: 576px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((100vw / 3) - 4px);
    }
    @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc((100vw / 4) - 5px);
    }
    @media (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((533px / 3) - 4px);
    }
    @media (min-width: 1200px) {
        grid-auto-rows: calc((543px / 3) - 4px);
    }
    @media (min-width: 1400px) {
        grid-auto-rows: calc((633px / 3) - 4px);
    }
    & .brand-logo-tpl{
        --img-opacity:.5;
        position:relative;
        overflow:hidden;
        grid-row: span 1;
        grid-column: span 1;
        padding: 1rem;
        border-bottom:1px solid var(--border-color);
        border-right:1px solid var(--border-color);
        
        & svg{
            opacity:var(--img-opacity);
            & path{
                fill:#fff !important;
            }
            & g{
                stroke: #fff !important;
            }
        }
        & img{
            opacity:var(--img-opacity);
        }
        &:first-child{
            border-top:1px solid var(--border-color);
            border-left:1px solid var(--border-color);
        }
        &:nth-child(2){
            border-top:1px solid var(--border-color);
        }
        &:nth-child(2n+1){
            border-left:1px solid var(--border-color);
        }
        @media(min-width:576px){
            &:nth-child(2n+1){
                border-left:none;
            }
            &:nth-child(3){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(3n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 768px) {
            &:nth-child(3n+1){
                border-left:none;
            }
            &:nth-child(4){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(4n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 992px) {
            &:nth-child(4n+1){
                border-left:none;
            }
            &:nth-child(4){
                border-top:none;
            }
            &:nth-child(3n+1){
                border-left:1px solid var(--border-color);
            }
        }
    }
}
}
@layer zoe {
    .navbar-brand svg {
    height: 55px;
    width:auto;
}
.navbar{
    --bs-navbar-nav-link-padding-x: .75rem;
    --bs-navbar-padding-y: 0;
    --bs-navbar-toggler-font-size: 30px;
    --bs-navbar-toggler-padding-y: 0.5rem;
    
    & .btn.btn-primary{
        --bs-btn-font-weight: 400;
        --bs-btn-padding-x: 1.25rem;
        min-width:180px;
        @media (min-width:1200px){
          --bs-btn-padding-x: 2.25rem;  
        }
    }
    & a{
        text-decoration:none;
    }
    & .navbar-toggler{
        border-radius:10px;
        color:var(--bs-dark);
    }
    @media (min-width:1200px){
      --bs-navbar-nav-link-padding-x: 1.5rem;  
    }
}
.navbar-nav{
    --bs-nav-link-color: var(--bs-dark);
    --bs-nav-link-hover-color: var(--bs-dark);
    --bs-nav-link-font-weight: 700;
    --bs-nav-link-font-size: 18px;
    & .btn-outline-primary .fa-right-long{
        font-size:18px;
    }
}
.nav-link {
    position: relative;
    &:focus-visible{
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
    }
}
.dropdown-toggle::after{
    display:none;
}
.red-bar{
    height:6px;
    width:0;
    background-color:var(--bs-primary);
    display:block;
    position:absolute;
    bottom:0;
    transition: width 0.3s ease-in-out;
    @media (min-width: 992px) {
        width:0;
        bottom:-15px;
    }
}
.nav-link.active .red-bar,
.nav-link.show .red-bar,
.nav-link:hover .red-bar,
.nav-link:focus .red-bar{
    width:100%;
    transition: width 0.3s ease-in-out;
    @media (min-width: 992px) {
        width:calc(100% - (2 * var(--bs-navbar-nav-link-padding-x)));
    }
}
.offcanvas{
    --bs-offcanvas-padding-y: .5rem;
}



.mega-menu-grid{
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 30px)) 1fr;
        column-gap:30px;
        position:relative;
        overflow:hidden; 
        grid-template-rows: auto;
        display:grid;
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 30px)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 30px)) 1fr;
    }
    @media (min-width: 1600px) {
        grid-template-columns: 1fr repeat(14, calc((1320px / 12) - 30px)) 1fr;
    }
}
.overview-item{
    @media (min-width: 992px) {
        grid-row: 1 / span 1;
        position:relative;
        grid-column: 1 / span 4;
    }
    @media (min-width: 1600px) {
        grid-column: 2 / span 4;
    }
}
.vertical{
    @media (min-width: 992px) {
        grid-row: 1 / span 1;
        position:relative;
        grid-column: 5 / span 1;
        justify-self:center;
    }
    @media (min-width: 1600px) {
        grid-column: 6 / span 1;
    }
}
.children-links{
    @media (min-width: 992px) {
        grid-row: 1 / span 1;
        position:relative;
        grid-column: 6 / span 9;
    }
    @media (min-width: 1600px) {
        grid-column: 7 / span 9;
    }
}
.mega-content{
    & .vr{
        background-color:#bfc6d5;
        opacity:1;
    }
    & hr{
        border-color:#bfc6d5;
        opacity:1;
        margin: 2rem 0;
    }
} 
.nav-title{
    color:var(--bs-dark);
    margin-bottom:8px;
}
.dropdown-menu{
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-spacer: 0px;
    border:none;
    &[data-bs-popper]{
        right:0;
    }
    @media (min-width: 992px) {
        --bs-dropdown-padding-y: 3.5rem;
    }
}
.third-nav-link{
    line-height:1;
    color:var(--bs-dark);
    transition: color 0.3s ease-in-out;
    &:hover{
        color:var(--bs-primary);
    }
    &:focus{
        color:var(--bs-primary);
    }
    &.active{
        color:var(--bs-primary);
    }
}
.plain-nav-link{
    line-height:1;
    color:var(--bs-dark);
    transition: color 0.3s ease-in-out;
    &:hover{
        color:var(--bs-primary);
    }
    &:focus{
        color:var(--bs-primary);
    }
    &.active{
        color:var(--bs-primary);
    }
}
.background-video-grid{
    height:500px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    background-color:var(--bs-dark);
    &.opacity-bkg::before{
        content:'';
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        position:relative;
        z-index:2;
        display:block;
        width:100vw;
        background:rgba(0,0,0,.2);
    }
    & .container{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-fluid{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & h1{
        color:#fff;
    }
    & hr{
        border-color:#fff;
        opacity: 0.502;
        margin: 1.5rem 0;
    }
    & .lead{
        color:#fff;
    }
    & .youtube-background{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        opacity:.7;
        & video{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
        }
        &:has(video){
            opacity:1;
        }
        @media (min-width: 768px) {
            height:clamp(500px, 100vh, 950px);
        }
    }
    @media (min-width: 768px) {
        height:clamp(500px, 100vh, 950px);
    }
}
.background-image-grid{
    height:auto;
    padding-block: var(--space-sm);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    &.cta{
        color: var(--bs-secondary);
        &::before{
            background-image: linear-gradient( 90deg, rgb(3,19,27) 0%, rgba(3,19,27,0) 100%);
            content:'';
            z-index:2;
            grid-column: 1 / span 1;
            grid-row: 1 / span 1;
            position:relative;
            width:100%;
            height:100%;
            display:block;
        }
        & .bg-image{
            opacity:1;
        }
    }
    & h1{
        color:#fff;
    }
    & .container{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .container-fluid{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
    }
    & .hero-picture{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        top:0;
        background:#000;
        & .bg-image{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
            opacity:.7;
        }
        @media (min-width: 768px) {
            height:clamp(500px, 100vh, 950px);
        }
    }
    @media (min-width: 768px) {
        height:clamp(500px, 100vh, 950px);
    }
    &.xl-bkg{
        & .hero-picture{
            @media (min-width: 768px) {
                height:100%;
            }
            @media (min-width: 1800px) {
                height:clamp(500px, 100vh, 950px);
            }
        }
        @media (min-width: 768px) {
            height:auto;
        }
        @media (min-width: 1800px) {
            height:clamp(500px, 100vh, 950px);
        }
    }
}
header{
    &.background-video-grid {
        & .container{
            align-self:end;
        }
        & .container-lg{
            align-self:end;
        }
        @media (min-width: 768px) {
            height:calc(100vh - 78px);
        }
    }
    &.background-image-grid {
        padding-block: 0;
        & .container{
            align-self:end;
        }
        & .container-lg{
            align-self:end;
        }
        & .hero-picture{
            @media (min-width: 768px){
                height:calc(100vh - 78px);
            }
        }
        @media (min-width: 768px) {
            height:calc(100vh - 78px);
        }
    }
}
.subtitle{
    text-transform:uppercase;
    font-weight:700;
    color:var(--bs-primary);
}
.lead{
    font-size:var(--fz-title-4);
    font-weight:400;
    line-height:calc(34 / 21);
}


.flex-cards {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    row-gap:10px;
    &::-webkit-scrollbar {
        display: none;
    }
    @media (min-width:1200px){
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
}

.card.flex-card{
    --bs-card-title-color: #fff;
    --bs-card-color: #fff;
    --bs-card-title-spacer-y: 0.75rem;
    flex: 0 0 auto;
    width:100%;
    overflow:hidden;
    height:420px;
    display:block;
    &[data-sal|=slide]{
        transition-property: all !important;
    }
    & img{
        opacity:.4;
        height:100%;
        object-fit:cover;
        position:relative;
        transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
    }
    & .card-img-overlay{
        left:4px;
        right:4px;
        overflow:hidden;
    }
    & .svg-inline--fa{
        color:#fff;
        transition: color 0.3s ease-in-out;
        font-size:32px;
    }
    & .card-title{
        font-size: var(--fz-title-3);
        line-height:36px;
        font-weight:700;
    }
    & .hiding-text{
        color:#fff;
        @media (hover: hover) { 
            opacity:0;
            transition: opacity 0.3s ease-in-out;
        }
    }
    & .red-circle-btn{
        display:block;
        margin-top:auto;
        text-align:right;
        & .svg-inline--fa{
            position:relative;
            z-index:2;
        }
        &::before{
            position:absolute;
            bottom:-16px;
            right:-18px;
            z-index:1;
            height:100px;
            width:100px;
            content:'';
            display:block;
            border-radius:50%;
            background-color:rgba(var(--bs-primary-rgb),0.8);
            transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
        }
    }
    &:has(a:hover, label:hover){
        & img{
            opacity:.2;
        }
        & .hiding-text{
            opacity:1;
        }
        & .svg-inline--fa{
            color:var(--bs-primary);
        }
        & .red-circle-btn{
            &::before{
                transform:scale(2);
                background-color:var(--bs-primary);
            }
            & .svg-inline--fa{
                color:#fff;
            }
        }
    }
    &:has(a:focus){
        & img{
            opacity:.2;
        }
        & .hiding-text{
            opacity:1;
        }
        & .svg-inline--fa{
            color:var(--bs-primary);
        }
        & .red-circle-btn{
            &::before{
                transform:scale(2);
                background-color:var(--bs-primary);
            }
            & .svg-inline--fa{
                color:#fff;
            }
        }
    }
    @media(min-width:768px){
        width:50%;
    }
    @media (min-width: 1200px) {
        width:auto;
        flex: 1;
        &:has(a:hover),
        &:has(a:focus){
            flex-grow:1.15;
        }
        scroll-snap-align: start;
    }
}
.top-list{
    & li{
        color:var(--bs-dark);
        padding:13px 0;
        & svg{
            margin-right:10px;
        }
        &:not(:last-child){
            border-bottom:1px solid #3d4049;
        }
    }
}
.bg-dark{
    --bs-heading-color:#fff;
    color:var(--bs-tertiary);
    & .stat-label{
        color:#fff;
    }
    & .content {
        & .vr{
            background-color:#3d4049;
            opacity:1;
        }
    }
    & .top-list{
        & li{
            color:#fff;
        }
    }
}
.bg-primary{
    --bs-heading-color:#fff;
    --bs-body-color:var(--bs-light);
    & .stat-label{
        color:var(--bs-light);
    }
}
.brand-logo-tpl{
    @media (min-width: 768px){
        &:nth-child(3n+2){
            --sal-delay: .1s;
        }
        &:nth-child(3n+0){
            --sal-delay: .2s;
        }
    }
    @media (min-width: 992px){
        &:nth-child(4n+2){
            --sal-delay: .1s;
        }
        &:nth-child(4n+3){
            --sal-delay: .2s;
        }
        &:nth-child(4n+0){
            --sal-delay: .3s;
        }
    }
    @media (min-width: 1200px){
        &:nth-child(5n+2){
            --sal-delay: .1s;
        }
        &:nth-child(5n+3){
            --sal-delay: .2s;
        }
        &:nth-child(5n+4){
            --sal-delay: .3s;
        }
        &:nth-child(5n+0){
            --sal-delay: .4s;
        }
    }
}
.brand-logo{
    display:block;
    margin:0 auto;
    width: 130px;
    height: 75px;
    object-fit: contain;
    filter: grayscale(100%);
    fill: gray;
}

.brand-logo.small-logo {
    transform: scale(1.25) !important;
}

.brand-logo.small-logo-fifth {
    transform: scale(2) !important;
}
@media (max-width: 768px) {
    .brand-logo.small-logo {
        transform: scale(1.4) !important;
    }
}
.stat-container{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    & .main-stats{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        & .stat-value{
            color:var(--bs-primary);
            text-align:center;
            font-family:var(--header-font), var(--bs-font-sans-serif);
            font-size:30px;
            line-height:calc(46 / 48);
            letter-spacing:0;
        }
        & .stat-label{
            width:68%;
            display:block;
            margin: 0 auto;
            font-size:16px;
            text-align: left;
        }
    }
}

@media (max-width: 991px) {
    .stat-container .stat-lines .vr{
        width: 0%;
    }
}
@media (min-width: 991px) {
    .stat-container .stat-lines{
        position:relative;
        z-index:2;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        & .vr{
            opacity:1;
            background-color:#747b8b;
        }
        &.grid-meet-lines{
            & .vr{
                background-color:#3d4049;
            }
        }
    }
}

.about-statistics{
    & .stat-value{
        color:var(--bs-primary);
        text-align:center;
        font-family:var(--header-font), var(--bs-font-sans-serif);
        font-size:30px;
        line-height:calc(46 / 48);
        letter-spacing:0;
    }
    & .stat-label{
        width:68%;
        text-align:left;
        display:block;
        margin:0 auto;
        font-size:16px;
    }
}
.vert-stats{
    & .stat-value{
        color:var(--bs-primary);
        text-align:center;
        font-family:var(--header-font), var(--bs-font-sans-serif);
        font-size:30px;
        line-height:calc(46 / 30);
        letter-spacing:0;
        margin-bottom:0;
    }
    & .stat-label{
        margin-bottom:0;
        line-height:38px;
    }
    & hr{
        opacity:1;
        color:#3d4049;
        margin:.5rem 0;
    }
}
.red-quote{
    color:var(--bs-primary);
    font-family:var(--header-font), var(--bs-font-sans-serif);
    font-size:130px;
    line-height:1;
    font-weight:700;
    font-style:italic;
    letter-spacing:0;
    display:block;
    margin-bottom:-75px;
    @media (min-width:768px){
        font-size:260px;
        margin-bottom:-150px;
        margin-right:40px;
    }
}
.testimony-slider{
    --swiper-theme-color: var(--bs-primary);
    --swiper-pagination-bottom:30px;
    --swiper-pagination-bullet-inactive-color:#fff;
    --swiper-pagination-bullet-inactive-opacity:1;
    --swiper-pagination-bullet-size:10px;
    padding-bottom:var(--space-md);
    
}
.testimonial{
    & p{
        color: var(--bs-dark);
    }
    & .test-logo{
        max-width:200px;
        width:100%;
        height:auto;
    }
    & .testimony-text{
        font-family:var(--header-font), var(--bs-font-sans-serif);
        font-style:italic;
        line-height:calc(66 / 60);
        letter-spacing:0;
        font-size:24px;
    }
    & .author{
        font-weight:700;
        margin-bottom:0;
        text-transform:uppercase;
    }
}
@media (max-width: 768px) {
    .testimonial {
        padding: 15px;
        text-align: center;
    }

    .testimony-text {
        font-size: 16px !important;
        line-height: 1.4;
        max-width: 90%;
        margin: 0 auto;
        display: -webkit-box;
        -webkit-line-clamp: 15; 
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .author {
        font-size: 14px !important;
    }
}


.testimony-slider .swiper-slide:not(.swiper-slide-active){
    transition-property:transform, opacity;
    &:not(.swiper-slide-active){
        opacity:.5;
    }
    &.swiper-slide-active{
        opacity:1;
    }
}
.swiper-pagination-bullet{
    border:1px solid var(--swiper-theme-color);
}
.plain-link{
    color:var(--bs-primary);
    text-transform:uppercase;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    letter-spacing:.16em;
    line-height:32px;
    border-bottom:1px solid #fff;
    transition: border-color 0.3s ease-in-out;
    &:hover{
        border-color: var(--bs-primary);
    }
    &:focus{
        border-color: var(--bs-primary);
    }
}
.bg-light .plain-link{
    border-bottom:1px solid var(--bs-light);
    &:hover{
        border-color: var(--bs-primary);
    }
    &:focus{
        border-color: var(--bs-primary);
    }
}
.bg-dark .plain-link{
    border-bottom:1px solid var(--bs-dark);
    &:hover{
        border-color: var(--bs-primary);
    }
    &:focus{
        border-color: var(--bs-primary);
    }
}
.card.first-client-story-item{
    --bs-card-border-width: 0;
    --bs-card-title-color: var(--bs-secondary);
    --bs-card-color: var(--bs-tertiary);
    --bs-card-title-spacer-y: 0.75rem;
    & .card-body{
        @media (min-width:992px){
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) var(--bs-card-spacer-y) 1.5rem;
        }
    }
    & .card-title{
        font-size: var(--fz-title-3);
        line-height:36px;
        font-family:var(--header-font), var(--bs-font-sans-serif);
        transition: color 0.3s ease-in-out;
    }
    &:has(a:hover){
        --bs-card-title-color: var(--bs-primary);
    }
    &:has(a:focus){
        --bs-card-title-color: var(--bs-primary);
    }
    @media (min-width:992px){
        overflow:hidden;
    }
}
.client-story-tpl{
    --bs-card-title-color: var(--bs-dark);
    & .card-title{
        color:var(--bs-card-title-color);
        transition: color 0.3s ease-in-out;
    }
    &:has(a:hover){
        --bs-card-title-color: var(--bs-primary);
    }
    &:has(a:focus){
        --bs-card-title-color: var(--bs-primary);
    }
}
.card-title .fa-right-long{
    font-size:20px;
    margin-left:5px;
}
.collage-grid{
    position:relative;
    & .collage-grid-item{
        position:relative;
        overflow:hidden;
        & img{
            position:relative;
            width:100%;
            height:100%;
            object-fit:cover;
            z-index:1;
        }
        & .vstack{
            width: 100%;
            z-index: 3;
            position: absolute;
            inset: 0;
            & .btn-circle-btn{
                color:#fff;
                font-size:36px;
                & svg{
                    z-index:5;
                    position:relative;
                }
                & .before{
                    z-index:4;
                    position:absolute;
                    border-radius:50%;
                    margin-left:-30px;
                    margin-top:-19px;
                    width:96px;
                    height:97px;
                    background-color:rgba(var(--bs-primary-rgb),0.902);
                    border:2px solid var(--bs-primary);
                    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
                }
                &.glightbox{
                    & .before{
                        margin-left: -37px;
                    }
                }
                &:hover{
                    & .before{
                        background-color:rgba(var(--bs-primary-rgb),1);
                        transform:scale(2);
                    }
                }
                &:focus{
                    & .before{
                        background-color:rgba(var(--bs-primary-rgb),1);
                        transform:scale(2);
                    }
                }
            }
        }
        &:first-child{
            @media (min-width:1200px){
                grid-row:1 / span 2;
                grid-column: 1 / span 6;
            }
            @media (min-width:1600px){
                grid-column:1 / span 7;
            }
        }
        &:nth-child(2){
            @media (min-width:1200px){
                grid-row:2 / span 2;
                grid-column: 9 / span 4;
            }
            @media (min-width:1600px){
                grid-column:10 / span 4;
            }
        }
        &:nth-child(3){
            @media (min-width:1200px){
                grid-row:3 / span 1;
                grid-column: 6 / span 3;
            }
            @media (min-width:1600px){
                grid-column:7 / span 3;
            }
        }
        &:nth-child(4){
            @media (min-width:1200px){
                grid-row:3 / span 2;
                grid-column: 2 / span 4;
            }
            @media (min-width:1600px){
                grid-column:3 / span 4;
            }
        }
        &:nth-child(5){
            @media (min-width:1200px){
                grid-row:4 / span 2;
                grid-column: 10 / span 4;
            }
            @media (min-width:1600px){
                grid-column:11 / span 4;
            }
        }
        &:nth-child(6){
            @media (min-width:1200px){
                grid-row:4 / span 3;
                grid-column: 6 / span 4;
            }
            @media (min-width:1600px){
                grid-column:7 / span 4;
            }
        }
    }
    & .content{
        position:relative;
        align-self:center;
        @media (min-width:1200px){
            grid-row:1 / span 1;
            grid-column:8 / span 6;
        }
        @media (min-width:1600px){
            grid-column:9 / span 6;
        }
    }
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 9px)) 1fr;
        column-gap:9px;
        row-gap:9px;
        overflow:hidden; 
        grid-template-rows: auto;
        display:grid;
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 9px)) 1fr;
        grid-template-rows: 409px 84px 222px 83px 223px 76px;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 9px)) 1fr;
    }
    @media (min-width: 1600px) {
        grid-template-columns: 1fr repeat(14, calc((1320px / 12) - 9px)) 1fr;
        grid-template-rows: 459px 134px 272px 133px 273px 126px;
    }
}
.icon-tpl{
    & .svg-inline--fa {
        
        height: 100% !important; 
        max-height: 48px;
    }
    
    & p{
        letter-spacing:0.05em;
    }
    & svg{
        width:100%;
    }
}
.odd-text{
    color:#fefefe;
}
.social-link{
    font-size: var(--fz-title-2);
    color:#fefefe;
    transition: color 0.3s ease-in-out;
    &:hover{
        color:var(--bs-primary);
    }
    &:focus{
        color:var(--bs-primary);
    }
}
.copyright{
    font-size:15px;
    line-height:calc(28 / 15);
}
.copy-link{
    font-size:15px;
    line-height:calc(28 / 15);
    transition: color 0.3s ease-in-out;
}
.service-tpl{
    position:relative;
    & .title{
        text-transform:uppercase;
        color:var(--bs-primary);
        font-weight:700;
        letter-spacing:0.16em;
        font-size:16px;
        line-height:24px;
        transition: color 0.3s ease-in-out;
        margin-bottom:.5rem;
    }
    &:has(a:hover){
        & .title{
            color:#fff;
        }
    }
    &:has(a:focus){
        & .title{
            color:#fff;
        }
    }
}
.brand-grid{
    --border-color:#3d4049;
    position:relative;
    overflow:hidden; 
    grid-auto-rows: calc(50vw - 3px);
    display:grid;
    grid-template-columns: repeat(2, 1fr) ;
    @media (min-width: 576px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((100vw / 3) - 4px);
    }
    @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc((100vw / 4) - 5px);
    }
    @media (min-width: 992px) {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc((960px / 4) - 5px);
    }
    @media (min-width: 1200px) {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: calc((1140px / 5) - 6px);
    }
    @media (min-width: 1400px) {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: calc((1320px / 6) - 7px);
    }
    & .brand-logo-tpl{
        position:relative;
        overflow:hidden;
        grid-row: span 1;
        grid-column: span 1;
        padding: 1rem;
        border-bottom:1px solid var(--border-color);
        border-right:1px solid var(--border-color);
        &:first-child{
            border-top:1px solid var(--border-color);
            border-left:1px solid var(--border-color);
        }
        &:nth-child(2){
            border-top:1px solid var(--border-color);
        }
        &:nth-child(2n+1){
            border-left:1px solid var(--border-color);
        }
        @media (min-width: 576px) {
            &:nth-child(2n+1){
                border-left:none;
            }
            &:nth-child(3){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(3n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 768px) {
            &:nth-child(3n+1){
                border-left:none;
            }
            &:nth-child(4){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(4n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 1200px) {
            &:nth-child(4n+1){
                border-left:none;
            }
            &:nth-child(5){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(5n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 1400px) {
            &:nth-child(5n+1){
                border-left:none;
            }
            &:nth-child(6){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(6n+1){
                border-left:1px solid var(--border-color);
            }
        }
    }
}
.watch-link{
    text-decoration:none;
    color:#fff;
    text-transform:uppercase;
    font-size:16px;
    font-weight:700;
    letter-spacing:.16em;
    transition: color 0.3s ease-in-out;
    & svg{
        margin-right:8px;
    }
    &:hover{
        color:var(--bs-primary);
    }
    &:focus{
        color:var(--bs-primary);
    }
}
header{
    & p.h4{
        font-family:var(--bs-body-font-family);
    }
}
.modal{
    --bs-modal-bg: var(--bs-primary);
    --bs-heading-color:#fff;
    --bs-modal-color:#fff;
    --bs-modal-border-radius: 10px;
    --bs-modal-header-border-color: var(--bs-dark);
    & .modal-header{
        align-items: start;
    }
    & .btn-close{
        --bs-btn-close-bg: ;
        --bs-btn-close-color: #fff;
        --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
        font-size:30px;
        height:auto;
        width:auto;
        line-height:1;
    }
    & label{
        color:var(--bs-light);
        & .error{
            display:block;
            color:#fff;
            font-size:16px;
        }
    }
    & .form-control{
        background-color:rgba(var(--bs-dark-rgb),.149);
        background-clip:unset;
        color:#fff;
        border-radius:10px;
        border:none;
        font-size:21px;
        line-height:30px;
        letter-spacing:.05em;
        padding: .8615rem .375rem;
        &:focus{
            box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
        }
    }
}
.modal .form-control:-webkit-autofill, .modal .form-control:-webkit-autofill:hover, .modal .form-control:-webkit-autofill:focus, .modal .form-control:-webkit-autofill:active{
    box-shadow: none;
    color:#fff !important;
}
.bg-white{
    & .btn-outline-danger{
        --bs-btn-color: var(--bs-dark);
        --bs-btn-disabled-color: var(--bs-dark);
    }
    & .plain-link{
        border-color:#fff;
        &:hover{
            border-color:var(--bs-primary);
        }
        &:focus{
            border-color:var(--bs-primary);
        }
    }
}
[multipart]form .section:not(.current) {
    display: none;
}
[multipart]{
    transition: height .3s ease-in;
    overflow:hidden;
}
.google-stars{
    & svg{
        height:24px;
        & path{
        fill:var(--bs-primary);
        }
    }
}
.card.google-card{
    --bs-card-border-color:#3d4049;
    --bs-card-spacer-y: 30px;
    & .card-title{
        margin-bottom:0;
        font-family:var(--header-font), var(--bs-font-sans-serif);
        color:var(--bs-dark);
    }
    & .card-date{
        font-family:var(--header-font), var(--bs-font-sans-serif);
        color:var(--bs-dark);
    }
    & .hstack{
        padding-bottom:30px;
    }
    & svg{
        height:24px;
        & path{
        fill:var(--bs-primary);
        }
    }
    @media (min-width:768px){
        & .card-body{
            padding-bottom:70px;
        }
    }
}
.accordion{
    --bs-accordion-border-radius: 0;
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-color: var(--bs-dark);
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1.25rem;
    --bs-accordion-body-padding-x: 0;
    & .accordion-item{
        border:none;
        border-bottom:1px solid #3d4049;
    }
    & .accordion-button{
        justify-content:space-between;
        font-size:var(--fz-title-3);
        line-height:36px;
        & svg{
            color:var(--bs-primary);
            font-size:18px;
            transition: transform 0.3s ease-in-out;
        }
        &::after{
            display:none;
        }
        &:not(.collapsed){
            box-shadow:none;
            & svg{
                transform:rotate(180deg);
            }
            &:focus{
                box-shadow:var(--bs-accordion-btn-focus-box-shadow);
                font-weight:700;
            }
        }
        &:focus{
            font-weight:700;
        }
    }
}
.software-brand-grid{
    --border-color: rgba(255,255,255,.35);
    position:relative;
    overflow:hidden; 
    grid-auto-rows: calc(50vw - 3px);
    display:grid;
    grid-template-columns: repeat(2, 1fr) ;
    @media (min-width: 576px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((100vw / 3) - 4px);
    }
    @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc((100vw / 4) - 5px);
    }
    @media (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((533px / 3) - 4px);
    }
    @media (min-width: 1200px) {
        grid-auto-rows: calc((543px / 3) - 4px);
    }
    @media (min-width: 1400px) {
        grid-auto-rows: calc((633px / 3) - 4px);
    }
    & .brand-logo-tpl{
        --img-opacity:.5;
        position:relative;
        overflow:hidden;
        grid-row: span 1;
        grid-column: span 1;
        padding: 1rem;
        border-bottom:1px solid var(--border-color);
        border-right:1px solid var(--border-color);
        
        & svg{
            opacity:var(--img-opacity);
            & path{
                fill:#fff !important;
            }
            & g{
                stroke: #fff !important;
            }
        }
        & img{
            opacity:var(--img-opacity);
        }
        &:first-child{
            border-top:1px solid var(--border-color);
            border-left:1px solid var(--border-color);
        }
        &:nth-child(2){
            border-top:1px solid var(--border-color);
        }
        &:nth-child(2n+1){
            border-left:1px solid var(--border-color);
        }
        @media(min-width:576px){
            &:nth-child(2n+1){
                border-left:none;
            }
            &:nth-child(3){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(3n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 768px) {
            &:nth-child(3n+1){
                border-left:none;
            }
            &:nth-child(4){
                border-top:1px solid var(--border-color);
            }
            &:nth-child(4n+1){
                border-left:1px solid var(--border-color);
            }
        }
        @media (min-width: 992px) {
            &:nth-child(4n+1){
                border-left:none;
            }
            &:nth-child(4){
                border-top:none;
            }
            &:nth-child(3n+1){
                border-left:1px solid var(--border-color);
            }
        }
    }
}
#lead_form{
    & hr{
        border-color:rgb(var(--bs-light-rgb));
    }
    & p{
        color:var(--bs-light);
        &.stat-label{
            color:var(--bs-light);
        }
        &.stat-value{
            color:var(--bs-light);
        }
    }
    & label{
        color:var(--bs-light);
        & .error{
            display:block;
            color:#fff;
            font-size:16px;
        }
    }
    & .form-control{
        background-color:rgba(var(--bs-dark-rgb),.149);
        background-clip:unset;
        color:#fff;
        border-radius:10px;
        border:none;
        font-size:21px;
        line-height:30px;
        letter-spacing:.05em;
        padding: .8615rem .375rem;
        &:focus{
            box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
        }
    }
    & .form-check-input{
        --bs-form-check-bg: rgba(var(--bs-dark-rgb),.149);
        --bs-border-color:var(--bs-dark);
        &:checked{
            background-color: var(--bs-dark);
            border-color: var(--bs-dark);
            &[type=checkbox]{
                --bs-form-check-bg-image: none;
            }
        }
        &:focus{
            border-color: var(--bs-dark);
            box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
        }
    }
    & .form-check-label{
        font-size:15px;
        line-height:21px;
        letter-spacing:0;
    }
}
#lead_form .form-control:-webkit-autofill, #lead_form .form-control:-webkit-autofill:hover, #lead_form .form-control:-webkit-autofill:focus, #lead_form .form-control:-webkit-autofill:active{
    box-shadow: none;
    color:#fff !important;
}
.news-hero-video{
    position:relative;
    display:grid;
    overflow:hidden;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    & img{
        position:relative;
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        z-index:1;
    }
    & .vstack{
        position:relative;
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        z-index:2;
        & .btn-circle-btn{
            color:#fff;
            font-size:36px;
            & svg{
                z-index:5;
                position:relative;
            }
            & .before{
                z-index:4;
                position:absolute;
                border-radius:50%;
                margin-left:-30px;
                margin-top:-19px;
                width:96px;
                height:97px;
                background-color:rgba(var(--bs-primary-rgb),0.902);
                border:2px solid var(--bs-primary);
                transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
            }
            &.glightbox{
                & .before{
                    margin-left: -37px;
                }
            }
            &:hover{
                & .before{
                    background-color:rgba(var(--bs-primary-rgb),1);
                    transform:scale(2);
                }
            }
            &:focus{
                & .before{
                    background-color:rgba(var(--bs-primary-rgb),1);
                    transform:scale(2);
                }
            }
        }
    }
}
.btn-text{
    --bs-btn-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-primary);;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-font-weight: 400;
    letter-spacing:0.025em;
}
p a{
    color:var(--bs-primary);
    text-decoration:none;
    &:hover{
        text-decoration:underline;
    }
    &:focus{
        text-decoration:underline;
    }
}
.news-swiper{
    --swiper-theme-color: var(--bs-primary);
    --swiper-pagination-bottom:0px;
    --swiper-pagination-bullet-inactive-color:#fff;
    --swiper-pagination-bullet-inactive-opacity:1;
    --swiper-pagination-bullet-size:10px;
    overflow:visible;
    & .swiper-slide{
        border-radius: calc(var(--bs-border-radius) + 2px);
        background-color:var(--bs-primary);
        &:has(a:hover){
            & img{
                opacity:.65;
            }
        }
        &:has(a:focus){
            & img{
                opacity:.65;
            }
        }
    }
}
.article-card{
    & time{
        color:var(--bs-tertiary);
    }
}
.vendor-support-form{
    & .form-control{
        background-clip:unset;
        color:var(--bs-dark);
        border-radius:10px;
        border: 2px solid #dcdedf;
        font-size:21px;
        line-height:30px;
        letter-spacing:.05em;
        padding: .667rem .375rem;
        &:focus{
            box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
            border-color:var(--bs-primary);
        }
    }
    & .form-select{
        background-clip:unset;
        color:var(--bs-dark);
        border-radius:10px;
        border: 2px solid #dcdedf;
        font-size:21px;
        line-height:30px;
        letter-spacing:.05em;
        padding: .667rem .375rem;
        &:focus{
            box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
            border-color:var(--bs-primary);
        }
    }
    & label{
        &:not(.btn){
            margin-bottom:3px;
        }
        &.btn{
            &:hover{
                background-color:var(--bs-btn-hover-bg);
                color:var(--bs-btn-hover-color);
            }
            &:focus{
                background-color:var(--bs-btn-hover-bg);
                color:var(--bs-btn-hover-color);
            }
        }
    }
    & .error-message{
        color:var(--bs-primary);
        
    }
    & .error{
        color:var(--bs-primary);
        margin-bottom:5px;
        display:block;
    }
}
.vendor-support-form .form-control:-webkit-autofill, .vendor-support-form .form-control:-webkit-autofill:hover, .vendor-support-form .form-control:-webkit-autofill:focus, .vendor-support-form .form-control:-webkit-autofill:active{
    box-shadow: none;
    color:var(--bs-dark) !important;
}
.vendor-support-form .filepond--drop-label {
    text-transform: uppercase;
}

.vendor-support-form .filepond--drip {
    background-color: transparent;
    border: 2px dashed var(--bs-primary);
    border-radius: 0;
    opacity: 1;
}

.vendor-support-form :is(.filepond--panel-top, .filepond--panel-center, .filepond--panel-bottom) {
    background-color: transparent;
}

.vendor-support-form .filepond--file {
    color: #fff;
    background: var(--bs-primary);
}

.vendor-support-form .filepond--file-action-button {
    color: var(--bs-primary);
    background-color: var(--bs-dark);
}
.vendor-support-form .filepond--credits{
    display:none;
}
.divider-img.divider-video{
    height:400px;
    overflow:hidden;
    position:relative;
    width:100%;
    & .youtube-background{
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        & video{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
        }
    }
    @media (min-width:768px){
        height:700px;
    }
    @media (min-width:1200px){
        height:800px;
    }
}

}

@layer craig {
    form .section:not(.current) {
    display: none;
}

.image-divider{
    max-height: 80vh;
}

.map-option:hover{
    cursor: pointer;
}

.map-option-title{
    color: var(--bs-red-hex);
    transition: all 0.25s;
}

.map-option:hover .map-option-title{
    color: var(--bs-light-hex);
}

.map-grid{
    padding: 0;
    --grid-height: auto;
    
    grid-template-columns: 1fr;
    column-gap: 30px;
    row-gap: 30px;
    position: relative;
    overflow: hidden;
    grid-template-rows: auto;
    display:grid;
    @media (min-width: 576px)
    {
        grid-template-columns: 1fr repeat(12, calc((540px / 12) - 30px)) 1fr;
    }
    @media (min-width: 768px)
    {
        grid-template-columns: 1fr repeat(12, calc((720px / 12) - 30px)) 1fr;
    }
    @media (min-width: 992px)
    {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 30px)) 1fr;
    }
    @media (min-width: 1200px)
    {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 30px)) 1fr;
    }
    @media (min-width: 1400px)
    {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 30px)) 1fr;
    }
    
    & .image
    {
        z-index:0;
        grid-row: 1 / span 3;
        height: 100%;
        width: 100%;
        object-fit: cover;
        grid-column: 1 / span 1;
        @media (min-width:576px){
            grid-column: 1 / span 14;
        }
        @media (min-width:992px){
            grid-row: 1 / span 1;
            height:var(--grid-height);
        }
    }
    & .gradient{
        background-image: linear-gradient(to bottom, rgba(var(--bs-dark-rgb), 0.8), rgba(0,0,0,0)),
                    linear-gradient(to top, rgba(var(--bs-dark-rgb), 0.8), rgba(0,0,0,0), rgba(0,0,0,0));
        z-index: 1;
        grid-row: 1 / span 3;
        height: 100%;
        width: 100%;
        object-fit: cover;
        grid-column: 1 / span 1;
        @media (min-width:576px){
            grid-column: 1 / span 14;
        }
        @media (min-width:992px){
            grid-row: 1 / span 1;
            height:var(--grid-height);
        }
    }
    & .play-button {
        position: relative;
        height: var(--grid-height);
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        margin-bottom:200px;
        &::before{
            position:absolute;
            transform: translate(50%,50%);
            bottom:50%;
            right:50%;
            z-index:3;
            height:200px;
            width:200px;
            content:'';
            display:block;
            border-radius:100%;
            background-color:rgba(var(--bs-primary-rgb),0.8);
            transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
        }
        & p {
            color: var(--bs-primary-hex);
            padding-bottom:;
            text-align: center;
            transform: translate(0,-140%);
            @media (min-width:576px){
                transform: translate(0,-300%);
            }
            @media (min-width:992px){
                position: absolute;
                width: 50vw;
            }
        }
        & a{
            z-index: 4;
            color: #fff;
            transform: scale(2);
            padding-bottom:46px;
            @media (min-width:576px){
                padding-bottom:25px;
            }
            @media (min-width:992px){
                padding-bottom:0;
            }
        }
        @media (min-width:576px){
            grid-column: 1 / span 14;
        }
         @media (min-width:992px){
             margin-bottom:0px;
             justify-self:center;
             margin-top: 280px;
             grid-column: 7 / span 1;
            grid-row: 1 / span 1;
            transform: translate(50%);
         } 
    }
    &:has(a:hover){
        & .play-button{
            &::before{
                transform: translate(50%,50%) scale(2);
                background-color:var(--bs-primary);
            }
            & .svg-inline--fa{
                color:#fff;
            }
        }
    }
    
    & .title{
        position:relative;
        z-index: 2;
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        @media (min-width:576px){
            grid-column: 1 / span 14;
        }
        @media (min-width:992px){
            grid-row: 1 / span 1;
            grid-column: 2 /  span 6;
        }
    }
    & .map-options{
        position: relative;
        z-index: 2;
        grid-row: 2 / span 1;
        grid-column: 1 / span 1;
        @media (min-width:576px){
            grid-column: 1 / span 14;
        }
        @media (min-width:992px){
            grid-row: 1 / span 1;
            grid-column: 9 / span 4;
        }
    }
    @media (min-width:992px){
        &.no-video-grid{
            --grid-height: auto;
            & .image{
                --grid-height: 1200px;
                position:absolute;
            }
        }
        --grid-height: 1920px;
    }
}

form {
    & textarea {
        min-height: 200px;   
    }
}


}