.abcweb-portfolio { padding: 60px 80px; background: #fff; }
.abcweb-portfolio__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 40px; }
.abcweb-portfolio__filter-tab { padding: 15px 30px; background: transparent; border: none; font-size: 14px; color: #666; cursor: pointer; position: relative; transition: color .3s ease; white-space: nowrap; }
.abcweb-portfolio__filter-tab::after { content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 2px; background: #b3924a; transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease; }
.abcweb-portfolio__filter-tab:hover { color: #333; }
.abcweb-portfolio__filter-tab:hover::after { transform: scaleX(.35); opacity: .35; }
.abcweb-portfolio__filter-tab.is-active { color: #000; font-weight: 600; }
.abcweb-portfolio__filter-tab.is-active::after { transform: scaleX(1); opacity: 1; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.abcweb-portfolio__filter-tab.is-leaving::after { transform: scaleX(0); transform-origin: right center; opacity: 0; transition: transform .35s cubic-bezier(.4,0,1,1), opacity .35s ease; }

.abcweb-portfolio__featured { position: relative; margin-bottom: 40px; }
.abcweb-portfolio__featured-panel { display: none; gap: 60px; align-items: center; }
.abcweb-portfolio__featured-panel.is-active { display: flex; }
.abcweb-portfolio__featured-image { flex: 0 0 60%; display: block; border-radius: 8px; overflow: hidden; }
.abcweb-portfolio__featured-image img { width: 100%; height: auto; display: block; transition: opacity .3s ease; }
.abcweb-portfolio__featured-image:hover img { opacity: .92; }
.abcweb-portfolio__featured-quote { position: relative; flex: 1 1 auto; padding: 40px; background: #f9f9f9; border-radius: 8px; margin: 0; }
.abcweb-portfolio__quote-tail { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #f9f9f9; }
.abcweb-portfolio__quote-icon { position: absolute; top: 20px; left: 30px; font-size: 80px; line-height: 1; color: #b3924a; opacity: .3; font-family: Georgia, serif; }
.abcweb-portfolio__quote-text { position: relative; z-index: 1; margin: 0 0 30px; font-size: 18px; line-height: 1.8; color: #333; font-style: italic; }
.abcweb-portfolio__quote-author { padding-top: 20px; border-top: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: 5px; }
.abcweb-portfolio__quote-author strong { font-size: 14px; color: #000; font-weight: 600; }
.abcweb-portfolio__quote-author span { font-size: 13px; color: #666; }

.abcweb-portfolio__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; }
.abcweb-portfolio__card { transition: transform .4s ease; }
.abcweb-portfolio__card[hidden] { display: none; }
.abcweb-portfolio__card:hover { transform: translateY(-5px); }
.abcweb-portfolio__card-media { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.abcweb-portfolio__card-media img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.abcweb-portfolio__card:hover .abcweb-portfolio__card-media img { transform: scale(1.05); }
.abcweb-portfolio__card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px; opacity: 0; transition: opacity .3s ease; }
.abcweb-portfolio__card:hover .abcweb-portfolio__card-overlay { opacity: 1; }
.abcweb-portfolio__card-body { padding: 25px 10px 10px; }
.abcweb-portfolio__card-title { margin: 0 0 15px; font-size: 18px; font-weight: 500; color: #000; }
.abcweb-portfolio__card-tags { list-style: none !important; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.abcweb-portfolio__card-tags li { padding: 8px 16px; border: 1px solid #000; border-radius: 25px; font-size: 11px; color: #000; background: #fff; letter-spacing: .5px; text-transform: uppercase; }

@media (max-width: 1024px) {
    .abcweb-portfolio__featured-panel { flex-direction: column; gap: 40px; }
    .abcweb-portfolio__featured-image { flex-basis: 100%; }
    .abcweb-portfolio__quote-tail { display: none; }
    .abcweb-portfolio__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
    .abcweb-portfolio__filter-tab { padding: 12px 20px; font-size: 13px; }
    .abcweb-portfolio__quote-text { font-size: 16px; }
    .abcweb-portfolio__featured-quote { padding: 30px; }
}

/* PortfolioElement (custom element carousel) */
.portfolio-element .swiper-slide .image-element { width: 100%; padding: 0; }
.portfolio-element .image-link { display: block; overflow: hidden; border-radius: 8px; }
.portfolio-element .image-wrapper { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.portfolio-element .image-wrapper img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.portfolio-element .image-link:hover .image-wrapper img { transform: scale(1.05); }
.portfolio-element .image-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.portfolio-element .image-link:hover .image-overlay { opacity: 1; }
.portfolio-element .image-info { margin-top: 1.25rem; width: 100%; text-align: left; }
.portfolio-element .image-info .title { display: block; font-size: 18px; font-weight: 500; color: #000; margin-bottom: 15px; }
.portfolio-element .image-info .description { display: block; }
.portfolio-element .image-info .details { display: flex; flex-wrap: wrap; gap: 10px; }
.portfolio-element .image-info .details .tag { display: inline-block; padding: 8px 16px; border: 1px solid #000; border-radius: 25px; font-size: 11px; color: #000; background: #fff; letter-spacing: .5px; text-transform: uppercase; line-height: 1; }


/* XXL larger desktops >= 1400 */
@media screen and (min-width: 1400px) {
}
/* XL large desktops >= 1200 */
@media screen and (max-width: 1399.98px) {
}
@media screen and (min-width: 1200px) {
}
/* LG desktops >= 992 */
@media screen and (max-width: 1199.98px) {
    .abcweb-portfolio {
        padding: 2rem;
    }
}
@media screen and (min-width: 992px) {
}
/* MD tablets >= 768 */
@media screen and (max-width: 991.98px) {
}
@media screen and (min-width: 768px) {
}
/* SM phones >= 576 */
@media screen and (max-width: 767.98px) {
}
@media screen and (min-width: 576px) {
}
/* XS small phones < 576 */
@media screen and (max-width: 575.98px) {
}