/*--------------------------------
    Case Study 
--------------------------------*/
.recent-case-study-filter-nav{
    text-align: center;
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        margin-bottom: 28px;
        li{
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
            &.active{
                color: var(--main-color-one);
            }
            +li{
                margin-left: 20px;
            }
        }
    }
}

.single-recent-case-study-01{
    &:hover{
        .img-wrapper{
            .hover{
                .title{
                    color: var(--main-color-one);
                }
            }
        }
    }
    .img-wrapper{
        position: relative;
        z-index: 0;
        margin-bottom: 60px;
        img{
            width: 100%;
        }
        .hover{
            background-color: $white;
            text-align: center;
            position: absolute;
            left: 5%;
            bottom: -30px;
            width: 90%;
            padding: 25px 30px 28px 30px;
            box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
        
            .title{
                font-size: 26px;
                line-height: 34px;
                font-weight: 700;
                transition: all 500ms;
            }
            .read-more{
                font-size: 14px;
                font-weight: 600;
                transition: all 500ms;
                &:hover{
                    color: var(--main-color-one);
                    i{
                        visibility: visible;
                        opacity: 1;
                        @include transform(translateX(0px));
                    }
                }
                i{
                    visibility: hidden;
                    opacity: 0;
                    @include transform(translateX(-50px));
                    transition: all 500ms;
                }
            }
        }
    }
}
.recent-case-filter-03{
    margin-bottom: 25px;
}
.recent-case-filter-02,
.recent-case-filter-03{
    .recent-case-filter-menu{
        text-align: center;
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            margin-bottom: 28px;
            li{
                display: inline-block;
                font-size: 16px;
                font-weight: 400;
                cursor: pointer;
                &.active{
                    color: var(--main-color-one);
                }
                +li{
                    margin-left: 20px;
                }
            }
        }
    }
}

.single-case-item-02{
    display: block;
    &:hover{
        .thumb{
            .hover{
                visibility: visible;
                opacity: 1;
            }
        }
    }
    .thumb{
        position: relative;
        z-index: 0;
        img{
            width: 100%;
        }
        .hover{
            position: absolute;
            left: 5%;
            top: 5%;
            width: 90%;
            background-color: $white;
            height: 90%;
            // text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: all 500ms;
            .title{
                font-size: 26px;
                line-height: 34px;
                font-weight: 700;
                transition: all 500ms;
                &:hover{
                    color: var(--main-color-one);
                }
            }
            .cats{
                a{
                    transition: all 500ms;
                    &:hover{
                        color: var(--main-color-one);
                    }
                }
            }
        }
    }
}

.case-masonry{
    width: 20%;
}

.case-masonry-03{
    margin-bottom: 30px;
} 