.csrProjectSec {
    background-repeat: no-repeat;
    background-size: cover;

    .headingWrap {
        .secH {
            text-align: center;
        }
    }

    .csrProjectBtm {
        .tabWrap {
            display: block;

            .listWrap {
                margin-top: 50px;

                .tabs {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                    overflow-x: auto;
                    overflow-y: hidden;


                    li {
                        list-style-type: none;
                        cursor: pointer;
                        border: 1px solid #000;
                        padding: 20px 25px;
                        border-radius: 55px;
                        background-color: transparent;
                        color: #000;
                        text-align: center;
                        font-family: "Zabal DEMO";
                        font-size: 26px;
                        font-weight: 500;
                        line-height: 20px;
                        transition: all 0.5s;
                        margin: 0 0 7px;
                        white-space: nowrap;

                        &.active {
                            background-color: #DA0A0A;
                            color: #fff;
                            border: 1px solid transparent;
                        }

                        &:hover {
                            background-color: #DA0A0A;
                            color: #fff;
                            border: 1px solid transparent;
                        }
                    }

                    &::-webkit-scrollbar {
                        width: 6px;
                        height: 6px;
                        border-radius: 10px;
                        background-color: #d4d4d4;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #ff6b6b;
                        border-radius: 10px;
                    }
                }

                .listContBox {
                    padding-top: 50px;

                    .tab_content {
                        display: none;

                        &.active {
                            display: block;
                        }

                        .csrProjContDiv {
                            .csrProjDivTop {
                                align-items: center;

                                .projFig {
                                    width: 100%;
                                    height: 350px;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        border-radius: 20px;
                                    }
                                }
                            }

                            .csrProjDivBtm {
                                padding-top: 80px;

                                .csrH {
                                    color: #848484;
                                    font-family: 'Quicksand';
                                    font-size: 45px;
                                    font-style: normal;
                                    font-weight: 700;
                                    margin-bottom: 30px;
                                }

                                .relatedWorkSec {
                                    .relatedWorkSlider {
                                        .relatedWorkItem {
                                            margin: 0px 10px;

                                            .relatedWorkCard {
                                                width: 100%;
                                                height: 500px;
                                                position: relative;

                                                .relatedWorkImg {
                                                    width: 100%;
                                                    height: 100%;

                                                    img {
                                                        width: 100%;
                                                        height: 100%;
                                                        object-fit: cover;
                                                        border-radius: 15px;
                                                    }
                                                }

                                                .relatedWorkTxt {
                                                    position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    width: 100%;
                                                    height: 100%;
                                                    background: #DA0A0A;
                                                    border-radius: 15px;
                                                    padding: 25px 30px;
                                                    display: flex;
                                                    flex-direction: column;
                                                    justify-content: center;
                                                    transform: translateY(110%);
                                                    transition: all 0.5s;
                                                    display: none;

                                                    h5 {
                                                        color: #FFF;
                                                        font-family: "Zabal DEMO";
                                                        font-size: 26px;
                                                        font-style: normal;
                                                        font-weight: 900;
                                                        margin-bottom: 10px;
                                                    }

                                                    .relatedWorkTxtInn {
                                                        max-height: 360px;
                                                        overflow-y: auto;
                                                        padding-right: 10px;
                                                        display: none;

                                                        p {
                                                            color: #FFF;
                                                            font-family: "Zabal DEMO";
                                                            font-size: 18px;
                                                            font-weight: 600;
                                                            line-height: 28px;
                                                        }

                                                        &::-webkit-scrollbar {
                                                            width: 5px;
                                                        }

                                                        &::-webkit-scrollbar-track {
                                                            background-color: #ccc;
                                                        }

                                                        &::-webkit-scrollbar-thumb {
                                                            background-color: #870b0b;
                                                        }
                                                    }
                                                }

                                                &:hover {
                                                    .relatedWorkTxt {
                                                        transform: translateY(0);

                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


/* ====== start responsive ======= */

@media(max-width: 1366px) {

    .overviewSec {
        & .overviewRight {
            .overviewFig {
                height: 310px;
            }
        }
    }

    .csrProjectSec {
        & .headingWrap {
            .secH {
                font-size: 40px;
            }
        }

        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    & .tabs {
                        li {
                            padding: 16px 20px;
                            font-size: 20px;
                        }
                    }

                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                .csrProjDivBtm {
                                    & .relatedWorkSec {
                                        & .relatedWorkSlider {
                                            & .relatedWorkItem {
                                                & .relatedWorkCard {
                                                    height: 390px;
                                                    & .relatedWorkTxt {
                                                        h5 {
                                                            font-size: 24px;
                                                        }

                                                        & .relatedWorkTxtInn {
                                                            p {
                                                                font-size: 16px;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 1200px) {
    .csrProjectSec {
        & .headingWrap {

            .secH {
                font-size: 40px;
            }
        }

        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                & .csrProjDivBtm {
                                    .csrH {
                                        font-size: 40px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

    }
}

@media(max-width: 1199px) {
    .csrProjectSec {
        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    & .tabs {
                        & li {
                            font-size: 22px;
                        }
                    }
                }
            }

            & .listContBox {
                & .tab_content {
                    & .csrProjContDiv {
                        .csrProjDivBtm {
                            & .relatedWorkSec {
                                & .relatedWorkSlider {
                                    & .relatedWorkItem {
                                        & .relatedWorkCard {
                                            height: 420px;

                                            .relatedWorkTxt {
                                                padding: 26px 20px;
                                            }

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

@media(max-width: 991px) {
    .csrProjectSec {
        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    margin-top: 35px;

                    & .tabs {
                        & li {
                            padding: 17px 20px;
                        }
                    }

                    & .listContBox {
                        padding-top: 20px;

                        & .tab_content {
                            & .csrProjContDiv {
                                .csrProjDivTop {
                                    .projContRight {
                                        width: 70%;
                                        margin: 20px auto 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 768px) {
    .csrProjectSec {
        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    & .tabs {
                        justify-content: left;

                        & li {
                            font-size: 20px;
                            padding: 13px 20px;
                        }
                    }

                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                .csrProjDivTop {
                                    .projContRight {
                                        width: 80%;
                                    }

                                    .projFig {
                                        height: 300px;
                                    }
                                }

                                & .csrProjDivBtm {
                                    & .relatedWorkSec {
                                        & .relatedWorkSlider {
                                            & .relatedWorkItem {
                                                .relatedWorkCard {
                                                    height: auto;
                                                    background-color: #DA0A0A;
                                                    border-radius: 15px;
                                                    padding: 15px;

                                                    .relatedWorkImg {
                                                        height: 250px;
                                                    }

                                                    .relatedWorkTxt {
                                                        position: static;
                                                        transform: none;
                                                        padding: 15px 0;

                                                        h5 {
                                                            font-size: 20px;
                                                        }

                                                        .relatedWorkTxtInn {
                                                            max-height: 150px;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 575px) {
    .csrProjectSec {
        & .headingWrap {

            .secH {
                font-size: 35px;
            }
        }

        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                & .csrProjDivBtm {
                                    .csrH {
                                        font-size: 35px;
                                        margin-bottom: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 480px) {
    .csrProjectSec {
        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    margin-top: 20px;

                    & .tabs {
                        & li {
                            font-size: 17px;
                            padding: 10px 15px;
                        }
                    }

                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                .csrProjDivTop {
                                    .projContRight {
                                        width: 90%;
                                    }

                                    .projFig {
                                        height: 250px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 420px) {
    .csrProjectSec {
        & .headingWrap {

            .secH {
                font-size: 30px;
            }
        }

        & .csrProjectBtm {
            & .tabWrap {
                & .listWrap {
                    margin-top: 20px;

                    & .tabs {
                        & li {
                            font-size: 15px;
                            padding: 10px 10px;
                        }
                    }

                    & .listContBox {
                        & .tab_content {
                            & .csrProjContDiv {
                                & .csrProjDivBtm {
                                    .csrH {
                                        font-size: 30px;
                                    }
                                }
                            }
                        }
                    }

                }
            }
        }
    }

}

/* ====== end responsive ======= */