.moreing{
    display: grid;
    grid-template-areas: 
    "m1-img m1-text"
    "m2-text m2-img"
    "m3-img m3-text"
    "m4-text m4-img"
    "m5-img m5-text"
    "m6-text m6-img"
    "m7-img m7-text"
    "m8-text m8-img"
    "m9-img m9-text"
    "m10-text m10-img"
    ;
    align-items: center;
    justify-items: center;
}



.m1-img{
    margin: 5px;
    grid-area: 'm1-img';
    width: 500px;
    height: auto;
}
.m1-text{
    margin: 5px;
    grid-area: 'm1-text';
}


.m2-text{
    margin: 5px;
    grid-area: 'm2-text';
}
.m2-img{
    margin: 5px;
    grid-area: 'm2-img';
    width: 500px;
    height: auto;
}

.m3-img{
    margin: 5px;
    grid-area: 'm3-img';
    width: 500px;
    height: auto;
}
.m3-text{
    margin: 5px;
    grid-area: 'm3-text';
}

.m4-img{
    margin: 5px;
    grid-area: 'm4-img';
    width: 500px;
    height: auto;
}
.m4-text{
    margin: 5px;
    grid-area: 'm4-text';
}

.m5-img{
    margin: 5px;
    grid-area: 'm5-img';
    width: 500px;
    height: auto;
}
.m5-text{
    margin: 5px;
    grid-area: 'm5-text';
}

.m6-img{
    margin: 5px;
    grid-area: 'm6-img';
    width: 500px;
    height: auto;
}
.m6-text{
    margin: 5px;
    grid-area: 'm6-text';
}

.m7-img{
    margin: 5px;
    grid-area: 'm7-img';
    width: 500px;
    height: auto;
}
.m7-text{
    margin: 5px;
    grid-area: 'm7-text';
}

.m8-img{
    margin: 5px;
    grid-area: 'm8-img';
    width: 500px;
    height: auto;
}
.m8-text{
    grid-area: 'm8-text';
    margin: 5px;
}

.m9-img{
    margin: 5px;
    grid-area: 'm9-img';
    width: 500px;
    height: auto;
}
.m9-text{
    margin: 5px;
    grid-area: 'm9-text';
}

.m10-img{
    margin: 5px;
    grid-area: 'm9-img';
    width: 500px;
    height: auto;
}
.m10-text{
    margin: 5px;
    grid-area: 'm9-text';
}

.img-h img{
    width: 100%;
    height: 100%;
}



.box-shadow {
    box-shadow: 5px 0px 15px #000000;
}


.hide{
    display: none;
}
.but{
    background-color: #6e473b;
    border: 1px solid #e3d8c8;
    border-radius: 5px;
    color: #e3d8c8;
    width: 40px;
    box-shadow: 5px 5px 15px #000000;
}

.but-m{
    background-color: #6e473bb0;
    border: none;
}

.more-left{
    text-align: left;
    direction: ltr;
}

/* .titl-more-img{
    position: absolute;
    right: 8%;
    z-index: 2;
    margin-top: 4%;
} */

.text-mores{
    text-align: center;
    width: 400px;
    color: #2f1d0c;
}



hr{
    display: none;
}

/* more phon */
/* ============ تصميم الهواتف الذكية Mobile Design ============ */
@media (max-width: 600px) {
    hr{
        display: inline-block;
    }
    .moreing {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        width: 100%;
        padding: 0;
    }

    /* جعل جميع الصور بعرض كامل والارتفاع 50vh */
    .m1-img, .m2-img, .m3-img, .m4-img, .m5-img, .m6-img, .m7-img, .m8-img, .m9-img {
        width: auto;
        height: 50vh;
        margin: 15px auto;
        object-fit: cover;
    }


    /* جعل النصوص بعرض كامل ومتوسطة */
    .m1-text, .m2-text, .m3-text, .m4-text, .m5-text, .m6-text, .m7-text, .m8-text, .m9-text {
        width: 90%;
        margin: 15px auto;
        height: 30vh;
    }


    /* .m2-text{
       order: 1; 
    } */

    /* إزالة الاتجاه العكسي */
    .more-left {
        text-align: right;
        direction: rtl;
    }

    .text-mores-t, .text-mores-b {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 10px;
        margin: 5px auto;
    }

    .img-h {
        width: 100%;
        height: 50vh;
        position: relative;
    }

    .box-mores-img {
        width: 100%;
        height: 50vh;
        position: relative;
    }

    

    /* إظهار الأزرار وجعل لونها مختلف */
    .but {
        background-color: #6e473b;
        border: 1px solid #e3d8c8;
        border-radius: 5px;
        color: #e3d8c8;
        width: 40px;
        cursor: pointer;
        font-weight: bold;
        display: inline-block;
        z-index: 20;
    }


    .but-m {
        background-color: #6e473bad;
        border: none;
    }


    .line {
        width: 90%;
        margin-top: 40px;
        margin-bottom: 40px;
        border: 1px solid #6e473b;
    }

    .m1-text , .m2-text , .m3-text , .m4-text , .m5-text , .m6-text , .m7-text , .m8-text , .m9-text , .m10-text{
        display: none;
    }
}

@media (max-width: 480px) {
    .moreing {
        padding: 0;
    }

    .m1-img, .m2-img, .m3-img, .m4-img, .m5-img, .m6-img, .m7-img, .m8-img, .m9-img {
        width: auto;
        height: 45vh;
    }

    .img-h {
        height: 45vh;
    }

    .box-mores-img {
        height: 45vh;
    }

    .m10-img img{
        width: 50px !important;
    }

    .text-mores-t, .text-mores-b {
        width: 95%;
        font-size: 14px;
    }

    .but {
        width: auto;
        font-size: 12px;
        padding: 6px 10px;
    }
    .m1-text , .m2-text , .m3-text , .m4-text , .m5-text , .m6-text , .m7-text , .m8-text , .m9-text , .m10-text{
        display: none;
    }
}
/* more phon /*/