/* ---------------------------------------recent-projects-sec----------------------------------*/

section.our-recent-work-sec {
    display: inline-block;
    width: 100%;
    background: #F5F1EB;
    padding-block: 110px 125px;
    overflow: hidden;
    & > .flex-container { 
        margin-bottom: 60px;
    }

    & .btnbar  { 
        width: 100%;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            right: 110px;
            height: 0;
            width: calc(100% - 370px);
            top: 50%;
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }
    }
}

.heading_wrapper {
    display:inline-flex;
    justify-content:space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 80px;

    & .heading_wrap {
        max-width: 453px;
        & .sm-title {
            color:#000000;
            margin-bottom:0px;
        }
        .heading-44 {
             margin-bottom:0;
        }
    }

    & P {
        max-width: 565px;
        font-weight: 600;
    }
}

#our-recent-work-tab {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    
    & .resp-tabs-list {
        width: calc(496px);
        text-align:right;
        padding-bottom: 160px;
        position: relative;
        & > li {
            max-width: 297px;
            margin-right: 0 !important;
            margin-left: auto;
            padding: 19px 19px 19px 26px;
            border: 1px solid #C0C0C0;
            display: inline-flex;
            width: 100%;
            justify-content: space-between;
            font-size: 16px;
            font-weight: bold;
            color: #000;
            transition: all ease-out 0.3s;
            -webkit-transition: all ease-out 0.3s;
            -moz-transition: all ease-out 0.3s;
            -ms-transition: all ease-out 0.3s;
            &:not(:last-child) {
                margin-bottom:16px !important;
            }
            &:before, &:after { display:none;}
        }
        & .theme-ark {
            position: absolute;
            right: 0;
            bottom: 0;
            opacity: 0.05;
        }
    }

    & .resp-tabs-container { 
        width: calc(100% - 496px);
        max-width: 1303px;
        background: transparent;
        border-radius: 0;
    }

    & .projects-tab {
        max-width: 100%;
        overflow-x: clip;
    }
    &.resp-vtabs li.resp-tab-active { 
        background-color: var(--themecolor);    
        color: #ffffff !important;
        transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -ms-transition: all ease-out 0.3s;

        & > img { 
            filter: brightness(0) invert(1);
            transition: all ease-out 0.3s;
            -webkit-transition: all ease-out 0.3s;
            -moz-transition: all ease-out 0.3s;
            -ms-transition: all ease-out 0.3s;
        }
    }
}

.our-recent-work-slider {
    display: inline-block;
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-right: 28dvw;
    & .slide-box {
      padding-inline:20px;
    }
    & .slick-list {
        overflow: visible;
    }

    &:not(.slick-initialized) {
        display: inline-flex;
        /* gap: 140px; */
        /* width: 100%; */
        & > .slide-box:not(:nth-child(-n + 1)) {
        display: none;
        }
        & .slide-box {
        flex-grow: 1;
        }
    }
    &.slick-slider .slick-prev {     
        left: unset !important;
        right: calc(50% - 415px);
        top: calc(100% + 89px); 
    } 
    &.slick-slider .slick-next { 
        left: unset !important;
        right: calc(50% - 460px);
        top: calc(100% + 89px);
    }
}
#our-recent-work-tab:not([style*="display: block"])
  > .resp-tabs-container
  > div:not(:first-child),
#our-recent-work-tab:not([style*="display: block"])
  > .resp-tabs-container
  > div:not(:first-child) {
  display: none;
}

section.our-recent-work-sec +  .cta-sec { 
    position: relative;
    z-index: 2;
    &::after { 
        content: ''; position: absolute;
        height: 50%;
        width: 100%;
        top: 0;
        left:0;
        background-color: #F5F1EB;
    }
}
.our-recent-work-slider {
    & .slide-box { 
        & .img-wrap { 
            max-width: 100%;
            overflow: hidden; 
            position: relative;
            & > img {
                height: 575px;
            }
        }
    }
}

