/* Start Features */

.features {
    padding-top: var(--mainPaddingTop);
    padding-bottom:40px;/* var(--mainPaddingBottom);*/
    position: relative;
    background-color: #fff;
}

    .features .container {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    }

    .features .features-box {
        text-align: center;
        /*border: 1px solid red;*/
        /*width:25% !important;*/
        height:350px;
    }

    .features .holder-img {
        /*position: relative;*/
        height: 20px; /*70*/
       /* overflow: hidden;*/
    }

       /* .features .holder-img::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }*/

    .features .features-box.features_0 .holder-img::before {
        background-color: rgba(52, 152, 219,0.6);
    }

    .features .features-box.features_1 .holder-img::before {
        background-color: rgba(52, 152, 219,0.6);
    }

    .features .features-box.features_2 .holder-img::before {
        background-color: rgba(46, 204, 113,0.6);
    }

    .features .features-box.features_3 .holder-img::before {
        background-color: rgba(231, 76, 60,0.6);
    }

    .features .features-box.features_4 .holder-img::before {
        background-color: rgba(231, 76, 60,0.6);
    }

    /*.features .holder-img::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-color: transparent #fff #fff transparent;
        border-width: 50px 250px;
        border-style:  dashed;
        transition: var(--mainTransition);
    }*/

  /*  .features .features-box:hover .holder-img::after {
        left: 0;
        border-color: transparent transparent #fff #fff;
        border-width: 40px 250px;
    }*/

    .features .holder-img img {
        width: 100%;
        height: 0px; /* 250*/
    }

    .features .features-box h3 {
        font-size: 1.8rem;
        font-weight: bold;
        position: relative;
        width: fit-content;
        margin: 0 auto;
    }

        .features .features-box h3::before {
            content: "";
            position: absolute;
            width: 60%;
            height: 3px;
            display: block;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
        }

    .features .features-box.features_0 h3::before {
        background-color: #3498db;
    }

    .features .features-box.features_1 h3::before {
        background-color: #3498db;
    }

    .features .features-box.features_2 h3::before {
        background-color: #2ecc71;
    }

    .features .features-box.features_3 h3::before {
        background-color: #e74c3c;
    }

    .features .features-box.features_4 h3::before {
        background-color: #e74c3c;
    }

    .features .features-box p {
        padding: 15px;
        margin: 5px 0;
        font-size: 1rem;
        color: #777;
        line-height: 1.5;
    }

    .features .features-box a {
        display: block;
        position: relative;
        width: 25% !important ;/* fit-content;*/
        margin: 0 auto 30px;
        font-size: 1.2rem;
        font-weight: bold;
        padding: 10px 25px;
        z-index: 1;
    }

    .features .features-box a::before,
    .features .features-box a::after {
        content: "";
        position: absolute;
        right: 0;
        width: 100%;
        height: 3px;
        opacity: 0;
        transition: var(--mainTransition);
    }

    .features .features-box a::before {
        top: -20px;
        
    }

    .features .features-box a::after {
        bottom: -20px;
    }



    .features .features-box.features_0 a {
        color: #def2ff;
    }
    .features .features-box.features_1 a {
        color: #3498db;
    }

    .features .features-box.features_2 a {
        color: #2ecc71;
    }

    .features .features-box.features_3 a {
        color: #e74c3c;
    }

    .features .features-box.features_4 a {
        color: #e74c3c;
    }

    .features .features-box.features_5 a {
        color: #e74c3c;
    }

    .features .features-box.features_6 a {
        color: #e74c3c;
    }

    .features .features-box.features_7 a {
        color: #e74c3c;
    }


    .features .features-box.features_0 a::before,
    .features .features-box.features_0 a::after {
        background-color: #def2ff;
    }

    .features .features-box.features_1 a::before,
    .features .features-box.features_1 a::after {
        background-color: #3498db;
    }

    .features .features-box.features_2 a::before,
    .features .features-box.features_2 a::after {
        background-color: #2ecc71;
    }

    .features .features-box.features_3 a::before,
    .features .features-box.features_3 a::after {
        background-color: #e74c3c;
    }

    .features .features-box.features_4 a::before,
    .features .features-box.features_4 a::after {
        background-color: #e74c3c;
    }

    .features .features-box.features_5 a::before,
    .features .features-box.features_5 a::after {
        background-color: #e74c3c;
    }

    .features .features-box.features_6 a::before,
    .features .features-box.features_6 a::after {
        background-color: #e74c3c;
    }

    .features .features-box:hover a::before {
        top: -1px;
        opacity: 1;
    }

    .features .features-box:hover a::after {
        bottom: -3px;
        opacity: 1;
    }

    .features a:hover .features-box
    {
        /*bottom: -3px;*/
        opacity: 1;
        background-color: lightgray/* لون الخلفية*/
    }
/* End Features */