@import url('commen/commen.css');
@import url('commen/header.css');
@import url('commen/path.css');
@import url('commen/filter.css');
@import url('commen/pagination.css');
@import url('commen/footer.css');
@import url('commen/swiper.css');

/*custom*/
body {
    height:auto;
    background:rgba(0,0,0,0.02);
}

header {
    grid-auto-rows: 60px;
    padding: 10px 20px;
}

main {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    background:rgba(255,255,255,1);
}

nav > a:before {
    color: var(--primary);
}

nav > a > span {
    color: var(--primary);
}

.content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    position: relative;
    width: 75%;
    height: auto;
    padding: 0px 0px;
    margin: 20px auto 20px auto;

}

    .content > p {
        flex: 0 0 100%;
        position:relative;
        font: 20px "jfm";
        color: var(--secondary);
        text-align: center;
    }


/*category*/
.category {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-auto-rows: max-content;
    justify-content: start;
    align-items: center;
    grid-gap:30px;
    position: relative;
    width: 75%;
    min-height:700px;
    padding: 30px 0px;
    margin:0px auto;
    direction: rtl;
    z-index: 1;
}

    .category > article {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
        align-items: center;
        grid-gap: 10px;
        position: relative;
        border-radius:5px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 6px rgba(0,0,0,0.1);
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        z-index:1;
        cursor:pointer;
    }

        .category > article:hover {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
            box-shadow: 0 0px 2.2px rgba(0, 0, 0, 0.013), 0 0px 5.3px rgba(0, 0, 0, 0.022), 0 0px 10px rgba(0, 0, 0, 0.03), 0 0px 17.9px rgba(0, 0, 0, 0.038), 0 0px 33.4px rgba(0, 0, 0, 0.048), 0 0px 80px rgba(0, 0, 0, 0.07);
            z-index: 100;
        }


        .category > article > img {
            position: relative;
            width: 100%;
            height: 250px !important;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            border-radius: 5px 5px 0px 0px;
        }

        .category > article > i {
            position: absolute;
            width: 80px;
            height: 80px;
            top: 210px;
            left: 20px;
            border: solid 5px rgba(255,255,255,0.7);
            border-radius: 100%;
            overflow: hidden !important;
        }

        .category > article > i > img {
           width:100%;
           height:100%;
        }

        .category > article > p {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            margin: 10px 0px 0px 0px;
            padding: 0px 20px;
            color: rgba(36,59,103,1);
            overflow:hidden;
        }

            .category > article > p > span:nth-child(1) {
                position: relative;
                font: 18px "jfm";
                color: rgba(36,59,103,1);
            }

            .category > article > p > span:nth-child(2) {
                position: relative;
                font-size: 16px;
                width: 100%;
                color: rgba(100,100,100,1);
                text-align: justify;
                line-height: 30px;
                direction: rtl;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .category > article > .info {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            grid-gap: 5px;
            position: relative;
            width: 100%;
            padding:0px 20px 20px 20px;
            margin-right: auto;
        }


            .category > article > .info > p {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                grid-gap: 5px;
                position: relative;
                width:100%;
                font-size: 16px;
                color: rgba(36,59,103,1);
            }

                .category > article > .info > p:before {
                    position: relative;
                    top: 2px;
                    font-size: 14px;
                    color: rgba(100,100,100,1);
                }


            .category > article > .info > span {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                position: relative;
                width:80px;
                font-size: 11px;
                color: rgba(255,255,255,1);
                text-align: center;
                padding: 1px 7px;
                background: rgba(251,37,37,1);
                border-radius: 3px;
            }


            .category > article > .info > div {
                display: flex;
                flex-flow: row-reverse wrap;
                justify-content: center;
                align-items: center;
                grid-gap: 5px;
                position: relative;
                width: 80px;
                font-size: 16px;
                color: rgba(100,100,100,1);
                border-radius: 3px;
                margin-right: auto;
            }

                .category > article > .info > div > i {
                    position: relative;
                    top: 0px;
                    font-size: 16px;
                    color: rgba(255,216,0, 1);
                }



        


/*-- media query --*/
@media only screen and (max-width : 1200px) {

    .content {
        width: 95%;
    }

    .category {
        width:100%;
        padding:20px 20px;
    }

}

@media only screen and (max-width: 768px) {

    .content > p {
        font: 18px "jfm";
    }

    .category > article > img {
        height: 210px !important;
    }


    .category > article > i {
        top: 170px;
    }


        .category > article > p > span:nth-child(1) {
            font: 16px "jfm";
        }

            .category > article > p > span:nth-child(2) {
                font-size: 15px;
            }

}

@media only screen and (max-width: 600px) {

    .content > p {
        font: 16px "jfm";
    }

    .category > article > img {
        height: 190px !important;
    }


    .category > article > i {
        top: 150px;
        right: auto;
        left: 20px;
        margin: unset;
    }

        .category > article > p > span:nth-child(1) {
            font: 15px "jfm";
        }

            .category > article > p > span:nth-child(2) {
                font-size: 14px;
            }


        .category > article > .info > p {
            font-size: 14px;
        }



        .category > article > .info > span {
            font-size: 9px;
        }

        .category > article > .info > div {
            font-size: 14px;
        }

            .category > article > .info > div > i {
                top: 1px;
                font-size: 14px;
            }

}

@media only screen and (max-width: 414px) {

    .content {
        width: 95%;
    }

    .category > article > p > span:nth-child(1) {
        font: 14px "jfm";
    }

            .category > article > p > span:nth-child(2) {
                font-size: 12px;
            }


}

@media only screen and (max-width: 380px) {

    .category {
        grid-template-columns: 1fr;
    }

}