.our-recent-work-inpg-slider, .our-recent-work-slider, .our-recent-work-list { 
    & .slide-box { 
        & .img-wrap { 
            position: relative;
            max-width: 100%; overflow: hidden; 
            &::after {
                content: ''; position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 72px;
                height: 72px;
                background: url(../images/icon/zoom.svg) no-repeat;
                background-size: contain;
                transition: all 0.5s ease-in-out;
                -webkit-transition: 0.5s ease-in-out;
                -o-transition: 0.5s ease-in-out;
                -moz-transition: 0.5s ease-in-out;
                z-index: 1;
                opacity: 0;
            }
            &::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: rgba(184, 28, 28, 0.6);
                transition: all 0.5s ease-in-out;
                -webkit-transition: 0.5s ease-in-out;
                -o-transition: 0.5s ease-in-out;
                -moz-transition: 0.5s ease-in-out;
                z-index: 1;
                opacity: 0;
            }
            & > img {
                transition: all 0.5s ease-in-out;
                -webkit-transition: all 0.5s ease-in-out;
                -ms-transition: all 0.5s ease-in-out;
            }
            &:hover {
                &::after, &::before { 
                    opacity: 1;
                }
                & > img { 
                    transform: scale(1.1);
                    transition: all 0.5s ease-in-out;
                    -webkit-transition: all 0.5s ease-in-out;
                    -ms-transition: all 0.5s ease-in-out;
                }
            }  
        }
    }
}
.our-recent-work-inpg-slider { 
    & .img-wrap { 
        & img {
            height: 550px;
            object-position: center;
            object-fit: cover;
        }
    }
}
/* ---------------------------------------projects-listing-secc----------------------------------*/

/* ---------------------------------------our-recent-work-inpg-sec----------------------------------*/
.our-recent-work-inpg-sec { 
    display: inline-block;
    width: 100%;
    overflow: hidden; max-width: 100%;
    background-color: #F5F1EB;
    padding-block: 100px;

    & .heading-44 { margin-bottom: 40px;}
}
.our-recent-work-inpg-slider { 
    display: inline-block;
    width: calc(100% + 40px);
    margin-inline: -20px;

    & .slide-box {
      padding-inline:20px;
    }
    & .slick-list {
        overflow: visible;
    }

    &:not(.slick-initialized) {
        display: inline-flex;
        /* gap: 140px; */
        /* width: 100%; */
        & > .slide-box:not(:nth-child(-n + 2)) {
        display: none;
        }
        & .slide-box {
        flex-grow: 1;
        }
    }
}
/* ---------------------------------------our-recent-work-inpg-sec----------------------------------*/

/* ---------------------------------------our-recent-work-tab----------------------------------*/
.our-recent-work-list-sec { 
    display: inline-block;
    width: 100%;
    text-align: center;

    & #our-recent-work-tab { 
        flex-direction: column;
        & .resp-tabs-list { 
            width: 100%;
            max-width: 100%;
            padding-bottom: 0;
            gap: 17px;
            display: flex;
            margin-bottom: 45px;
            justify-content: center;
            & li { 
                margin: 0 !important; width: fit-content;
                padding: 15px 20px 15px 20px; min-width: 180px;
                justify-content: center;
                font-size: 16px; font-weight: 500;
            }
        } 
        & .resp-tabs-container { 
            width: 100%;
            max-width: 100%;
        }
    }
}
.our-recent-work-list {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    width: calc(100% + 26px);
    margin-inline: -13px;
    row-gap:26px;
   

        & .slide-box { width:33.33%; padding-inline: 13px; }

        & + .btn-theme { margin-top: 50px;}
}

