/* service-area start */

.service-area { padding: 100px 0; }
.service-area__container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.service-area__image-wrapper { position: relative; }
.service-area__image { width: 100%; display: block; }
.service-area__content { display: flex; margin-top: -110px; flex-wrap: wrap;}
.service-area__highlight { background: var(--primary-red) url(https://jparoofing.wpenginepowered.com/wp-content/uploads/2026/04/about-box-vector.svg) no-repeat bottom right; padding: 60px; max-width: 50%;height: 100%; }
.service-area__title { text-transform: uppercase; color: #fff; margin-top: 30px; margin-bottom: 0; }
.service-area__info { padding: 140px 40px 0; max-width: 50%; }
.service-area__text { margin-bottom: 25px; color: #4A4A51; }

/* service-area end */

/* project-filter-section start */

/* Section */
.projects-filter .heading-cover{
    margin-bottom: 20px;
}
.projects-filter .heading-cover span{
    display: block;
}

.filters {display: flex;/* justify-content: center; */gap: 40px;flex-wrap: wrap;margin-bottom: 60px;}

.filter-group.location {
    max-width: 32.431%;
    width: 100%;
}

.filter-group.material {
    max-width: 20.139%;
    width: 100%;
}

.filter-group.service {
    max-width: 41.8%;
    width: 100%;
}

.filter-group h4,
.material-specific-item h4,
.full-twocol-item h4 {
    text-transform: capitalize;
    font-family: 'Poppins';
    font-weight: 600;
}
.filter-group h6 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #000; }
/* Service Buttons */

.filter-services {display: flex;gap: 10px;flex-wrap: wrap;}
.filter-services button { 
    padding: 17px 43px;
    border: none;
    background: #F2F2F2;
    font-weight: 600;
    cursor: pointer;
    font-size: clamp(16px, 1.3vw, 18px);
    min-width: 157px;
    text-transform: uppercase;
}
.filter-services button.active { background: var(--primary-red); color: #fff; }
/* Select */

.filter-group select {
    padding: 18px 40px 18px 20px;
    border: none;
    background: #F2F2F2;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-size: clamp(16px, 1.3vw, 18px);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../images/select-down.png);
    background-repeat: no-repeat;
    background-position: center right 20px;
    background-size: 15px;
    text-transform: uppercase;
}

#projects-results {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 21px;
}

.projects-wrap {
position: relative;
}

.projects-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: .3s;
z-index: 10;
}

.projects-wrap.loading .projects-loader {
opacity: 1;
visibility: visible;
}

.pagination > * ,
.blog-pagination > *{
    height: 30px;
    width: 30px;
    background: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    font-size: 16px;
    line-height: 30px;
}

.pagination > .next,
.pagination > .prev,
.blog-pagination > .next,
.blog-pagination > .prev {
    font-size: 0;
    position: relative;
}

.pagination > .next:after,
.blog-pagination > .next:after {
    content: "»";
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 18px;
    transform: translate(-50%,-50%);
}
.pagination > .prev:after,
.blog-pagination > .prev:after {
    content: "«";
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 18px;
    transform: translate(-50%,-50%);
}

.pagination > .active, .pagination > *:hover,
.blog-pagination > .current, .blog-pagination > *:hover {
    background: var(--primary-red);
}

.pagination,
.blog-pagination {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}


/* Spinner */

.loader {
width: 40px;
height: 40px;
border: 3px solid #eee;
border-top: 3px solid var(--primary-red);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.project-item { overflow: hidden;
    max-width: calc(33.33% - 14px);
    width: 100%; 
}

.project-item  .imageWrap {
    position: relative;
    padding-top: 90%;
}

.project-item  .imageWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s ease; 
}
.project-item:hover img { transform: scale(1.05); }
/* project-filter-section end */

/* Innnerpage baner */
.hero-section .icon_item {
    max-width: calc((100% - 60px) / 4);
    width: 100%;
    border: 1px solid;
    gap: 18px;
}

.hero-section .icon_list {
    --align: center;
    gap: 20px;
    margin-top: 16px;

}
.hero-section .icon {
    clip-path: polygon(0 0, 73% 0, 100% 100%, 0% 100%);
    background: var(--primary-red);
    width: 98px;
    padding: 25px 40px 25px 25px;
}

.hero-section .icon-Content {
    color: #fff;
}

/* tab Slider section */
.tab-slider-section {
    padding:80px 0;
}

.tab-slider-section .content-cover {
    max-width: calc((100% - 25px) / 2);
    width: 100%;
}

.tab-slider-section .contentGroup {
    gap: 25px;
    margin-bottom: 42px;
}

.tab-slider-section .slider-nav-cover {
    border-bottom: 1px solid rgb(73 73 80 / 16%);
    margin-bottom: 48px;
}
.tab-slider-section .slider-nav-title{
   color: #4A4A51;
   opacity: 0.5;
   text-transform: capitalize;
    font-family: 'Poppins';
    font-weight: 600;
    cursor: pointer;
    padding-bottom: 10px;
}
.tab-slider-section .slick-current .slider-nav-title{
    opacity: 1;
    border-bottom: 1px solid var(--primary-red);
    padding-bottom: 25px;
    margin-bottom: 0;
    
}
.tab-slider-section .slider-nav .slick-slide {
    margin-right: clamp(1.250rem, calc(-0.797rem + 4.264vw), 4.000rem);
}

.tab-slider-section .container.pullright {
    max-width: calc(((100% - 1540px) / 2) + 1540px);
    margin-right: 0;
    padding-right: 0;
}

.tab-slider-section .tabslidermain{
    overflow: hidden;
}
.tab-slider-section .tabsliderWrap{
    max-width: 1139px;
}

.tab-slider-section .tabsliderWrap .slick-list{
    overflow: visible;
}
.tab-slider-section .tabsliderWrap .slider-item {
    margin-right: 48px;
}
.tab-slider-section .slider-itemWrap {
    padding-right: 130px;
    position: relative;
}

.tab-slider-section .slider-image {
    position: relative;
    padding-top: 68%;
}
.tab-slider-section .slider-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tab-slider-section .slider-content h4 {
    text-transform: capitalize;
    font-family: 'Poppins';
    font-weight: 600;
    line-height: 1.5;
}
.tab-slider-section .slider-content {
    padding: clamp(1.875rem, calc(0.294rem + 3.295vw), 4.000rem);
    background: #F4F4F4;
    position: absolute;
    top: 50%;
    max-width: 476px;
    transform: translateY(-50%);
    right: 0;
}

/* three-col-section */
.Design2 .three-col-cover{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:24px;
}
.Design2 .three-col-item:first-child{
    grid-row: span 2;
    max-width: inherit;
}
.Design2 .three-col-item:nth-child(2){
     max-width: inherit;
}
.Design2 .three-col-item:nth-child(3){
     max-width: inherit;
}
.Design2 .three-col-item-image{
    padding-top: 78%;
    height: 100%;
}

.three-col-item {
    max-width: calc((100% - 48px) / 3);
    width: 100%;
    position: relative;
}

.three-col-cover {
    gap: 24px;
    margin-top: 30px;
}
.three-col-item-content h4 {
    font-family: 'Poppins';
    font-weight: 600;
    text-transform: capitalize;
}
.three-col-item-image {
    position: relative;
    padding-top: 119%;
    height: 100%;
}

.three-col-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.three-col-item-content {
    padding: 40px;
    position: absolute;
    bottom: 0;
    background: #fff;
    max-width: 416px;
    left: 0;
}

.Design2 .three-col-item:first-child .three-col-item-content {
    max-width: calc(100% - 50px);
    width: 100%;
}

.three-col-section.Design2 .three-col-item-content {
    padding-left: 25px;
    padding-right: 25px;
}


/* full-twocol-section */


.full-twocol-item{
    max-width: 50%;
    width: 100%;
}

.full-twocol-image {
    position: relative;
    padding-top: 92%;
    height: 100%;
}

.full-twocol-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.full-twocol-item.contentgroup{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #000;
    padding: 40px 30px 40px clamp(2.500rem, calc(-1.221rem + 7.752vw), 7.500rem);
}
.full-twocol-item .content h4 {
    margin-top: 30px;
}
.full-twocol-item.contentgroup .content{
    max-width: 600px;
}
.full-twocol-item.contentgroup .content h4{
    color: #fff;
    text-transform: capitalize;
}
.full-twocol-section:after {
    content: "";
    height: 26px;
    width: 165px;
    background: url(../../../../../wp-content/uploads/2026/04/two-col-vector.svg);
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.material-specific-wrap{
    column-gap: clamp(2.500rem, calc(-4.942rem + 15.504vw), 12.500rem);
    row-gap: clamp(2.500rem, calc(0.640rem + 3.876vw), 4rem);
}
.material-specific-item{
    max-width: calc((100% - clamp(2.500rem, calc(-4.942rem + 15.504vw), 12.500rem)) / 2);
    width: 100%;
}

.material-specific-image {
    width: 150px;
    height: 150px;
    background: #4A4A51;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    margin-top: 22px;
    padding: 20px;
}


.manufacture_badges-wrap {
    margin-top: 58px;
    --justify:center;
    width: calc(100% + 4px);
    margin-left: -2px;
}

.manufacture_badges-item {
    max-width: 16.66%;
    width: 100%;
    border: 1px solid #DFDFDF;
    padding: 10px 20px;
    filter: grayscale(100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    margin-bottom: -1px;
}

.manufacturer_badges {
    overflow: hidden;
}


.material-list-wrap {
    gap: 25px;
    padding: 0 12px;
    --justify: center;
    margin-top: 60px;
}
.material-list-item {
    max-width: calc((100% - 150px) / 7);
    width: 100%;
}

.material-list-image {
    border: 1px solid #4A4A51;
    padding: 8px;
}

.material-list-image img{width: 100%;}

.material-list-title {
    margin-top: 24px;
}
.icon-in-full .trust-icon-item {
    width: calc(25% - 15px);
}
.icon-in-full {
    justify-content: center;
}

.three-col-section.Design2:before {
    content: "";
    height: 1555px;
    width: 50%;
    background: url(../../../../../wp-content/uploads/2026/03/jpa-vector-1.png) no-repeat top left;
    position: absolute;
    top: -60%;
    left: 0;
    pointer-events: none;
    z-index: -1;
}
.three-col-section.Design2:after{
        content: "";
    height: 1555px;
    width: 50%;
    background: url(../../../../../wp-content/uploads/2026/03/jpa-vector-2.png) no-repeat top right;
    position: absolute;
    top: -60%;
    right: 0;
    z-index: -1;
    pointer-events: none;
}

.full-twocol-item.contentgroup:after {
    content: "";
    height: 100%;
    width: 50%;
    background: url(../../../../../wp-content/uploads/2026/03/jpa-vector-7.png) no-repeat top right;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.three-col-section.Design2 {
    overflow: hidden;
}

.three-col-section .container {
    position: relative;
    z-index: 1;
}

.page-id-76 .footer-location-section:not(.c-block){
    display: none;
}

/* resposive media */

@media (max-width: 1600px) {
   .filters{
        gap: 10px;
   }
    .filter-group.location {
        max-width: 28.131%;
    }
    .filter-group.service{
        max-width: 50%;
    }
}

@media (max-width: 1366px) {
  .hero-section .icon {
        width: 90px;
        padding: 20px 30px 25px 20px;
    }

    .hero-section .icon_list {
        gap: 10px;
        --justify:center;
    }

    .hero-section .icon_item {
        max-width: calc((100% - 30px) / 3);
        gap: 10px;
        --justify: flex-start;
    }
    .projects-filter {
        padding-top: 50px !important;
    }
}

@media (max-width: 1240px) {

     .filters{
            gap: 30px;
    }
   
    .filter-group.service {
        max-width: 100%;
        width: 100%;
    }
    .filter-group.material {
        max-width: calc((100% - 30px) / 2);
        width: 100%;
    }
    .filter-group.location {
        max-width: calc((100% - 30px) / 2);
        width: 100%;
    }

    .three-col-item {
        max-width: calc((100% - 48px) / 2);
    }

    .material-list-item {
        max-width: calc((100% - 100px) / 4);
        width: 100%;
    }

    .manufacture_badges-item {
        max-width: 25%;
    }
    .icon-in-full .trust-icon-item {
        width: calc(33.33% - 15px);
    }
    .Design2 .three-col-cover{
        grid-template-columns: 1fr;
    }
    .Design2 .three-col-item:nth-child(3),
    .Design2 .three-col-item:nth-child(2) {
        max-width: calc(50% - 12px);
    }
    .Design2 .three-col-cover {
        display: flex;
        grid-template-columns: inherit;
        gap: 24px;
    }
}


@media (max-width: 991px) {
    .service-area__content{margin-top: -30px;}
    .service-area__highlight , .service-area__info{max-width: 100%;}

    .hero-section .icon_item {
        max-width: calc((100% - 20px) / 2);
    }
    .tab-slider-section .content-cover{
        max-width: 100%;
    }

    .full-twocol-item{
        max-width: 100%;
    }

    .material-specific-image {
        width: 120px;
        height: 120px;
    }

    .manufacture_badges-item {
        max-width: 33.33%;
    }
    .icon-in-full .trust-icon-item {
        width: calc(50% - 15px);
    }
    .three-col-section.Design2 .three-col-item-content {
        padding: 15px;
    }
    .three-col-item-content h4{
        margin-bottom: 10px;
    }
    .Design2 .three-col-item:first-child .three-col-item-content,
    .three-col-section.Design2 .three-col-item-content{
        max-width: 90%;
    }
    .three-col-item-content{
        padding: 20px;
    }
    .service-area__info{
        padding: 30px 0 0 0;
    }
}

@media (max-width: 767px) {
    .filter-services button{
        min-width: 1px;
    }

    .project-item{
            max-width: calc(50% - 11px);
    }

    .three-col-item {
        max-width: calc((100% - 24px) / 2);
    }
    .filters{
        margin-bottom: 30px;
    }
     .hero-section .icon_item {
        max-width:100%;
    }

    .three-col-item {
        max-width: 100%;
    }
    .material-specific-item {
        max-width: 100%;
        width: 100%;
    }

    .material-list-item {
        max-width: calc((100% - 50px) / 3);
        width: 100%;
    }

    .manufacture_badges-item {
        max-width: 50%;
    }

    .filter-services button,
    .filter-group select{
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .slider-nav-cover .slick-slide{
        width: 100%;
    }
    .tab-slider-section .slick-current .slider-nav-title{
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .tab-slider-section .slider-nav-cover,
    .tab-slider-section .slick-current .slider-nav-title{
        border-width: 0;
    }
    .tab-slider-section .slider-nav-cover{
        margin-bottom: 20px;
    }
    .slider-nav-cover .slick-slide{
        border-bottom: 1px solid rgb(73 73 80 / 16%);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .slider-nav-cover .slick-current{
        border-bottom: 1px solid var(--primary-red);
    }
    .tab-slider-section .slider-nav-title{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .tab-slider-section .slick-current .slider-nav-title{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .tab-slider-section .slider-itemWrap{
        padding-right: 0;
    }
    .tab-slider-section .slider-content{
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
    }
    .tab-slider-section {
        padding-bottom: 0;
    }
    .service-area__highlight{
        padding: 20px;
    }
    .service-area__content {
        margin-top: 0;
    }
    .service-area__title{
        margin-top: 10px;
    }
}


@media (max-width: 600px) {
   .filter-group.material {
        max-width: 100%;
        width: 100%;
    }
    .filter-group.location {
        max-width: 100%;
        width: 100%;
    }

    .three-col-item {
        max-width: 100%;
    }
    .material-list-item {
        max-width: calc((100% - 50px) / 2);
        width: 100%;
    }
    .filter-services button{
        padding-left: 20px;
        padding-right: 20px;
    }
    .icon-in-full .trust-icon-item {
        width: 100%;
    }
    .icon-in-full{
        max-width: 300px;
        margin: 0 auto;
    }
    .tab-slider-section .slider-content{
        position: static;
        width: 100%;
        max-width: 100%;
    }

    .tab-slider-section .slider-content {
        padding: 15px;
    }

    .slider-content p {
        font-size: 14px;
    }

    .slider-content h4 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .tab-slider-section .tabsliderWrap .slider-item {
        margin-right: 20px;
    }
    .three-col-item-content{
        padding: 20px;
        max-width: 100%;
    }
    .full-twocol-item.contentgroup{
        padding: 30px 20px;
    }
    .Design2 .three-col-item:nth-child(3), .Design2 .three-col-item:nth-child(2) {
        max-width: 100%;
    }
    .material-list-title {
        margin-top: 5px;
    }
    .material-specific-wrap{
        row-gap: 10px;
    }
    .material-specific-image {
        width: 90px;
        height: 90px;
        margin-bottom: 20px;
    }
    .material-list-wrap{
        margin-top: 25px;
    }
}

@media (max-width: 480px){
    .project-item{
        max-width: 100%;
    }
    .filter-services button,
    .filter-group select{
        font-size: 14px;
    }
}