@layer framework, utils, zoe, connor;
@font-face {font-family:'Open Sans';font-display:swap;font-style:normal;font-weight:300 800;src:url(https://www.shellcoconstruction.com/assets/files/fonts/opensans-variablefont-wdth,wght.ttf) format('truetype');}
@font-face {font-family:'Open Sans';font-display:swap;font-style:italic;font-weight:300 800;src:url(https://www.shellcoconstruction.com/assets/files/fonts/opensans-italic-variablefont-wdth,wght.ttf) format('truetype');}
@font-face {font-family:'PT Serif';font-display:swap;font-style:normal;font-weight:400;src:url(https://www.shellcoconstruction.com/pt-serif-400.ttf) format('truetype');}
@font-face {font-family:'PT Serif';font-display:swap;font-style:italic;font-weight:400;src:url(https://www.shellcoconstruction.com/pt-serif-400-i.ttf) format('truetype');}
@font-face {font-family:'PT Serif';font-display:swap;font-style:normal;font-weight:700;src:url(https://www.shellcoconstruction.com/pt-serif-700.ttf) format('truetype');}
@font-face {font-family:'PT Serif';font-display:swap;font-style:italic;font-weight:700;src:url(https://www.shellcoconstruction.com/pt-serif-700-i.ttf) format('truetype');}
@layer utils {
    :root {
    --open-sans: 'Open Sans', sans-serif; 
    --pt-serif: 'PT Serif', serif;
    --sm: 35px;
    --md: 85px;
    --lg: 120px;
    --xl: 170px;
    --display-1: 45px;
    --fz-title-1: 36px;
    --fz-title-2: 32px;
    --fz-title-3: 24px;
    --fz-title-4: 21px;
    --fz-title-5: 18px;
    --fz-title-6: 16px;
    --fz-content-base: var(--fz-title-6);
    --bs-border-radius: 10px;
    --header-font: var(--open-sans);
    font-size: var(--fz-content-base);
}
@media (min-width:768px){
    :root{
        --fz-title-1: 70px;
        --display-1: 90px;
    }
}
@media (min-width:1400px){
    :root {
        --display-1: 100px;
    }
}
[data-sal] {
        --sal-easing: cubic-bezier(.25, .46, .45, .94);
    }
body{
    width:100%;
    overflow-x:hidden;
    font-family:var(--pt-serif);
    position:Relative;
}
body.loader-active:not(.loaded) > *:not(.loader-wrapper) {
    content-visibility: hidden;
}
main{
    overflow-x:hidden;
    position:Relative;
}
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:800;
    font-size:var(--fz-title-1);
    line-height:calc(70 / 60);
    text-transform:uppercase;
    color:var(--bs-dark);
}
h2, .h2{
    font-size:var(--fz-title-2);
    line-height:calc(36 / 32);
    font-weight:400;
    text-transform:uppercase;
    color:var(--bs-dark);
    margin-bottom:1rem;
}
h3, .h3{
    font-size:var(--fz-title-3);
    line-height:30px;
    font-weight:400;
}
h4, .h4{
    font-size:var(--fz-title-4);
    line-height:30px;
    color:inherit;
}
h5, .h5{
    font-size:var(--fz-title-5);
    line-height:calc(36 / 21);
    color:inherit;
    font-weight:500;
}
h6, .h6{
    font-size:var(--fz-title-6);
}
.display-1{
    font-size:var(--display-1);
    line-height:calc(74 / 100);
    font-weight:800;
}
.lead{
    font-size:24px;
    line-height:34px;
}
img[width][height] {
    content-visibility: auto;
}
img {
    max-width: 100%;
    height: auto;
}
.btn{
    --bs-btn-font-family: var(--open-sans);
    --bs-btn-border-radius: 30px;
    --bs-btn-font-size: var(--fz-title-4);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 1.125rem;
    --bs-btn-border-width: 2px;
    line-height:1;
    text-transform:uppercase;
    @media (min-width:768px){
        --bs-btn-padding-x: 2.75rem;
    }
}
.btn-outline-light{
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 255,255,255;
    --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(255,255,255, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: #fff;
}
.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --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-border-color: var(--bs-dark);
}
.btn-secondary {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-tgb);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-secondary-rgb), 0.125);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}
.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);
    }
.bg-tertiary{
    background-color:var(--bs-tertiary);
}
section,
.pt-sm,
.py-sm {
    padding-top: var(--sm);
}
section,
.pb-sm,
.py-sm {
    padding-bottom: var(--sm);
}
.pt-md,
.py-md {
    padding-top: var(--md);
}
.pb-md,
.py-md {
    padding-bottom: var(--md);
}
.pt-lg,
.py-lg {
    padding-top: var(--lg);
}
.pb-lg,
.py-lg {
    padding-bottom: var(--lg);
}
.mt-sm,
.my-sm {
    margin-top: var(--sm);
}
.mb-sm,
.my-sm {
    margin-bottom: var(--sm);
}    
.mt-md,
.my-md {
    margin-top: var(--md);
}
.mb-md,
.my-md {
    margin-bottom: var(--md);
}
.mt-lg,
.my-lg {
    margin-top: var(--lg);
}
.mb-lg,
.my-lg {
    margin-bottom: var(--lg);
}
@media (min-width: 576px) {
    .pt-sm-mob,
    .py-sm-mob {
        padding-top: var(--sm);
    }
    .pb-sm-mob,
    .py-sm-mob {
        padding-bottom: var(--sm);
    }
    .pt-md-mob,
    .py-md-mob {
        padding-top: var(--md);
    }
    .pb-md-mob,
    .py-md-mob {
        padding-bottom: var(--md);
    }
    .pt-lg-mob,
    .py-lg-mob {
        padding-top: var(--lg);
    }
    .pb-lg-mob,
    .py-lg-mob {
        padding-bottom: var(--lg);
    }
    .mt-sm-mob,
    .my-sm-mob {
        margin-top: var(--sm);
    }
    .mb-sm-mob,
    .my-sm-mob {
        margin-bottom: var(--sm);
    }    
    .mt-md-mob,
    .my-md-mob {
        margin-top: var(--md);
    }
    .mb-md-mob,
    .my-md-mob {
        margin-bottom: var(--md);
    }
    .mt-lg-mob,
    .my-lg-mob {
        margin-top: var(--lg);
    }
    .mb-lg-mob,
    .my-lg-mob {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 768px) {
    .pt-sm-tab,
    .py-sm-tab {
        padding-top: var(--sm);
    }
    .pb-sm-tab,
    .py-sm-tab {
        padding-bottom: var(--sm);
    }
    section,
    .pt-md-tab,
    .py-md-tab {
        padding-top: var(--md);
    }
    section,
    .pb-md-tab,
    .py-md-tab {
        padding-bottom: var(--md);
    }
    .pt-lg-tab,
    .py-lg-tab {
        padding-top: var(--lg);
    }
    .pb-lg-tab,
    .py-lg-tab {
        padding-bottom: var(--lg);
    }
    .mt-sm-tab,
    .my-sm-tab {
        margin-top: var(--sm);
    }
    .mb-sm-tab,
    .my-sm-tab {
        margin-bottom: var(--sm);
    }    
    .mt-md-tab,
    .my-md-tab {
        margin-top: var(--md);
    }
    .mb-md-tab,
    .my-md-tab {
        margin-bottom: var(--md);
    }
    .mt-lg-tab,
    .my-lg-tab {
        margin-top: var(--lg);
    }
    .mb-lg-tab,
    .my-lg-tab {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 992px) {
    .pt-sm-lap,
    .py-sm-lap {
        padding-top: var(--sm);
    }
    .pb-sm-lap,
    .py-sm-lap {
        padding-bottom: var(--sm);
    }
    .pt-md-lap,
    .py-md-lap {
        padding-top: var(--md);
    }
    .pb-md-lap,
    .py-md-lap {
        padding-bottom: var(--md);
    }
    .pt-lg-lap,
    .py-lg-lap {
        padding-top: var(--lg);
    }
    .pb-lg-lap,
    .py-lg-lap {
        padding-bottom: var(--lg);
    }
    .mt-sm-lap,
    .my-sm-lap {
        margin-top: var(--sm);
    }
    .mb-sm-lap,
    .my-sm-lap {
        margin-bottom: var(--sm);
    }    
    .mt-md-lap,
    .my-md-lap {
        margin-top: var(--md);
    }
    .mb-md-lap,
    .my-md-lap {
        margin-bottom: var(--md);
    }
    .mt-lg-lap,
    .my-lg-lap {
        margin-top: var(--lg);
    }
    .mb-lg-lap,
    .my-lg-lap {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 1200px) {
    .pt-sm-desk,
    .py-sm-desk {
        padding-top: var(--sm);
    }
    .pb-sm-desk,
    .py-sm-desk {
        padding-bottom: var(--sm);
    }
    .pt-md-desk,
    .py-md-desk {
        padding-top: var(--md);
    }
    .pb-md-desk,
    .py-md-desk {
        padding-bottom: var(--md);
    }
    .pt-lg-desk,
    .py-lg-desk {
        padding-top: var(--lg);
    }
    .pb-lg-desk,
    .py-lg-desk {
        padding-bottom: var(--lg);
    }
    .mt-sm-desk,
    .my-sm-desk {
        margin-top: var(--sm);
    }
    .mb-sm-desk,
    .my-sm-desk {
        margin-bottom: var(--sm);
    }    
    .mt-md-desk,
    .my-md-desk {
        margin-top: var(--md);
    }
    .mb-md-desk,
    .my-md-desk {
        margin-bottom: var(--md);
    }
    .mt-lg-desk,
    .my-lg-desk {
        margin-top: var(--lg);
    }
    .mb-lg-desk,
    .my-lg-desk {
        margin-bottom: var(--lg);
    }
}
}

@layer ogulcan {
    .stacked-images {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.stacked-img {

  position: relative;
  z-index: 1;
}

.first-img {
  margin-top: 0;
}

.second-img {
    width: 50%;
    margin-top: -50px;
    z-index: 2;
    align-self:end;
}

.third-img {
    width: 50%;
    margin-top: 35px;
    margin-left: 40px;
    z-index: 1;
}
@media (max-width:1199px){
    .first-img {
      width:75%;
    }
}
@media (max-width: 767px) {
  .second-img,
  .third-img,
  .first-img {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
  }
}

    }
@layer zoe {
    :root{
    --nav-height:85px
}
@media(min-width:576px){
    :root{
        --nav-height:100px
    }
}
.navbar{--bs-btn-padding-x: 2.75rem;
    --bs-navbar-brand-padding-y: 20px;
    --bs-navbar-padding-y: 0rem;
    --bs-navbar-nav-link-padding-x: 15px;
    --bs-navbar-active-color: var(--bs-dark);
    --bs-navbar-toggler-padding-y: 0.85rem;
    --bs-navbar-toggler-border-radius: 0;
    --bs-navbar-toggler-border-color: transparent;
    font-family:var(--header-font);
    & .navbar-brand{
        margin-right:0;
        & svg{
            height:45px;
            @media (min-width:576px){
                height:60px;
            }
        }
    }
    & .navbar-nav{
        --bs-nav-link-hover-color: var(--bs-dark);
        --bs-nav-link-padding-x: 10px;
        --bs-nav-link-color: var(--bs-dark);
    }
    .navbar-toggler{
        color:var(--bs-dark);
    }
    & .nav-link{
        text-transform:uppercase;
        transition: font-weight 500ms ease;
        & svg{
            color:var(--bs-primary);
        }
        &.active{
            background-color:#fff;
            font-weight:700;
            & svg{
                color:var(--bs-navbar-active-color);
            }
        }
        &:hover{
            background-color:#fff;
            font-weight:700;
            & svg{
                color:var(--bs-navbar-active-color);
            }
        }
        &:focus{
            background-color:#fff;
            font-weight:700;
            & svg{
                color:var(--bs-navbar-active-color);
            }
        }
    }
    & .dropdown-menu{
        border:none;
        border-bottom:10px solid var(--bs-primary);
        --bs-dropdown-bg: var(--bs-dark);
        --bs-dropdown-border-radius: 0;
        --bs-dropdown-spacer: 0;
        --bs-dropdown-color: #fff;
        --bs-dropdown-link-color: var(--bs-light);
        --bs-dropdown-link-hover-color: var(--bs-light);
        --bs-dropdown-link-hover-bg: var(--bs-dark);
        --bs-dropdown-link-active-color: var(--bs-light);
        --bs-dropdown-link-active-bg: var(--bs-dark);
        --bs-dropdown-title-color: #fff;
        --bs-dropdown-font-size: 1.25rem;
        --bs-dropdown-header-padding-y: 0;
        & .dropdown-item{
            white-space:normal;
            transition: font-weight .3s ease;
            &:hover{
                font-weight:600;
            }
            &:focus{
                font-weight:600;
            }
            &.active{
                font-weight:600;
            }
        }
        & .dropdown-header{
            font-size:var(--fz-title-4);
            line-height:40px;
        }
    }
    & .mega-menu-grid{
        height:auto;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        overflow:hidden;
        position:relative;
        width:100%;
        padding-top:10px;
        & .large-link{
            position:relative;
            grid-column: 1 / span 1;
            grid-row: span 1;
            padding-bottom:20px;
        }
        & .small-link{
            position:relative;
            grid-column: 1 / span 1;
            grid-row: span 1;
            & a{
                font-size:var(--fz-title-4);
                color:#fff;
                text-transform:uppercase;
            }
        }
    }
    @media (min-width:992px){
        & .container-fluid{
            align-items:unset;
            & .nav-link{
                height:100%;
                line-height:84px;
            }
        }
        & .mega-menu-grid{
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
            & .large-link{
                grid-column: span 1;
                grid-row: span 6;
                padding-bottom:0px;
            }
            & .small-link{
                grid-column: 3 / span 1;
                grid-row: span 1;
            }
        }
    }
}
.btn-close{
    --bs-btn-close-bg: none;
    --bs-btn-close-color: var(--bs-dark);
    --bs-btn-close-opacity: 1;
    --bs-btn-close-focus-opacity: .75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.stat-box{
    --stat-color:var(--bs-dark);
    --stat-value-fs: 52px;
    border:2px solid var(--stat-color);
    border-radius: var(--bs-border-radius);
    background:rgba(19, 20, 23, 0.2);
    padding:1.5rem 0;
    & p{
        color:var(--stat-color);
        margin-bottom:0;
        font-family:var(--header-font);
        &.stat-value{
            font-weight:bold;
            font-size:var(--stat-value-fs);
            line-height:1.2;
        }
        &.stat-title{
            text-transform:uppercase;
            font-size:var(--fz-title-4);
            line-height:40px;
        }
    }
}
.stat-count{
    text-align:center;
    padding-block:0px;
    & .stat-value{
        font-size:72px;
        color:var(--bs-primary);
        font-family:var(--header-font);
        font-weight:700;
        line-height:1;
        text-transform:uppercase;
        margin-bottom:5px;
    }
    & .stat-label{
        text-transform:uppercase;
        font-family:var(--header-font);
        color:var(--bs-dark);
        font-size:var(--fz-title-4);
        line-height:40px;
        margin-bottom:0;
    }
    @media (min-width: 576px){
        padding-block:30px;
        border-left:1px solid var(--bs-primary);
        border-right:1px solid var(--bs-primary);
        &:first-child{
            border-left:none;
        }
        &:last-child{
            border-right:none;
        }
        &:nth-child(2){
            border-right:none;
        }
        &:nth-child(3){
            border-left:none;
        }
    }
    @media (min-width:992px){
        &:nth-child(2){
            border-right:1px solid var(--bs-primary);
        }
        &:nth-child(3){
            border-left:1px solid var(--bs-primary);
        }
    }
}
.highlights-container{
    & .stat-count{
        text-align:left;
        border-left:none;
        border-right:none;
        border-bottom:2px solid var(--bs-primary);
        & .stat-label{
            text-transform:unset;
        }
        &:last-child{
            border-bottom:none;
        }
    }
}
.background-image-grid{
    height:auto;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    padding-top:0;
    padding-bottom:0;
    &.service-hero{
        & .container-lg{
            align-self:end;
            @media (min-width:768px){
                padding-block:var(--md);
            }
        }
    }
    & h1, .h1, h2, .h2{
        color:#fff;
    }
    & p {
        color:#fff;
    }
    & .stat-box{
        --stat-color:#fff;
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--md);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media (min-width:1700px){
            padding-top:0;
        }
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--md);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media (min-width:1700px){
            padding-top:0;
        }
    }
    & .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:.8;
        }
        @media (min-width: 768px) {
            height:100vh;
        }
    }
    
    & .scroll-down-container{
        position:relative;
        z-index:10;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:end;
        justify-self:end;
        padding-right:50px;
        margin-bottom:15px;
        @media (min-width:576px){
            margin-bottom:30px;
        }
    }
    @media (min-width: 768px) {
        height:100vh;
    }
    &.cta{
        height:auto;
        & .hero-picture{
            height:auto;
            & .bg-image{
                opacity:.5;
            }
            @media (min-width:768px){
                height:100%;
            }
        }
        & p{
            font-size:var(--fz-title-4);
            line-height:30px;
            margin-bottom:2.5rem;
        }
        @media (min-width:768px){
            height:600px;
        }
    }
}
header.background-image-grid{
    & .hero-picture{
        & .bg-image{
            @media (min-width:768px){
                transform: scale(1);
            transition: transform 4.75s linear;
            transition-delay: 0.5s;
            }
        }
        @media (min-width: 768px) {
            height:calc(100vh - var(--nav-height));
            will-change: transform;
        }
    }
    @media (min-width: 768px) {
        &.sal-complete .bg-image{
            transform: scale(1.075);
        }
        height:calc(100vh - var(--nav-height));
    }
}
.subtitle{
    text-transform:uppercase;
    font-family:var(--header-font);
    font-size:var(--fz-title-4);
}
.video-btn-container .circle-play-btn{
    --size: 100px;
    position:Absolute;
    z-index:3;
    top:calc(50% - (var(--size) / 2));
    left:calc(50% - (var(--size) / 2));
    margin-top:0;
    background:#fff;
    border-radius:50%;
    height:var(--size);
    width:var(--size);
    display: block;
    text-align:center;
    color:var(--bs-primary);
    padding-top:calc(var(--size) / 4);
    font-size:32px;
    transition: all 500ms ease;
    &:hover{
        transform:scale(.85);
    }
    &:focus{
        transform:scale(.85);
    }
}
.content{
    & p, li{
        font-size:var(--fz-title-4);
        line-height:30px;
        & a{
            color:inherit;
            font-weight:bold;
            text-decoration:none;
            &:hover{
                text-decoration:underline;
            }
            &:focus{
                text-decoration:underline;
            }
        }
    }
    & :last-child{
        margin-bottom:0;
    }
    & strong{
        color:var(--bs-primary);
        font-family:var(--header-font);
        font-weight:600;
    }
}
.gallery-grid{
    display:grid;
    column-gap:1.5rem;
    row-gap:1.5rem;
    grid-auto-rows:200px;
    grid-template-columns:1fr;
    & .gallery-item{
        position:relative;
        overflow:hidden;
        grid-column: span 1;
        grid-row: span 1;
        background-color:var(--bs-primary);
        & img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
            padding:0;
            transition:padding .3s ease;
        }
        &:has(a:hover){
            & img{
                padding:3px;
            }
        }
        &:has(a:focus){
            & img{
                padding:3px;
            }
        }
        @media (min-width:576px){
            &:nth-child(4n+1){
                grid-row: span 3;
            }
            &:nth-child(4n+2){
                grid-row: span 2;
                --sal-delay: .1s;
            }
            &:nth-child(4n+3){
                grid-row: span 3;
                --sal-delay: .2s;
            }
            &:nth-child(4n){
                grid-row: span 2;
                --sal-delay: .3s;
            }
        }
        @media (min-width:992px){
            &:nth-child(7n+1){
                grid-row: span 4;
            }
            &:nth-child(7n+2){
                grid-row: span 2;
                --sal-delay: .1s;
            }
            &:nth-child(7n+3){
                grid-row: span 3;
                --sal-delay: .2s;
            }
            &:nth-child(7n+4){
                grid-row: span 3;
                --sal-delay: .3s;
            }
            &:nth-child(7n+5){
                grid-row: span 4;
                --sal-delay: .4s;
            }
            &:nth-child(7n+6){
                grid-row: span 3;
                --sal-delay: .5s;
            }
            &:nth-child(7n){
                grid-row: span 2;
                --sal-delay: .6s;
            }
        }
    }
    @media (min-width:576px){
        grid-auto-rows:100px;
        grid-template-columns:1fr 1fr;
    }
    @media (min-width:992px){
        grid-auto-rows:75px;
        grid-template-columns:1fr 1fr 1fr;
    }
    @media (min-width:1200px){
        grid-auto-rows:90px;
    }
    @media (min-width:1400px){
        grid-auto-rows:100px;
    }
}
.card.service-card{
    --bs-card-title-color: var(--bs-dark);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
    --bs-card-spacer-x: 0;
    --bs-card-inner-border-radius: 0;
    transition: opacity .3s ease;
    & .card-title{
        text-transform:uppercase;
        margin-bottom:0;
        font-size:var(--fz-title-4);
    }
    & p{
        font-size:var(--fz-title-4);
        line-height:30px;
    }
    & a{
        font-family:var(--header-font);
        font-size:var(--fz-title-4);
        line-height:30px;
        & svg{
            margin-left:5px;
        }
    }
    &:has(a:hover){
        opacity:.75;
    }
    &:has(a:focus){
        opacity:.75;
    }
}
.card.card--showcase{
    --bs-card-title-color: var(--bs-dark);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
    --bs-card-spacer-x: 0;
    --bs-card-inner-border-radius: 0;
    transition: opacity .3s ease;
    & .card-title{
        text-transform:uppercase;
        margin-bottom:0;
        font-size:var(--fz-title-4);
    }
    & p{
        font-size:var(--fz-title-4);
        line-height:30px;
    }
    & a{
        font-family:var(--header-font);
        font-size:var(--fz-title-4);
        line-height:30px;
        & svg{
            margin-left:5px;
            &.right-arrow{
                height:21px;
                fill:var(--bs-primary);
                width:auto;
            }
        }
    }
    &:has(a:hover){
        opacity:.75;
    }
    &:has(a:focus){
        opacity:.75;
    }
}
footer{
    font-family:var(--header-font);
    & table{
        --bs-table-bg: transparent;
        --bs-table-color: var(--bs-light);
        margin-top:var(--sm);
        & td{
            padding:10px 0;
            font-size:18px;
            line-height:30px;
            &:first-child{
                color:#fff;
                font-size:var(--fz-title-4);
                padding-right:5px;
            }
        }
    }
    & p{
        color:var(--bs-light);
        font-size:18px;
        line-height:30px;
        &.foot-title{
          color:#fff;
          text-transform:uppercase;
          font-size:var(--fz-title-4);
        }
        &.copyright a{
            color:var(--bs-light);
            margin-left:3px;
            &:hover{
                color:var(--bs-primary);
            }
            &:focus{
                color:var(--bs-primary);
            }
        }
    }
    & .footer-links li a{
        text-decoration:none;
        color:var(--bs-light);
        padding:5px 0;
        display:block;
        font-size:var(--fz-title-4);
        &:hover{
            color:var(--bs-primary);
        }
        &:focus{
            color:var(--bs-primary);
        }
    }
    & .social-link{
        color:#fff;
        font-size:var(--fz-title-4);
        &:hover{
            color:var(--bs-primary);
        }
        &:focus{
            color:var(--bs-primary);
        }
    }
}
.form-select{
    background-color:var(--bs-secondary);
    border-radius:0;
    border-color:var(--bs-secondary);
    text-align:right;
    color:var(--bs-dark);
    font-size:var(--fz-title-4);
    font-family:var(--header-font);
    line-height:42px;
    --bs-form-select-bg-img: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23a31d38"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
    &#inquiry{
        text-align:left;
        font-size:var(--fz-title-5);
        line-height:30px;
        height:auto;
    }
    &:focus{
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
    }
}
label{
    color:var(--bs-dark);
    font-size:var(--fz-title-5);
    font-family:var(--header-font);
    line-height:30px;
}
.form-control{
    background-color:var(--bs-secondary);
    border-radius:0;
    border-color:var(--bs-secondary);
    color:var(--bs-dark);
    font-size:var(--fz-title-5);
    font-family:var(--header-font);
    line-height:30px;
    height:auto;
    &:is(textarea){
        min-height:150px;
    }
    &:focus{
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
    }
}
.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
}
.form-floating>textarea:focus~label::after, .form-floating>textarea:not(:placeholder-shown)~label::after{
    background-color:var(--bs-secondary);
}
.error{
    color:var(--bs-primary);
}
.background-video-grid{
    min-height:500px;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    background-color:var(--bs-dark);
    &.service-hero{
        & .container-lg{
            align-self:end;
            @media (min-width:768px){
                padding-block:var(--md);
            }
        }
    }
    &.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,.3);
    }
    & h1, .h1, h2, .h2{
        color:#fff;
    }
    & p {
        color:#fff;
    }
    & .stat-box{
        --stat-color:#fff;
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--md);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--md);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .youtube-background{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        background-repeat:no-repeat;
        background-size:cover;
        & video{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
        }
        &:has(video){
            opacity:1;
        }
        @media (min-width: 768px) {
            height:calc(100vh - var(--nav-height));
        }
    }
    & .scroll-down-container{
        position:relative;
        z-index:10;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:end;
        justify-self:end;
        padding-right:50px;
        margin-bottom:15px;
        @media (min-width:576px){
            margin-bottom:30px;
        }
    }
    @media (min-width: 768px) {
        height:calc(100vh - var(--nav-height));
    }
}
 a.scroll-btn{
    display:block;
    transition: opacity 500ms ease;
}
a.scroll-btn:hover,
a.scroll-btn:focus{
   opacity:.65;
}
 a.scroll-btn span {
  position: absolute;
  z-index:9;
  bottom: 20px;
  right: 50%;
  width: 20px;
  height: 35px;
  margin-left: 0;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
a.scroll-btn span::before {
  position: absolute;
  top: 5px;
  left: 50%;
  content: '';
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background-color: #fff;
  border-radius: 50%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}
a.scroll-btn span::after {
  position: absolute;
  bottom: -13px;
  left: 50%;
  width: 11px;
  height: 11px;
  content: '';
  margin-left: -5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.feat-card{
    --bs-bg-opacity:0.75;
    padding-block:4.5rem;
    padding-inline:1.5rem;
    position:relative;
    & .feat-icon{
        width:210px;
        height:auto;
        position:relative;
        z-index:2;
        margin-top:-274px;
        margin-left:auto;
        margin-right:auto;
    }
    & p{
        font-size:var(--fz-title-4);
        line-height:30px;
        color:var(--bs-light);
        margin-bottom:0;
    }
    & h2{
        color:#fff;
    }
    & .btn{
        margin-top:2rem;
    }
}

.feat-grid{
    height:auto;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    padding-top:0;
    padding-bottom:0;
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--xl);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--xl);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .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:.8;
        }
        @media (min-width: 768px) {
            height:clamp(600px, 100vh, 900px);
        }
    }
    @media (min-width: 768px) {
        height:clamp(600px, 100vh, 900px);
    }
}
.home-proj-carousel .carousel{
    --bs-carousel-indicator-active-bg: var(--bs-dark);
    & .white-bar{
        background-color:#fff;
        display:block;
        position:absolute;
        bottom:0;
        right:0;
        z-index:20;
        padding:10px 1rem;
    }
    & .carousel-control-next{
        position:relative;
        top:unset;
        bottom:unset;
        color:var(--bs-dark);
        left:unset;
        right:unset;
        opacity:1;
        font-size:21px;
    }
    & .carousel-control-prev{
        position:relative;
        top:unset;
        bottom:unset;
        color:var(--bs-dark);
        left:unset;
        right:unset;
        opacity:1;
        font-size:21px;
    }
    & .carousel-indicators{
        position:relative;
        top:unset;
        bottom:unset;
        left:unset;
        right:unset;
        margin-right:0;
        margin-left:0;
        margin-bottom:0;
        & [data-bs-target]{
            width:14px;
            height:14px;
            border-radius:100%;
            border:1px solid var(--bs-dark);
            background-color:#fff;
            opacity:1;
            margin-left:5px;
            margin-right:5px;
            &.active{
                background-color: var(--bs-carousel-indicator-active-bg);
            }
        }
    }
}
.instagram-container p a{
    text-decoration:none;
    font-size:30px;
    color:#fff;
    transition: font-weight .3s ease;
    &:hover{
        font-weight:700;
    }
    &:focus{
        font-weight:700;
    }
    @media (min-width:576px){
        font-size:36px;
    }
}
.intro-section{
    & .stat-count{
        border:none;
        padding-block:0;
        & .stat-label{
            color:var(--bs-primary);
        }
    }
    & .content{
        & h1{
            color:#fff;
        }
        & h2{
            color:#fff;
        }
        & h3{
            color:#fff;
        }
        & h4{
            color:#fff;
        }
        & p{
            font-size:var(--fz-title-4);
            line-height:30px;
            color:var(--bs-light);
        }
        & li{
            font-size:var(--fz-title-4);
            line-height:30px;
            color:var(--bs-light);
        }
    }
}
.company-carousel{
    height:auto;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    padding-top:0;
    padding-bottom:0;
    & .content{
        position:relative;
        & p{
            font-size:var(--fz-title-4);
            line-height:30px;
            color:var(--bs-light);
            margin-bottom:0;
        }
        & h2{
            color:#fff;
        }
        & .btn{
            margin-top:2rem;
        }
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--sm);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--sm);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .container-xxl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--sm);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--sm);
        }
        @media(min-width:1700px){
            padding-top:0;
        }
    }
    & .carousel{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        top:0;
        & .carousel-inner{
            height:100%;
        }
        & .carousel-item{
            background:#000;
            height:100%;
        }
    }
    & .hero-picture{
        height:100%;
        width:100%;
        position:relative;
        & .bg-image{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
            opacity:.8;
        }
        @media (min-width: 768px) {
            height:clamp(600px, 100vh, 900px);
        }
    }
    @media (min-width: 768px) {
        height:clamp(600px, 100vh, 900px);
    }
}
.year-grid{
    height:auto;
    padding-block: 0;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap:1.5rem;
    overflow:hidden;
    position:relative;
    width:100%;
    row-gap:3rem;
    & .image{
        position:relative;
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
        z-index:3;
        align-self:end;
        & img{
            width:100%;
        }
        @media (min-width: 768px) {
            grid-column: 1 / span 14;
        }
        @media (min-width: 992px) {
            grid-row: 1 / span 2;
            grid-column: 1 / span 7;
            justify-self:start;
        }
    }
    & .years {
        position:relative;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        z-index:2;
        padding-left:.75rem;
        padding-right:.75rem;
        & .hstack{
            justify-content:end;
            @media(min-width:992px){
                justify-content:start;
            }
        }
        & .stat-count{
            & .stat-value{
                color:var(--bs-warning);
                font-size:clamp(100px, 60vw, 600px);
                line-height:.85;
                margin-bottom:0;
                font-weight:700;
                font-family:var(--header-font);
                @media (min-width:992px){
                    font-size:clamp(100px, 40vw, 600px);
                }
            }
        }
        & .label p{
            text-transform:uppercase;
            color:var(--bs-warning);
            font-family:var(--header-font);
            margin:0;
            font-weight:700;
            line-height:.85;
            letter-spacing:-.275em;
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size:clamp(12px, 7.2vw, 72px);
            @media (min-width:992px){
                font-size:clamp(12px, 4.8vw, 72px);
            }
        }
        @media (min-width: 768px) {
            grid-column: 1 / span 14;
        }
        @media (min-width: 992px) {
            padding-left:0;
            padding-right:0;
            grid-row: 1 / span 1;
            grid-column: 4 / span 9;
        }
    }
    & .video-block{
        position:relative;
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        z-index:4;
        padding-block:var(--sm);
        padding-left:.75rem;
        padding-right:.75rem;
        & p{
            font-size:var(--fz-title-4);
            line-height:30px;
            color:var(--bs-warning);
            margin-bottom:0;
        }
        & .circle-play-btn{
            --size: 100px;
            margin-top:0;
            background:var(--bs-primary);
            border-radius:50%;
            height:var(--size);
            width:var(--size);
            display: block;
            text-align:center;
            color:#fff;
            padding-top:calc(var(--size) / 4);
            font-size:32px;
            transition: all 500ms ease;
            &:hover{
                transform:scale(.85);
            }
            &:focus{
                transform:scale(.85);
            }
        }
        @media (min-width: 768px) {
            grid-column: 1 / span 7;
            align-self:center;
        }
        @media (min-width: 992px) {
            padding-block:0;
            grid-row: 2 / span 1;
            grid-column: 9 / span 5;
            align-self:start;
        }
        @media (min-width: 1200px) {
            grid-column: 9 / span 4;
        }
    }
    @media (min-width:576px){
        row-gap:0;
    }
    @media (min-width: 768px) {
        grid-template-columns: 1fr repeat(12, calc((720px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
    }
}
.top-list{
    & li{
        color:var(--bs-dark);
        padding:13px 0;
        font-family:var(--header-font);
        font-size:var(--fz-title-4);
        & svg{
            margin-right:10px;
        }
        &:not(:last-child){
            border-bottom:1px solid var(--bs-primary);
        }
    }
}
.tab-section{
    & .nav{
        --bs-nav-link-color: var(--bs-dark);
        --bs-nav-link-hover-color: var(--bs-primary);
        --bs-nav-link-font-size: var(--fz-title-4);
        --bs-nav-link-padding-y: 1.25rem;
        gap:.75rem;
        &.nav-tabs{
            --bs-nav-tabs-border-radius: 0;
            --bs-nav-tabs-link-active-color: var(--bs-primary);
            --bs-nav-tabs-link-active-bg: var(--bs-info);
            --bs-nav-tabs-border-width: 5px;
            --bs-nav-tabs-border-color: var(--bs-info);
            --bs-nav-tabs-link-hover-border-color: var(--bs-info) var(--bs-info) var(--bs-info);
            --bs-nav-tabs-link-active-border-color: var(--bs-info) var(--bs-info) var(--bs-primary);
        }
        & .nav-link{
            font-family:var(--header-font);
            text-transform:uppercase;
            border-left:none;
            border-right:none;
            line-height:30px;
        }
    }
}
.contact-table{
    & td{
        font-size:var(--fz-title-4);
        line-height:30px;
        color:var(--bs-body-color);
        &:first-child{
            text-transform:uppercase;
            color:var(--bs-primary);
            font-family:var(--header-font);
            @media(min-width:768px){
                min-width:220px;
            }
        }
    }
}
.benefit-list{
    border-bottom:1px solid rgb(175, 164, 121);
    font-size:var(--fz-title-3);
    padding-block:25px;
    color:var(--bs-primary);
    &:last-child{
        border-bottom:none;
    }
    @media (min-width:576px){
       &:nth-last-child(2){
            border-bottom:none;
        } 
    }
    @media (min-width:992px){
       &:nth-last-child(3){
            border-bottom:none;
        } 
    }
}
.home:after, .service-hero:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23d5c692' fill-rule='evenodd' d='M12 2.39V5l-7 7H2.39L12 2.39zM4.999 0l-5 4.998v-2.61l2.39-2.39h2.61z'/%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: .6667rem;
    bottom: 0;
    content: "";
    height: calc(1rem + 1.667vw);
    left: 0;
    opacity: .5;
    opacity: 1;
    position: relative;
    position: absolute;
    transform: translateY(50%);
    width: 100%;
    z-index: 7;
}
.form-job-listing {
    --bs-border-color: var(--bs-secondary);
    --bs-body-bg: var(--bs-secondary);
    --bs-body-color: rgba(var(--bs-dark-rgb), 0.75);
    /** Used in filepond styles for my own sanity -cw */
    --r: var(--bs-border-radius-pill);
    --bg: var(--bs-secondary);
    --bc: var(--bs-secondary);
    --c: var(--bs-dark);
}
.form-job-listing :is(.filepond, .filepond--root .filepond--panel) {
    max-height: 100px;
}
.form-job-listing .filepond--root {
    margin-bottom: 0;
    font-family: var(--bs-body-font-family);
}
.form-job-listing .placeholder {
    background: var(--bg);
    height: 100px !important;
    width: 100%;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
}
.form-job-listing .filepond--drop-label {
    color: var(--c);
    right: unset;
    left:0;
    padding-left: 0.75rem;
}
.form-job-listing .filepond--file {
    color: inherit;
    padding: 1.25em 0.5625em;
}
.form-job-listing .filepond--item {
    margin: 0;
}
.form-job-listing .filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: unset;
}
.form-job-listing .filepond--panel-root {
    border-radius: var(--r);
    background-color: var(--bg) !important;
}
.form-job-listing .filepond--root > .filepond--panel {
    border: 2px dashed var(--c) !important;
}
.form-job-listing :is(.filepond--panel-top, .filepond--panel-bottom) {
    background: transparent !important;
}
.form-job-listing .filepond--panel-center {
    border-radius: var(--r) !important;
}
.form-job-listing .filepond--root *:not(text) {
    font-size: var(--bs-body-font-size);
}
.form-job-listing .filepond--root .filepond--file-info {
    --bs-body-font-size: 0.95rem;
    margin: 0 0.5em;
}
.form-job-listing .filepond--root .filepond--file-info-sub {
    --bs-body-font-size: 0.75rem;
    opacity:.8;
}
.form-job-listing .filepond--panel-center {
    height: auto !important;
}
.form-job-listing .filepond--root .filepond--drop-label {
    min-height: 100px;
    height: 100px !important;
}
.form-job-listing .filepond--root .filepond--list-scroller {
    margin-top: 0.8em;
}
.form-job-listing .filepond--file [data-align*="left"] {
    left: 0;
}
.form-job-listing .filepond--list-scroller:has( > ul:not(:empty)) + .filepond--panel {
    --c: var(--bs-body-light);
}
.form-job-listing .filepond--file-status{
    align-items:flex-start;
    max-width:285px;
    text-align:left;
}
.form-job-listing .filepond--file-status *{
    white-space:normal;
}
.form-job-listing .filepond--file-status .filepond--file-status-main{
    font-size:13px;
}
.form-job-listing .filepond--file-status .filepond--file-status-sub{
    font-size:11px;
    opacity:.8;
}
.filepond--item-panel{
    background-color:var(--bs-light);
}
.form-job-listing .error{
    color:var(--bs-primary);
}
[data-filepond-item-state*=error] .filepond--file-info .filepond--file-info-main[aria-hidden=true] + .filepond--file-info-sub,
[data-filepond-item-state*=invalid] .filepond--file-info .filepond--file-info-main[aria-hidden=true] + .filepond--file-info-sub,
[data-filepond-item-state=cancelled] .filepond--file-info .filepond--file-info-main[aria-hidden=true] + .filepond--file-info-sub{
    display:none;
}
    }
