/************
PAGE HEADER
************/
#home--content-header{
    height: 100%;
    max-height: 713px;
    width: 100%;
    position: relative;
}

#home--content-header picture{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    object-fit: cover;
}

#home--content-header picture img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: top right;
}

#home--content-header .header-floating-content{
    position: relative;
    z-index: 2;
    height: min-content;
}

#home--content-header .header-floating-content .header-floating-content-inner-container{
    position: relative;
    max-width: clamp(0px , 80vw , 700px);
    background-color: rgb(var(--sps-black),0.8);
    border-left: 15px solid rgb(var(--sps-yellow));
    margin-top: clamp(75px , 10vw , 165px );
    margin-bottom: clamp(75px , 10vw , 165px );
    padding: 3em 2rem 2.75em 2em;
}


@media screen and (max-width:767px){
    #home--content-header{
        height: calc(100vh - 85px);
    }

    #home--content-header .header-floating-content .header-floating-content-inner-container{
    max-width: 100%;
    }

    #home--content-header .header-floating-content{
        height: 100%;
    }

    #home--content-header .header-floating-content .content-container{
        justify-content: flex-end;
    }
}

#home--content-header .header-floating-content .header-floating-content-inner-container div{
    display: flex;
    flex-direction: row;
}

#home--content-header .header-floating-content .header-floating-content-inner-container h1{
    color: rgb(var(--sps-white));
    margin-bottom: 2rem;
}

#home--content-header .header-floating-content .header-floating-content-inner-container p{
    color: rgb(var(--sps-gray-100));
    font-size: var(--lrg-body);
}


/************
Services Banner Section
************/
#services-banner-section{
    background: linear-gradient(-4deg, #333333 -24.73%, #000000 136.62%);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#services-banner-section h2{
    color: rgb(var(--sps-white));
    margin-bottom: 1em;
}

#services-banner-section .btn-row{
    margin-top:1.5rem;
}

.service-card img{
    width: 100px;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-card{
    display: flex;
    background-color: rgba(var(--sps-gray-100), 0.1);
}

.service-card-content{
    flex-basis: calc(100% - 100px);
    padding: 1rem 0.5rem 0.5rem 1rem;
}

.service-card .service-card-content h3{
    font-size: var(--normal-title);
    font-weight: 600;
    color: rgb(var(--sps-white));
}

.service-card .service-card-content p{
    color: rgb(var(--sps-gray-100));
    font-weight: 400;
    font-size: var(--sml-body);
}

@media screen and (max-width:767px){
    .service-card{
        margin-bottom: 1.5rem;
    }
}

#machinery-section{
    margin-top: 5rem;
}

#machinery-section .btn-row a{
    margin: 1.5rem auto 0.5rem;
}

/************
Depot Finder Section
************/
#depot-finder-section{
    border-top: 10px solid rgb(var(--sps-gray-900));
    margin-bottom: 5rem;
    margin-top:4rem;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 767px){
    #depot-finder-section > img{
        max-height: 400px;
        width: 100%;
        object-fit:cover;
        border-bottom: 10px solid rgb(var(--sps-yellow));
    }
}

@media screen and (min-width: 768px){
    #depot-finder-section > img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit:cover;
        top: 0;
        left: 0;
        z-index: 1;
    }
}


#depot-finder-section .content-container{
    padding-right: 0;
    position: relative;
    z-index: 2;
}

#depot-finder-section .content-col{
    padding: calc(100% / 13) clamp(1rem, 6%, 20px) calc(100% / 13) calc(100% / 16);
    position: relative;
}

#depot-finder-section .content-col::after{
    content: '';
    width: calc(100% / 15);
    left: 100%;
    background-color: rgb(var(--sps-white));
    position: absolute;
    height: 100%;
    top: 0;
}

#depot-finder-section .content-col h2{
    margin-bottom: 1rem;
}

#depot-finder-section .content-col p{
    color: rgb(var(--sps-gray-700));
    font-weight: 400;
}
#depot-finder-section .content-col p:first-of-type{
    font-size: var(--x-lrg-body);
    color: rgb(var(--sps-gray-900));
}


/************
News & Events Carousel
************/
#news-events-carousel{
    padding-inline-start: clamp(1rem, 6%, 20px);
    padding-block-start: 4rem;
    padding-block-end: 4rem;
    margin: 5rem 0;
    display: flex;
    background: linear-gradient(196.2deg, #333333 -24.73%, #000000 136.62%);
}

#news-events-carousel .content-col{
    margin-inline-start: 0;
    max-width: calc((100% / 12) * 5);
    padding-inline-end: clamp(1rem, 8%, 5rem);
    display:flex;
    flex-direction: column;
    padding-block-start: 4rem;
    padding-block-end: 5.1rem;
    border-bottom: 2px solid rgb(var(--sps-white));
    position: relative;
}

#news-events-carousel .content-col::after{
    content:'';
    width: calc(((100vw - 1180px) / 2) + 20px);
    height: 100%;
    right: 100%;
    position: absolute;
    bottom: -2px;
    border-bottom: 2px solid rgb(var(--sps-white));

}

@media screen and (min-width:1180px){
    #news-events-carousel .content-col{
        margin-inline-start: calc((100vw - 1180px) / 2);
    }
}

#news-events-carousel .content-col h2{
    color:rgb(var(--sps-white));
}

#news-events-carousel .content-col p{
    font-size: var(--lrg-body);
    margin-top:1rem;
    color:rgb(var(--sps-gray-100));
    font-weight:400;
}

#news-events-carousel .content-col a{
    margin-top: auto;
}

#news-events-carousel .carousel-col{
    padding: 4rem 0 0;
    border-top: 2px solid rgb(var(--sps-white));
    width: calc((100% / 12) * 7);
}

@media screen and (min-width:1315px){
    #news-events-carousel .carousel-col{
        width: calc((100% / 12) * 6.4);
    }
}

.news-swiper{
    overflow: hidden;
}

@media screen and (max-width:767px){
    #news-events-carousel{
        flex-direction: column;
    }

    #news-events-carousel .content-col a{
        margin-top: 2rem;
    }

    #news-events-carousel .content-col{
        padding-block-end: 2rem;
    }

    #news-events-carousel .content-col,
    #news-events-carousel .carousel-col{
        width: 100%;
        max-width: 100%;
    }
}