.section5 {
        position: relative;
    }

    .section5 .indexTitle {
        color: #fff;
    }

    .Box5 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
    }

    .item5 {
        position: relative;
        width: 100%;
        height: auto;
        padding: 10px;
        background: #fafafa;
        transition: 0.5s;
    }

    .item5:hover {
        background: var(--color);
    }

    .item5 .img5 {
        position: relative;
    }

    .item5 .img5 p {
        position: absolute;
        z-index: 22;
        right: 0;
        top: 0;
        background: #ed7d31;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 1;
        padding: 5px 15px;
    }

    .item5 .text5 h1 {
        padding: 5px 0;
        color: #161616;
        font-size: 14px;
        text-align: center;
        line-height: 1.5;
        border-bottom: 1px solid #f98a55;
        font-weight: bold;
        transition: all .5s;
    }


    .item5 .text5 h2 {
        padding: 5px 0;
        color: #161616;
        font-size: 12px;
        text-align: center;
        line-height: 1.5;
        transition: all .5s;
    }

    .item5:hover .text5 h1,
    .item5:hover .text5 h2 {
        color: #fff;
    }


    @media (max-width: 1200px) {
        .Box5 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }
    }

    @media (max-width: 720px) {
        .Box5 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px;
        }
    }

    @media (max-width: 380px) {
        .Box5 {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 10px;
        }
    }