@layer connor {
    .dropdown-menu:has(.mega-container) {
    right: 0;
    left: auto;
    --bs-dropdown-min-width: 22rem;
}
.dropdown-menu .dropdown-header {
    color: var(--bs-dropdown-title-color);
    text-transform: uppercase;
}
.nav-link.show {
    background-color: #fff;
    > svg {
        color: var(--bs-navbar-active-color) !important;
    }
}
.highlights-container [class*="col-"]:has(> .stat-value) {
    container-type: inline-size;
}
.highlights-container .stat-count .stat-value {
    /* Overrides styles higher in the layer specificity */
    font-size: clamp(1rem, 1rem + 11cqi, 72px);
}
.inset-0 {
    inset: 0 !important;
}
.card--showcase .card-body > p {
    flex-grow: 1;
}
.pt-serif {
    font-family: 'PT Serif', serif;
}

.swiper:not(.swiper-initialized) {
    .swiper-wrapper {
        display: flex;
    }
    &:is(.service-swiper) .swiper-slide {
        width: 500px;
    }
}
.service-picture-grid h4 {
    text-transform: uppercase;
}
.service-picture-grid {
    display: grid;
    gap: 0 2.5vw;
    grid-auto-rows: minmax(min-content, max-content);
    grid-template-columns: repeat(12, minmax(0,1fr));
    max-width: calc(100vw - 30px);
    margin: 0 auto;
    padding-right: 1rem;
    @media(min-width: 992px) {
        margin: 0 auto 0 0;
    }
    @media (min-width: 1400px) {
        max-width: 1320px;
    }
}
.service-picture-grid img {
    object-fit: cover;
}
.service-picture-grid .images {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-left: -15px;
    @media (min-width: 992px) {
        margin-left: 0;
        grid-row: 1 / span 7;
    }
    grid-template-columns: subgrid;
    grid-template-rows: repeat(3, 1fr);
    @media (min-width: 768px){
      grid-template-rows: 75px 25px 250px 100px 150px 25px;  
    }
}
.service-picture-grid .content {
    display: contents;
    > * {
        grid-column: 1 / -1;
    }
    @media (min-width: 992px) {
        > * {
            grid-row: var(--grid-row);
            grid-column: 7 / -1;
        }
        > :is([style*="--grid-row: 7"]) ~ * {
            /* grid-column: 3 / -1; */
        }
    }
    
}
.bkg-pattern {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23d5c692' fill-rule='evenodd' d='M12 2.39V5l-7 7H2.39L12 2.39zM4.999 0l-5 4.998v-2.61l2.39-2.39h2.61z'/%3E%3C/svg%3E");
    background-size: .6667rem;
}
.grid-bkg-pattern {
    grid-column: 1 / span 8 !important;
    grid-row: 2 / span 2 !important;
    @media (min-width: 768px) {
        grid-column: 2 / span 7 !important;
        grid-row: 2 / span 5 !important;
    }
    @media (min-width: 992px) {
        grid-column: 1 / span 3 !important;
    }
    margin-top: 2.5vw;
    margin-right: -1.25vw;
    z-index: 0;
}
.service-picture-grid .content h2 {
    align-self: end;
    grid-column: 1 / -1;
    @media (min-width: 992px) {
        grid-column: 6 / -1;
        grid-row: 1;
        
    }
}
.service-picture-grid .content .content-items > * {
    grid-column: 1 / -1;
    @media (min-width: 992px) {
        grid-column: 7 / -1;
    }
}
.service-picture-grid .image-1 {
    grid-column: 4 / span 9;
    grid-row: 1 / span 2;
    @media (min-width:768px){
        grid-column: 7 / span 5;
        grid-row: 1 / span 3;
    }
    @media (min-width: 992px) {
        grid-column: 3 / span 3;
    }
    
    height: 100%;
    max-width: 100%;
    
}
.service-picture-grid .image-2 {
    grid-column: 1 / span 6;
    @media (min-width: 992px) {
        grid-column: 1 / span 2;
    }
    grid-row: 2 / span 3;
    & img {
        height: 100%;
    }
    @media (max-width:767px){
        display:none;
    }
}
.service-picture-grid .image-3 {
    grid-column: 7 / span 6;
    @media (min-width: 992px) {
        grid-column: 3 / span 4;
    }
    grid-row: 4 / span 3;
    margin-block: 2.5vw;
    & img {
        height: 100%;
    }
    @media (max-width:767px){
        display:none;
    }
}
    }