:root {
    --main-color: #eb2f06;
    --sec-color: #F79F1F
}

.section-padding {
    padding-top: 90px;
    padding-bottom: 60px
}

.main-heading {
    position: relative;
    overflow: hidden
}




nav {
    padding: 5px 0 !important
}



.portfolio {
    background-color: #fcfcfc
}

    .portfolio .prog-filter {
        padding: 10px 0
    }

        .portfolio .prog-filter ul {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap
        }

            .portfolio .prog-filter ul li {
                padding: 5px 15px;
                color: var(--sec-color);
                border-radius: 30px;
                margin: 5px;
                cursor: pointer;
                font-size: 17px
            }

                .portfolio .prog-filter ul li:hover, .portfolio .prog-filter ul li.active {
                    background-color: var(--main-color);
                    color: #fff
                }

    .portfolio .port-field a {
        border-radius: 10px;
        overflow: hidden
    }

        .portfolio .port-field a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff99;
            opacity: 0;
            transition: .4s ease-in-out
        }

        .portfolio .port-field a:hover::before {
            opacity: 1
        }

        .portfolio .port-field a .port-disc {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: calc(100% - 50px);
            height: calc(100% - 50px);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #fff
        }

            .portfolio .port-field a .port-disc span {
                position: absolute;
                background-color: var(--main-color);
                transform: scale(0);
                transition: .5s ease
            }

        .portfolio .port-field a:hover .port-disc span {
            transform: scale(1);
            transition-delay: .4s
        }

        .portfolio .port-field a .port-disc span:nth-of-type(1) {
            top: 0;
            left: 0;
            width: 2px;
            height: 100%
        }

        .portfolio .port-field a .port-disc span:nth-of-type(2) {
            top: 0;
            right: 0;
            width: 2px;
            height: 100%
        }

        .portfolio .port-field a .port-disc span:nth-of-type(3) {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px
        }

        .portfolio .port-field a .port-disc span:nth-of-type(4) {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px
        }

        .portfolio .port-field a .port-disc i {
            color: var(--sec-color);
            font-size: 40px;
            margin-bottom: 15px;
            opacity: 0
        }

        .portfolio .port-field a:hover .port-disc i {
            transform: rotate(360deg);
            opacity: 1;
            transition: .5s ease-in;
            transition-delay: .3s
        }

        .portfolio .port-field a .port-disc h4 {
            color: #000;
            font-size: 20px;
            font-weight:700;
            direction:rtl;
            margin-bottom: -40px;
            opacity: 0
        }

        .portfolio .port-field a:hover .port-disc h4 {
            margin-bottom: 0;
            opacity: 1;
            transition: .5s ease;
            transition-delay: .4s
        }

        .portfolio .port-field a .port-disc p.type {
            color: #212121;
            font-weight: 600;
            font-size: 18px;
            margin-top: -20px;
            opacity: 0
        }

        .portfolio .port-field a:hover .port-disc p.type {
            margin-top: 0;
            opacity: 1;
            transition: .7s ease;
            transition-delay: .4s
        }



html::-webkit-scrollbar {
    width: 8px
}

html::-webkit-scrollbar-track {
    background: #fefefe
}

html::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 5px
}

::selection {
    color: #000;
    background-color: #ecf0f1
}