.elementor-495 .elementor-element.elementor-element-6575f72{--display:flex;--overlay-opacity:1;}.elementor-495 .elementor-element.elementor-element-6575f72::before, .elementor-495 .elementor-element.elementor-element-6575f72 > .elementor-background-video-container::before, .elementor-495 .elementor-element.elementor-element-6575f72 > .e-con-inner > .elementor-background-video-container::before, .elementor-495 .elementor-element.elementor-element-6575f72 > .elementor-background-slideshow::before, .elementor-495 .elementor-element.elementor-element-6575f72 > .e-con-inner > .elementor-background-slideshow::before, .elementor-495 .elementor-element.elementor-element-6575f72 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-root{--bmp-columns:3;--bmp-gap:26px;--bmp-lightbox-scale:90%;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter:not(.is-active), .elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter-select{color:#f57c00;background-color:transparent;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter:hover, .elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter:focus-visible{color:#ffffff;background-color:#f57c00;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter.is-active{color:#ffffff;border-color:#ffffff;background-color:#f57c00;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filter:not(.is-active):not(:hover){opacity:calc(100 / 100);}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-filters{gap:22px;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-overlay{--bmp-overlay-color:#000000;--bmp-overlay-opacity:calc(70 / 100);}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-title{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-subject{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-comments{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-lightbox{--bmp-lb-bg:#000000;--bmp-lb-opacity:calc(92 / 100);--bmp-control-color:#ffffff;--bmp-control-bg:rgba(0,0,0,.28);--bmp-control-hover-bg:#f57c00;--bmp-thumb-width:82px;--bmp-thumb-height:58px;--bmp-thumb-gap:4px;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-thumb{border-radius:0px;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-thumb:not(.is-active){opacity:calc(55 / 100);}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-thumb.is-active{border-color:#f57c00;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-thumbnails-wrap{background:rgba(0,0,0,.35);bottom:0px;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-lb-title{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-lb-subject{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-lb-comments{color:#ffffff;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-load-more{color:#ffffff;background-color:#f57c00;}body.elementor-page-495:not(.elementor-motion-effects-element-type-background), body.elementor-page-495 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/Portfolio-Background-v8.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-495 .elementor-element.elementor-element-6575f72{--content-width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-495 .elementor-element.elementor-element-6575f72{--content-width:90%;}}@media(min-width:1025px){body.elementor-page-495:not(.elementor-motion-effects-element-type-background), body.elementor-page-495 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-root{--bmp-columns:3;--bmp-lightbox-scale:90%;}body.elementor-page-495:not(.elementor-motion-effects-element-type-background), body.elementor-page-495 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/spacer.png");}}@media(max-width:767px){.elementor-495 .elementor-element.elementor-element-6575f72{--content-width:70%;}.elementor-495 .elementor-element.elementor-element-32a85d7 .bmp-root{--bmp-columns:1;--bmp-lightbox-scale:95%;}body.elementor-page-495:not(.elementor-motion-effects-element-type-background), body.elementor-page-495 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/spacer.png");background-size:auto;}}/* Start custom CSS for container, class: .elementor-element-6575f72 *//* =========================================================
   BYTE PIXEL PORTFOLIO — STUDIO MOUNT STYLE
   FULL REPLACEMENT CSS

   Add to:
   Byte Pixel Portfolio Widget
   Advanced → Custom CSS

   IMPORTANT:
   Delete the previous version before adding this one.
   ========================================================= */


/* =========================================================
   1. GLOBAL STYLE SETTINGS
   Adjust these variables to customize the appearance.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 {
    --byte-mount-size: 5px;
    --byte-mount-color: #171717;
    --byte-inner-edge-color: rgba(255, 255, 255, 0.09);
    --byte-image-edge-color: rgba(255, 255, 255, 0.06);

    --byte-orange: #f57c00;
    --byte-orange-light: #ff911e;

    --byte-corner-radius: 3px;
    --byte-image-radius: 1px;

    --byte-hover-lift: -5px;
    --byte-hover-scale: 1.012;

    --byte-transition-speed: 350ms;

    --byte-shadow-normal:
        0 10px 22px rgba(0, 0, 0, 0.44),
        0 3px 7px rgba(0, 0, 0, 0.52);

    --byte-shadow-hover:
        0 20px 34px rgba(0, 0, 0, 0.62),
        0 6px 12px rgba(0, 0, 0, 0.48);
}


/* =========================================================
   2. OUTER PORTFOLIO ITEMS
   Keeps frames, shadows and decorations visible.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item {
    position: relative;
    overflow: visible;
    isolation: isolate;

    transition:
        transform 400ms ease,
        opacity 320ms ease,
        filter 320ms ease;
}


/* Raise the entire item while hovering so it appears above
   neighboring portfolio images. */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:hover {
    z-index: 30;
}


/* =========================================================
   3. IMAGE LINK AND MOUNTING BOARD
   The frame is attached to the visible image link.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item > a,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper {
    position: relative;
    display: block;
    box-sizing: border-box;

    padding: var(--byte-mount-size);

    background: var(--byte-mount-color);

    border:
        1px solid
        var(--byte-inner-edge-color);

    border-radius: var(--byte-corner-radius);

    box-shadow: var(--byte-shadow-normal);

    transform:
        translateY(0)
        scale(1);

    transform-origin: center center;

    transition:
        transform var(--byte-transition-speed) ease,
        box-shadow var(--byte-transition-speed) ease,
        border-color var(--byte-transition-speed) ease;

    overflow: visible;
    z-index: 1;
}


/* =========================================================
   4. PORTFOLIO IMAGES
   Keeps the artwork clean and unchanged.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item img,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item img,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item img,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item img,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;

    border:
        1px solid
        var(--byte-image-edge-color);

    border-radius: var(--byte-image-radius);

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.18);

    transition:
        filter var(--byte-transition-speed) ease,
        opacity var(--byte-transition-speed) ease;
}


/* Preserve plugin Cover and fixed-height image behavior. */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item img[style*="object-fit"],
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item img[style*="object-fit"],
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item img[style*="object-fit"],
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item img[style*="object-fit"],
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item img[style*="object-fit"] {
    height: 100%;
}


/* =========================================================
   5. HOVER LIFT AND DEPTH
   Makes the portfolio print lift away from the wall.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper {
    transform:
        translateY(var(--byte-hover-lift))
        scale(var(--byte-hover-scale));

    box-shadow:
        var(--byte-shadow-hover),
        0 0 18px rgba(245, 124, 0, 0.11);

    border-color: rgba(245, 124, 0, 0.24);

    z-index: 20;
}


/* =========================================================
   6. SUBTLE ORANGE EDGE LIGHT
   Appears underneath the print only while hovering.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item > a::after,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: -4px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(245, 124, 0, 0.10) 15%,
            rgba(245, 124, 0, 0.30) 32%,
            rgba(245, 124, 0, 0.55) 50%,
            rgba(245, 124, 0, 0.30) 68%,
            rgba(245, 124, 0, 0.10) 85%,
            transparent 100%
        );

    opacity: 0;

    filter: blur(4px);

    transform: scaleX(0.75);

    transition:
        opacity var(--byte-transition-speed) ease,
        transform var(--byte-transition-speed) ease;

    pointer-events: none;

    z-index: -1;
}


.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a::after,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image::after,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper::after {
    opacity: 1;
    transform: scaleX(1);
}


/* =========================================================
   7. OPTIONAL ORANGE TAPE — FIXED VERSION

   The tape is now attached to the image link instead of
   the outer masonry item. This prevents tape from appearing
   in empty areas below or beside the visible image.

   Approximate frequency:
   One tape detail every 13th and 19th item.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(13n + 3) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(13n + 3) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(13n + 3) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(13n + 3) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(13n + 3) > a::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(19n + 7) > a::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 18px;

    width: 42px;
    height: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(214, 92, 0, 0.78) 0%,
            rgba(245, 124, 0, 0.88) 25%,
            rgba(255, 145, 30, 0.92) 50%,
            rgba(245, 124, 0, 0.88) 75%,
            rgba(214, 92, 0, 0.78) 100%
        );

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-right:
        1px solid
        rgba(0, 0, 0, 0.18);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.42);

    transform: rotate(-6deg);
    transform-origin: center;

    opacity: 0.9;

    pointer-events: none;

    z-index: 40;
}


/* Place the second tape group on the right side. */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7) > a::before,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(19n + 7) > a::before {
    left: auto;
    right: 18px;

    transform: rotate(7deg);
}


/* =========================================================
   8. SUPPORT FOR PLUGINS USING AN IMAGE WRAPPER

   These .elementor-495 .elementor-element.elementor-element-6575f72s add tape when the plugin's clickable link
   is nested instead of being a direct child.

   They are intentionally limited to named image wrappers.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(13n + 3)
.byte-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(13n + 3)
.byte-me-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(13n + 3)
.bmp-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(13n + 3)
.bmp-image-wrapper::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 18px;

    width: 42px;
    height: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(214, 92, 0, 0.78),
            rgba(255, 145, 30, 0.92),
            rgba(214, 92, 0, 0.78)
        );

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-right:
        1px solid
        rgba(0, 0, 0, 0.18);

    box-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.42);

    transform: rotate(-6deg);

    opacity: 0.9;

    pointer-events: none;

    z-index: 40;
}


.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7)
.byte-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7)
.byte-me-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7)
.bmp-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7)
.bmp-image-wrapper::before {
    content: "";

    position: absolute;

    top: -7px;
    right: 18px;

    width: 42px;
    height: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(214, 92, 0, 0.78),
            rgba(255, 145, 30, 0.92),
            rgba(214, 92, 0, 0.78)
        );

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-right:
        1px solid
        rgba(0, 0, 0, 0.18);

    box-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.42);

    transform: rotate(7deg);

    opacity: 0.9;

    pointer-events: none;

    z-index: 40;
}


/* Prevent duplicate tape if both the direct link and named
   wrapper .elementor-495 .elementor-element.elementor-element-6575f72s happen to match the same portfolio item. */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a
.byte-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a
.byte-me-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a
.bmp-portfolio-image::before,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a
.bmp-image-wrapper::before {
    display: none;
}


/* =========================================================
   9. FILTER BUTTONS
   Dark industrial label styling.
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 button,
.elementor-495 .elementor-element.elementor-element-6575f72 .filter-button,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-filter,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-filter,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-filter {
    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 3px;

    background: #171717;
    color: #e9e9e9;

    box-shadow:
        9px 11px 18px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transform: translateY(0);

    transition:
        background-color 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}


.elementor-495 .elementor-element.elementor-element-6575f72 button:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .filter-button:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-filter:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-filter:hover,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-filter:hover {
    border-color: rgba(245, 124, 0, 0.58);

    color: #ffffff;

    box-shadow:
        10px 12px 19px rgba(0, 0, 0, 0.52),
        inset 0 0 0 1px rgba(245, 124, 0, 0.08);

    transform: translateY(-1px);
}


/* Active filter states. */

.elementor-495 .elementor-element.elementor-element-6575f72 button.active,
.elementor-495 .elementor-element.elementor-element-6575f72 button.is-active,
.elementor-495 .elementor-element.elementor-element-6575f72 button[aria-pressed="true"],

.elementor-495 .elementor-element.elementor-element-6575f72 .filter-button.active,
.elementor-495 .elementor-element.elementor-element-6575f72 .filter-button.is-active,

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-filter.active,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-filter.is-active,

.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-filter.active,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-filter.is-active,

.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-filter.active,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-filter.is-active {
    background: var(--byte-orange);

    color: #111111;

    border-color:
        rgba(255, 156, 55, 0.80);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transform: translateY(0);
}


/* =========================================================
   10. KEYBOARD ACCESSIBILITY
   ========================================================= */

.elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item a:focus-visible,
.elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item a:focus-visible,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item a:focus-visible,
.elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item a:focus-visible,
.elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item a:focus-visible {
    outline:
        2px solid
        var(--byte-orange);

    outline-offset: 4px;
}


/* =========================================================
   11. TABLET
   Slightly reduces frame thickness and hover movement.
   ========================================================= */

@media (max-width: 1024px) {

    .elementor-495 .elementor-element.elementor-element-6575f72 {
        --byte-mount-size: 4px;
        --byte-hover-lift: -3px;
        --byte-hover-scale: 1.008;
    }

}


/* =========================================================
   12. MOBILE
   Simplifies the effect and removes decorative tape.
   ========================================================= */

@media (max-width: 767px) {

    .elementor-495 .elementor-element.elementor-element-6575f72 {
        --byte-mount-size: 3px;
        --byte-hover-lift: 0px;
        --byte-hover-scale: 1;
    }


    /* Remove tape on mobile. */

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item > a::before,

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::before {
        display: none !important;
    }


    /* Use a lighter shadow for small screens. */

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item > a,

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper {
        box-shadow:
            0 7px 14px rgba(0, 0, 0, 0.42),
            0 2px 5px rgba(0, 0, 0, 0.50);
    }


    /* Disable movement on touch devices. */

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a,
    .elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a,

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper {
        transform: none;
    }


    /* Hide orange hover reflection on mobile. */

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-item > a::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .portfolio-item > a::after,

    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::after,
    .elementor-495 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::after {
        display: none;
    }

}


/* =========================================================
   13. REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-495 .elementor-element.elementor-element-6575f72 *,
    .elementor-495 .elementor-element.elementor-element-6575f72 *::before,
    .elementor-495 .elementor-element.elementor-element-6575f72 *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


.bmp-filters {
    justify-content: center;
}/* End custom CSS */