.wonderplugin-gridgallery-tags.wonderplugin-gridgallery-tags-topleft.wpp-category-greybutton { 
    max-width: 100%;
    padding-bottom: 0;
    gap: 17px;
    display: flex;
    margin-bottom: 45px;
    justify-content: center;
    text-align: right;
    position: relative;
}
.our-recent-work-list-sec  {
    #wonderplugingridgallery-1 .wpp-category-greybutton .wonderplugin-gridgallery-tag {
        margin: 0 !important;
        width: fit-content;
        min-width: 180px;
        font-size: 16px;
        font-weight: 500;
        max-width: unset;
        margin-right: 0 !important;
        margin-left: auto;
        padding: 19px 19px 19px 26px;
        border: 1px solid #C0C0C0;
        display: inline-flex;
        justify-content: center;
        color: #000;
        cursor: pointer;
        float: none;
        background-color: transparent;
        transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -ms-transition: all ease-out 0.3s;
        line-height: 1;
        font-family: var(--site-font-family);
        border-radius: 00;

        &:hover, &:focus, &.wonderplugin-gridgallery-tag-selected { 
            background: var(--themecolor) !important;
            border: 1px solid transparent !important;
            color: #fff;
        }
    }

    & .wonderplugin-gridgallery-list .wonderplugin-gridgallery-item a {
        position: relative;
        overflow: hidden;
        display: block;
        width: 100%;
        height: 100%;
    }

    & .wonderplugin-gridgallery-list .wonderplugin-gridgallery-item a::before {
        transform: translateY(100%);
        content: "";
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(184, 28, 28, 0.6);
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        cursor: pointer;
        opacity: 0;
    }

    & .wonderplugin-gridgallery-list .wonderplugin-gridgallery-item a::after {
        transform: none;
        content: "";
        position: absolute;
        left: unset !important;
        width: 72px !important;
        height: 72px !important;
        z-index: 1;
        background: transparent url(../images/icon/zoom.svg) no-repeat center;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        cursor: pointer;
        border-radius: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-size: auto;
        opacity: 0;
        left: 0 !important;
        right: 0 !important;
        margin: auto;
        top: 0;
        bottom: 0;
    }

    & .wonderplugin-gridgallery-list .wonderplugin-gridgallery-item a:hover::before {
        transform: translateY(0px);
        opacity: 1;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
    }

    & .wonderplugin-gridgallery-list .wonderplugin-gridgallery-item a:hover::after {
        width: 100%;
        opacity: 1;
        transition: 1s;
        left: 0 !important;
        right: 0 !important;
        margin: auto;
    }
    & #wonderplugingridgallery-1 .wonderplugin-gridgallery-loadmore-btn { 
        font-size: 16px;
        padding: 15px 35px 15px 35px;
        position: relative;
        font-family: 'Plus Jakarta Sans';
        font-weight: 800;
        letter-spacing: 0px;
        background: var(--themecolor);
        color: #fff;
        display: inline-flex;
        align-items: center;
        margin: 0;
        z-index: 1;
        line-height: 1.5;
        text-decoration: none;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        border: 2px solid transparent;
        --border-offset: none;
        text-transform: none;
        transition: all ease-out 0.3s;
        -webkit-transition: all ease-out 0.3s;
        -moz-transition: all ease-out 0.3s;
        -ms-transition: all ease-out 0.3s;
        min-height: 60px;
        gap: 10px;
        border-radius: 10px 0 10px 0;
        overflow: hidden;  text-shadow: none; margin-top: 30px;

        &:hover { 
            background: #000;
            color: #fff;
        }
    }
}
/* ---------------------------------------our-recent-work-tab----------------------------------*/

@media (max-width: 1850px) {
  #our-recent-work-tab {
    & .resp-tabs-list { margin-left: 20px; text-align: left; & .theme-ark {left: 0; right: unset;} } 
    & .resp-tabs-container { width: calc(100% - 297px); padding-left: 20px; }
  }
  section.our-recent-work-sec {
    & .btnbar  {
        &:after { right: 267px; width: calc(100% - 540px); }
    }
  }
}

@media (max-width: 1599.98px) { 
 
}
@media (max-width: 1439.98px) {
    #our-recent-work-tab {
        & .resp-tabs-list { padding-bottom: 0; & .theme-ark {display: none;} } 
    }
    .our-recent-work-slider {
        &.slick-slider .slick-next { right: calc(50% - 390px); }
        &.slick-slider .slick-prev { right: calc(50% - 340px); }
    }
}

/* Extra Large devices (large desktops, less than 1440px) */

@media (max-width: 1199.98px) {
  .our-recent-work-slider { 
        padding-right: 0;
        &.slick-slider .slick-prev {
            right: calc(50% - 255px);
        }
        &.slick-slider .slick-next {
            right: calc(50% - 304px);
        }
    }
    section.our-recent-work-sec {
        & .btnbar  {
            &:after {
                right: 142px;
                width: calc(100% - 400px);
            }
        }
    }
    .our-recent-work-inpg-sec { 
        padding-block: 80px;
    }
    .our-recent-work-list-sec {
        & #our-recent-work-tab {
             & .resp-tabs-list { 
                
                overflow: auto;
                width: 100%; margin-bottom: 30px;
                max-width: 100%; padding-bottom: 10px;
                justify-content: flex-start; margin-left: 0;
                
             }
             & .resp-tabs-container {  padding-left: 0; margin-bottom: 0;}
        }
    }
    .our-recent-work-list {
        width: calc(100% + 16px); margin-inline: -8px;
        row-gap: 16px;
        & .slide-box {  padding-inline: 8px; }
    }
    .our-recent-work-list-sec {
        & .wonderplugin-gridgallery-tags.wonderplugin-gridgallery-tags-topleft.wpp-category-greybutton { 
            max-width: 100%;
            overflow: auto;
            justify-content: flex-start;
            padding-inline: 5px;
            margin-bottom: 20px;
        }
        & #wonderplugingridgallery-1 .wpp-category-greybutton .wonderplugin-gridgallery-tag { 
            width: fit-content;
            min-width: fit-content;
            padding: 15px 19px;
            
        }
       
    }
}

/* Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {
    section.our-recent-work-sec { padding-block: 60px;} 
    .heading_wrapper { 
        margin-bottom: 40px;
        gap: 15px;
        & .heading_wrap, & P { max-width: 100%; width: 100%; }
    }
    .our-recent-work-inpg-sec { 
        padding-block: 60px;
    }
    #our-recent-work-tab {
        flex-wrap: wrap;
        & .resp-tabs-list { 
            display: flex;
            max-width: 100%;
            overflow: auto;
            width: 100%; max-width: 100%;
            gap: 20px;
            & > li {
                margin-bottom: 4px !important;
                width: fit-content;
                gap: 20px;
                align-items: center;
                white-space: nowrap;
                padding: 19px 40px 19px 38px;
                
            }
            margin-bottom: 30px !important;
        }
        & .resp-tabs-container { padding-inline: 15px; width: 100%; max-width: 100%; margin-bottom: 0;}
    }
    .our-recent-work-slider { 
        width: calc(100% + 20px);
        margin-inline: -10px;
        & .slide-box { padding-inline: 10px; }
    }
    .our-recent-work-inpg-slider {
        display: inline-block;
        width: calc(100% + 14px);
        margin-inline: -7px;
        & .slide-box {padding-inline: 7px; }
    }
    .our-recent-work-list-sec {
        & #our-recent-work-tab {
            & .resp-tabs-list {
                & li { padding: 13px 20px 13px 20px; font-size: 15px; min-width: unset;} 
            }
            & .resp-tabs-container { padding: 0;}
        }
    }
    .our-recent-work-list {
        & .slide-box { width: 50%; }
    }

}

/* Small devices (landscape phones, less than 768px) */

@media (max-width: 767.98px) {
    section.our-recent-work-sec {
        padding-block: 50px;
        & .btnbar  { 
            text-align: center;
            &::after {
                display: none;
            }
        } 
    }
    .our-recent-work-inpg-sec { 
        padding-block: 50px;
        & .heading-44 {
            margin-bottom: 30px;
            text-align: center;
        }
    }
    #our-recent-work-tab {
        & .resp-tabs-list {
            margin-bottom: 20px !important; gap: 10px;
            & > li { padding: 13px 35px 13px 20px; gap: 15px; }
        }
        
    }
    .our-recent-work-slider {
        &.slick-slider .slick-prev { top: calc(100% + 30px); right: calc(50% + 10px); margin-bottom: 0;} 
        &.slick-slider .slick-next { top: calc(100% + 30px); right:unset; left: calc(50% + 10px) !important; margin-bottom: 0;}  
    }
    .heading_wrapper {
        justify-content: center; margin-bottom: 30px;
        text-align: center; gap: 10px;
        & .sm-title {text-align: center; margin-inline: auto; }
    }
    .our-recent-work-inpg-slider {     
        &:has(.slick-arrow) {
            padding-bottom: 56px;
        }
        &.slick-slider .slick-prev { top: calc(100% - 15px); left: calc(50% - 45px) !important; right: unset; }
        &.slick-slider .slick-next { top: calc(100% - 15px); right: calc(50% - 45px); }
    }
    .our-recent-work-inpg-slider {
        & .img-wrap {
            & img {
                height: 350px; 
            } 
        }
    }
    .our-recent-work-slider {
        & .slide-box {
            & .img-wrap {
                & > img {
                    height: 350px;
                }
            }
        }
    }
}   

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
     .our-recent-work-list { 
        width: calc(100% + 10px);
        margin-inline: -5px;
        row-gap: 10px;
        & .slide-box { padding-inline: 5px; }
     }
    .our-recent-work-inpg-slider {
        & .img-wrap {
            & img {
                height: 300px; 
            } 
        }
    }
    .our-recent-work-slider {
        & .slide-box {
            & .img-wrap {
                & > img {
                    height: 300px;
                }
            }
        }
    }
}