/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 23 2026 | 00:52:12 */
/* =========================================================
   RESET
========================================================= */

.modern-portfolio,
.modern-portfolio * {
    box-sizing: border-box;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.modern-portfolio {
    position: relative;
    width: 100%;
    min-height: 680px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #292929 0%,
            #111 38%,
            #050505 75%,
            #000 100%
        );
}


/* BACKGROUND LINE */

.modern-portfolio::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background: rgba(255,255,255,.07);

    pointer-events: none;
}


/* =========================================================
   SLIDER
========================================================= */

.modern-slider {
    position: relative;

    width: 100%;
    max-width: 1500px;

    height: 500px;

    margin: 0 auto;
}


/* =========================================================
   SLIDE
========================================================= */

.modern-slide {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 520px;
    height: 430px;

    padding: 7px;

    background: #fff;

    transform:
        translate(-50%, -50%)
        scale(.45);

    opacity: 0;

    z-index: 1;

    pointer-events: none;

    box-shadow:
        0 30px 80px rgba(0,0,0,.70);

    transition:
        left .8s cubic-bezier(.22,.61,.36,1),
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .65s ease,
        filter .8s ease;

    will-change:
        transform,
        left,
        opacity;
}


/* IMAGE */

.modern-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   CENTER
========================================================= */

.modern-slide.is-center {
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 1;

    z-index: 10;

    pointer-events: auto;

    filter: brightness(1);

    box-shadow:
        0 35px 100px rgba(0,0,0,.85);
}


/* =========================================================
   LEFT PREVIEW
========================================================= */

.modern-slide.is-left {
    left: 8%;

    transform:
        translate(-50%, -50%)
        scale(.68);

    opacity: .60;

    z-index: 4;

    pointer-events: auto;

    filter: brightness(.48);
}


/* =========================================================
   RIGHT PREVIEW
========================================================= */

.modern-slide.is-right {
    left: 92%;

    transform:
        translate(-50%, -50%)
        scale(.68);

    opacity: .60;

    z-index: 4;

    pointer-events: auto;

    filter: brightness(.48);
}


/* =========================================================
   FAR LEFT
========================================================= */

.modern-slide.is-far-left {
    left: -10%;

    transform:
        translate(-50%, -50%)
        scale(.40);

    opacity: 0;

    z-index: 1;
}


/* =========================================================
   FAR RIGHT
========================================================= */

.modern-slide.is-far-right {
    left: 110%;

    transform:
        translate(-50%, -50%)
        scale(.40);

    opacity: 0;

    z-index: 1;
}


/* =========================================================
   CENTER HOVER
========================================================= */

.modern-slide.is-center:hover {
    transform:
        translate(-50%, -50%)
        scale(1.025);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.modern-navigation {
    position: absolute;

    left: 50%;
    bottom: -35px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    z-index: 100;
}


/* =========================================================
   ARROWS
========================================================= */

.modern-arrow {
    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    background: rgba(0,0,0,.35);

    color: #fff;

    font-size: 21px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.modern-arrow:hover {
    background: #fff;

    color: #000;

    border-color: #fff;

    transform: scale(1.08);
}


.modern-arrow:active {
    transform: scale(.92);
}


/* =========================================================
   COUNTER
========================================================= */

.modern-counter {
    color: #fff;

    font-size: 11px;

    letter-spacing: 3px;

    min-width: 65px;

    text-align: center;

    opacity: .7;
}


/* =========================================================
   PROGRESS
========================================================= */

.modern-progress {
    position: absolute;

    left: 50%;
    bottom: -60px;

    transform: translateX(-50%);

    width: 150px;
    height: 2px;

    background: rgba(255,255,255,.15);

    overflow: hidden;
}


.modern-progress-bar {
    width: 20%;
    height: 100%;

    background: #fff;

    transform: translateX(0);

    transition:
        transform .7s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px) {

    .modern-portfolio {
        min-height: 620px;
    }


    .modern-slider {
        height: 450px;
    }


    .modern-slide {
        width: 430px;
        height: 360px;
    }


    .modern-slide.is-left {
        left: 10%;

        transform:
            translate(-50%, -50%)
            scale(.60);
    }


    .modern-slide.is-right {
        left: 90%;

        transform:
            translate(-50%, -50%)
            scale(.60);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

    .modern-portfolio {
        min-height: 500px;

    }


    .modern-portfolio::before {
        display: none;
    }


    .modern-slider {
        width: 100%;
        height: 390px;
    }


    /* ALL SLIDES HIDDEN */

    .modern-slide {
        top: 50%;

        left: 50% !important;

        width:
            calc(100% - 32px);

        max-width: 430px;

        height: 330px;

        transform:
            translate(-50%, -50%)
            scale(.88) !important;

        opacity: 0 !important;

        filter: none !important;

        pointer-events: none;

        z-index: 1;
    }


    /* ONLY CENTER IMAGE */

    .modern-slide.is-center {
        left: 50% !important;

        top: 50% !important;

        transform:
            translate(-50%, -50%)
            scale(1) !important;

        opacity: 1 !important;

        filter: brightness(1) !important;

        pointer-events: auto;

        z-index: 20;

        box-shadow:
            0 25px 65px rgba(0,0,0,.80);
    }


    /* =====================================================
       MOBILE ARROWS
       IMAGE KE LEFT / RIGHT
    ===================================================== */

    .modern-navigation {
        position: absolute;

        top: 50%;

        bottom: auto;

        left: 0;
        right: 0;

        width: 100%;
        height: 0;

        transform: translateY(-50%);

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 0 10px;

        gap: 0;

        pointer-events: none;

        z-index: 100;
    }


    .modern-arrow {
        width: 42px;
        height: 42px;

        flex-shrink: 0;

        pointer-events: auto;

        border:
            1px solid
            rgba(255,255,255,.65);

        background:
            rgba(0,0,0,.55);

        backdrop-filter: blur(6px);

        -webkit-backdrop-filter: blur(6px);

        color: #fff;

        font-size: 19px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .modern-arrow:hover {
        background:
            rgba(255,255,255,.18);

        color: #fff;

        transform: scale(1.05);
    }


    .modern-arrow:active {
        transform: scale(.90);
    }


    /* HIDE COUNTER */

    .modern-counter {
        display: none;
    }


    /* HIDE PROGRESS */

    .modern-progress {
        display: none;
    }


    /* DISABLE HOVER */

    .modern-slide.is-center:hover {
        transform:
            translate(-50%, -50%)
            scale(1) !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px) {

    .modern-portfolio {
        min-height: 455px;

        padding-top: 15px;
    }


    .modern-slider {
        height: 350px;
    }


    .modern-slide {
        width:
            calc(100% - 26px);

        height: 285px;
    }


    .modern-slide.is-center {
        width:
            calc(100% - 26px);

        height: 285px;
    }


    .modern-navigation {
        padding: 0 6px;
    }


    .modern-arrow {
        width: 38px;
        height: 38px;

        font-size: 17px;
    }
}