:root {
    --cd-grey: #b3b3b3;
    --cd-white: #fcfdff;
    --cd-yellow: #ffc400;
    --cd-black: #1f2221;
    --white-smoke: #f6f7f9;
    --cd-light-yellow: #fff7de
}



.codsalldriveways-container {
    flex-direction: column;
    flex: none;
    justify-content: center;
    height: 100%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    display: flex
}

.codsalldriveways-container.container-12clm {
    width: 110rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative
}

.codsalldriveways-container.container-11clm {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
    display: flex
}

.codsalldriveways-container.container-10clm {
    width: 90rem;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.codsalldriveways-container.container-6clm {
    width: 52.375rem;
    margin-left: auto;
    margin-right: auto
}

.codsalldriveways-container.container-8clm {
    width: 70.375rem;
    margin-left: auto;
    margin-right: auto
}

.codsalldriveways-container.container-full-width {
    width: 100vw;
    position: relative
}

.app-assets {
    position: relative
}


.p-large {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.335rem;
    line-height: 175%;
    position: relative
}

.p-small {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.05rem
}

.main.main__in-view {
    position: relative
}




.btn.btn--primary {
    background-color: var(--cd-yellow);
    color: var(--cd-white);
    white-space: nowrap
}

.btn.btn--primary:hover {
    background-color: var(--cd-light-yellow);
    color: var(--cd-yellow)
}

.btn.btn--secondary {
    background-color: var(--cd-light-yellow);
    color: var(--cd-yellow);
    border: 0 #0000
}

.btn.btn--secondary:hover {
    background-color: var(--cd-yellow);
    color: var(--cd-white)
}

.btn.btn--secondary.btn--arrow {
    padding-right: 1.25rem
}

.btn.btn--secondary.btn--arrow:hover {
    padding-right: 2.75rem
}

.btn.btn--white {
    color: var(--cd-yellow)
}

.btn.btn--outline {
    border: .25rem solid var(--cd-white);
    color: var(--cd-white);
    background-color: #0000
}

.btn.btn--outline:hover {
    background-color: var(--cd-yellow);
    color: var(--cd-white)
}

.btn.btn--outline.btn--arrow {
    padding-right: 1.25rem
}

.btn.btn--outline.btn--arrow:hover {
    background-color: var(--cd-white);
    color: var(--cd-yellow);
    padding-right: 2.75rem
}

.btn__icon {
    width: 2.1rem;
    height: 2.1rem;
    margin-left: .5rem
}

.btn__icon.btn__icon--small {
    opacity: .75;
    width: 1.8rem;
    height: 1.84rem;
    padding-bottom: 0
}

.btn-wrapper {
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    position: relative
}

.flex-row {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    display: flex
}

.col__half {
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    max-width: 50%;
    display: flex;
    position: relative
}

.header__mobile-menu {
    display: none
}

.p-padded {
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding-right: 14rem
}

.o-75 {
    opacity: .75
}

.cta__form {
    justify-content: center;
    height: 4rem;
    display: flex;
    position: relative
}

.cta-form__field {
    color: var(--cd-black);
    border: 0 #000;
    border-top-left-radius: .35rem;
    border-bottom-left-radius: .35rem;
    width: 18rem;
    height: 100%;
    padding: 1rem 1.25rem;
    font-size: 1.2rem
}

.cta-form__field:focus {
    border-style: none
}

.cta-form__field::placeholder {
    color: #9f9f9f80;
    font-size: 1.2rem
}

.form__arrow-icon {
    z-index: 1;
    width: 1.5rem;
    height: 1.35rem;
    position: relative
}

.form__arrow-btn-wrapper {
    background-color: var(--cd-yellow);
    cursor: pointer;
    border-top-right-radius: .35rem;
    border-bottom-right-radius: .35rem;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 100%;
    padding: 0;
    display: flex;
    position: relative
}

.grid-4clm {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    position: relative
}

.services__item {
    z-index: 1;
    color: var(--cd-white);
    border-radius: .5rem;
    align-items: flex-end;
    width: 100%;
    height: 34rem;
    transition: all 1.4s cubic-bezier(.23,1,.32,1);
    display: flex;
    position: relative;
    overflow: hidden
}

.services__item:hover {
    z-index: 10;
    transform: translate(-.2rem,-.75rem);
    box-shadow: 12px 67px 100px -20px #00000080
}

.services__item.tall {
    height: 54rem
}

.services-item__img {
    z-index: -1;
    object-fit: cover;
    background-image: url(https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg);
    background-position: 0 0;
    background-size: 125px;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%
}

.services-item__content {
    z-index: 1;
    background-image: linear-gradient(#0000 40%,#000000b3 95%);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-bottom: 2.125rem;
    padding-left: 2.125rem;
    display: flex;
    position: relative
}

.heading__dark {
    color: var(--cd-black)
}

.stats__grid {
    grid-column-gap: 6rem;
    grid-row-gap: 3rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: grid
}

.stats__item {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

.heading__primary {
    color: var(--cd-yellow)
}

.arrow-link {
    opacity: .5;
    align-items: center;
    text-decoration: none;
    transition: all .9s cubic-bezier(.19,1,.22,1);
    display: flex
}

.arrow-link:hover {
    opacity: 1
}

.arrow-link.post__link {
    opacity: .35;
    color: var(--cd-black);
    margin-top: 2rem
}

.arrow-link.post__link:hover {
    opacity: .75
}

.u-bg-yellow {
    background-color: var(--cd-yellow)
}

.hero__content {
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    max-width: 50%;
    display: flex
}

.testimonial-inline {
    background-color: var(--white-smoke);
    border-radius: .5rem;
    flex: none;
    width: 27rem;
    height: auto;
    padding: 2.125rem 3.125rem 1rem;
    position: relative;
    top: auto;
    bottom: 3rem;
    box-shadow: 12px 67px 100px -10px #1f222140
}

.col__6 {
    width: 52.375rem;
    position: relative
}

.icon__img {
    background-color: var(--cd-yellow);
    border-radius: 50%;
    width: 4.25rem;
    height: 4.25rem
}

.testimonial__credit {
    color: var(--cd-black);
    flex: 1;
    margin-top: 2.125rem;
    margin-bottom: 2.125rem;
    margin-left: 1.5rem
}

.u-bold {

    font-weight: 700
}

.testimonial__name {

    font-size: 1rem;
    font-weight: 700
}

.testimonial__location {
    opacity: .5;
    font-size: 1rem
}

.u-italics {
    font-style: italic
}

.featured-cases__scroll {
    flex-direction: row;
    align-items: flex-end;
    width: auto;
    height: auto;
    display: flex
}

.featured-cases__item {
    background-image: url(https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg);
    background-position: 50%;
    background-size: cover;
    border-radius: .5rem;
    flex-direction: column;
    flex: none;
    justify-content: flex-end;
    align-items: flex-start;
    /* width: 48.5rem;
    min-width: 48.5rem; */
    height: 30rem;
    padding-bottom: 2.25rem;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    display: flex
}

.featured-cases {
    flex-direction: column;
    flex: 1;
    align-self: stretch;
    width: 107.5rem;
    padding-top: 3rem;
    padding-bottom: 5rem;
    display: flex
}

.featured-cases__content {
    background-color: var(--cd-yellow);
    color: var(--cd-white);
    cursor: default;
    border-radius: .5rem;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    height: auto;
    min-height: 10.25rem;
    padding: 2.25rem 2.5rem 2.5rem;
    transition: all .9s cubic-bezier(.19,1,.22,1);
    display: flex;
    position: relative;
    transform: translateY(-1rem)
}

.featured-cases__content:hover {
    background-color: var(--cd-white);
    color: var(--cd-black);
    height: auto;
    padding-top: 4.125rem;
    padding-bottom: 4.125rem;
    transform: translate(0)
}

.featured-cases__category {
    opacity: .5;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    position: absolute;
    inset: 1.75rem auto auto
}

.u-invert {
    filter: invert()
}

.featured-cases__list {
    display: flex
}

.row {
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    display: flex;
    position: relative
}




.case-studies__hero-slider {
    cursor: default;
    display: flex
}

.case-studies__hero-slide {
    background-image: url(https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative
}



.case-study__grid {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid
}

.featured_cases__wrapper {
    margin-right: 3rem
}



.case-study__details {
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid
}

.list {
    padding-left: 1.5rem;
    padding-right: 6.5rem
}
.featured-cases__content .featured-cases__category {
    opacity: 0;
}

.featured-cases__content p {
    opacity: .65;
}

.featured-cases__content .arrow-link {
    color: #1f2322;
    opacity: 0;
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: 1.25rem;
    transition: all .9scubic-bezier(.19,1,.22,1);
}

.featured-cases__content p {
    opacity: .65
}

.featured-cases__content .featured-cases__category {
    opacity: 0
}

.featured-cases__content .arrow-link {
    color: #1f2322;
    opacity: 0;
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: 1.25rem;
    transition: all .9s cubic-bezier(.19,1,.22,1)
}

@media screen and (min-width: 768px) and (max-width:991px) {
    .featured-cases__content .arrow-link {
        bottom:2.5rem
    }
}

@media screen and (max-width: 479px) {
    .featured-cases__content .arrow-link {
        bottom:7.5rem
    }
}

@media screen and (max-width: 991px) {
    .featured-cases {
        overflow:visible!important
    }
}

.featured-cases__content:hover .featured-cases__category {
    opacity: .5
}

.featured-cases__content:hover .arrow-link {
    opacity: .5
}

.featured-cases__content:hover .arrow-link:hover {
    opacity: 1
}
.featured-cases__content h5 {
    margin-top: 1rem;
    margin-bottom: 1rem;

    font-size: 2.0625rem;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    text-decoration: none;
}
.featured-cases__content .arrow-link {
    color: #1f2322;
    opacity: 0;
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: 1.25rem;
    transition: all .9s cubic-bezier(.19,1,.22,1);
}


.btn.btn--primary {
    background-color: var(--cd-yellow);
    color: var(--cd-white);
    white-space: nowrap
}

.btn.btn--primary:hover {
    background-color: var(--cd-light-yellow);
    color: var(--cd-yellow)
}

.btn.btn--secondary {
    background-color: var(--cd-light-yellow);
    color: var(--cd-yellow);
    border: 0 #0000
}

.btn.btn--secondary:hover {
    background-color: var(--cd-yellow);
    color: var(--cd-white)
}

.btn.btn--secondary.btn--arrow {
    padding-right: 1.25rem
}

.btn.btn--secondary.btn--arrow:hover {
    padding-right: 2.75rem
}

.btn.btn--white {
    color: var(--cd-yellow)
}

.btn.btn--outline {
    border: .25rem solid var(--cd-white);
    color: var(--cd-white);
    background-color: #0000
}

.btn.btn--outline:hover {
    background-color: var(--cd-yellow);
    color: var(--cd-white)
}

.btn.btn--outline.btn--arrow {
    padding-right: 1.25rem
}

.btn.btn--outline.btn--arrow:hover {
    background-color: var(--cd-white);
    color: var(--cd-yellow);
    padding-right: 2.75rem
}

.btn__icon {
    width: 2.1rem;
    height: 2.1rem;
    margin-left: .5rem
}

.btn__icon.btn__icon--small {
    opacity: .75;
    width: 1.8rem;
    height: 1.84rem;
    padding-bottom: 0
}
.featured-cases__content h5 {

    color: #fff;
}
.featured-cases__content p.content {
    opacity: .65;
}
.featured-cases__content p.content {color: #fff;}
.featured-cases__content:hover h5.title, .featured-cases__content:hover p.content{

    color: #000;

}
.pagination {
    margin-top:1.75rem;
}

.w-pagination-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    display: flex
;
}


.w-pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 2px 0 0;
    border: 1px solid #ffc400;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 400;
    color: #111;
  }
  .w-pagination-wrapper .page-numbers.current,
  .w-pagination-wrapper a.page-numbers:hover {
    background: #ffc400;
    color: #fff;
  }
@media screen and (min-width: 992px) {
    .featured-cases__scroll {
        transition:all .9s cubic-bezier(.19,1,.22,1)
    }
}

@media screen and (max-width: 991px) {
    .featured-cases__scroll {
        overflow:visible!important
    }
}

@media screen and (max-width: 991px) {
    .featured-cases__list {
        overflow:visible!important
    }
}

@media screen and (max-width: 991px) {
    #fc-arrow--left {
        display:none
    }
}

@media screen and (max-width: 991px) {
    .case-study__grid .featured-cases__item {
        width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 991px) {
    .featured-cases__item {
        width: 60rem;
        height: 30rem;
    }
    .codsalldriveways-container {
    
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
       
    }
    .featured-cases__content h5 {
 
        font-size: 25px;
     
    }
}

@media (max-width: 768px) {
    .grid-4clm, .stats__grid {
        grid-template-columns: 1fr; /* Change to single column */
        grid-row-gap: 2rem; /* Adjust spacing */
    }

    .col__half,
    .hero__content {
        max-width: 100%; /* Full width on mobile */
    }

    .btn-wrapper {
        display: flex;
        flex-direction: column; /* Stack buttons */
        align-items: center;
    }

    .testimonial-inline {
        width: 100%; /* Make it responsive */
        padding: 1.5rem;
    }

    .cta-form__field {
        width: 100%; /* Make input field full-width */
    }

    .flex-row {
        flex-direction: column; /* Stack flex items vertically */
        align-items: center;
    }
}

@media (max-width: 767px) { /* Adjust breakpoint as needed */
    .codsalldriveways-container.container-11clm {
        width: 100%;
       
    }
    .case-study__grid {
        display: grid;
        grid-template-columns: 1fr; /* Single column on small screens */
        margin: 0px 15px;
    }
    .featured-cases__content h5 {
 
        font-size: 25px;
     
    }
}