/* ==========================================================
   Alfaraj Modern Theme
   Version : 1.0
========================================================== */

:root{

--bg:#EEDD99;

--card:#ffffff;

--primary:#7a5b1b;

--text:#333;

--border:#ddd;

--shadow:0 6px 20px rgba(0,0,0,.12);

}

*{

box-sizing:border-box;

}

html{

direction:rtl;

}

body{

margin:0;

padding:0;

direction:rtl;

font-family:'Tajawal',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.8;

}

.af-wrapper{

max-width:1400px;

margin:auto;

padding:20px;

}

.af-header{

text-align:center;

margin-bottom:25px;

}

.af-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:20px;

}

.af-search{

display:flex;

gap:8px;

align-items:center;

}

.af-content{

margin-top:20px;

}

.af-footer{

text-align:center;

padding:35px 0;

font-size:.9rem;

color:#777;

}

/*==================================================
Alfaraj Modern Directory Card
==================================================*/

.af-dir-card{

float:left;

margin:18px;

width:220px;

background:#fff;

border-radius:14px;

overflow:hidden;

border:1px solid #ececec;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:all .30s ease;

}

.af-dir-card:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.af-dir-image{

text-align:center;

padding:18px;

background:#fafafa;

}

.af-dir-image img{

max-width:170px;

max-height:170px;

height:auto;

width:auto;

display:block;

margin:auto;

}

.af-dir-content{

padding:16px;

text-align:center;

}

.af-dir-title{

display:block;

font-size:20px;

font-weight:700;

color:#155d37;

text-decoration:none;

margin-bottom:10px;

line-height:1.5;

}

.af-dir-title:hover{

color:#0d8c4d;

}

.af-dir-desc{

font-size:14px;

line-height:1.8;

color:#666;

}

/*======================================================
Person Card
======================================================*/

.af-person-card{

display:inline-block;

vertical-align:top;

width:230px;

margin:15px;

background:#fff;

border-radius:16px;

overflow:hidden;

border:1px solid #ececec;

box-shadow:0 8px 22px rgba(0,0,0,.12);

transition:.30s;

text-align:center;

}

.af-person-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,.20);

}


.af-thumb{

width:190px;

height:190px;

object-fit:cover;

border-radius:12px;

display:block;

margin:auto;

}

.af-person-body{

padding:18px;

}

.af-person-name{

display:block;

font-size:19px;

font-weight:700;

color:#1b5e3d;

text-decoration:none;

margin-bottom:14px;

line-height:1.6;

}

.af-person-name:hover{

color:#0d8d55;

}

.af-person-meta{

border-top:1px solid #eee;

padding-top:10px;

}

.af-meta-row{

font-size:13px;

color:#777;

margin:6px 0;

}


/* ==========================================================
   Alfaraj Modern Theme
   Version 1.1 Improvements
========================================================== */

/*==============================
 Breadcrumb
==============================*/

.af-breadcrumb{

    background:#fff;
    padding:14px 20px;
    border-radius:12px;
    margin:20px 0;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    font-size:15px;
    color:#666;
}

.af-breadcrumb a{

    color:#155d37;
    text-decoration:none;
    font-weight:600;
}

.af-breadcrumb a:hover{

    color:#0d8d55;
}

/*==============================
 Page Title
==============================*/

.af-page-title{

    text-align:center;
    margin:30px 0 35px;
}

.af-page-title h1{

    margin:0;
    font-size:38px;
    color:#155d37;
    font-weight:700;
}

.af-page-title:after{

    content:"";
    display:block;
    width:120px;
    height:4px;
    background:#b9933f;
    margin:14px auto 0;
    border-radius:20px;
}

/*==============================
 Gallery
==============================*/

/*==============================
Gallery Layout
==============================*/

.af-gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:flex-start;

    gap:24px;

    width:100%;
	
	margin-top:35px;

}

/*==============================
 Person Card
==============================*/

.af-person-card{

width:230px;

flex:0 0 230px;

margin:0;

display:flex;

flex-direction:column;

min-height:430px;

background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #e6e6e6;

box-shadow:0 10px 28px rgba(0,0,0,.12);

transition:.35s;

}

.af-person-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/*==============================
 Image
==============================*/

.af-person-image{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:8px 8px 4px;

    background:#fafafa;

}

.af-thumb{

    width:210px;
	
    height:210px;

    display:block;

    object-fit:cover;

    border-radius:14px;

    margin:0;

}

.af-person-card:hover .af-thumb{

    transform:scale(1.03);

}

/*==============================
 Body
==============================*/

.af-person-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;

}

.af-person-name{

    font-size:20px;

    font-weight:700;

    line-height:1.8;

    color:#155d37;

    text-decoration:none;

    margin-bottom:15px;

}

/* لا يتم قص الاسم */

.af-person-name{

    white-space:normal;

    overflow:visible;

    text-overflow:unset;

}

/*==============================
 Footer
==============================*/

.af-person-meta{

    margin-top:auto;

    border-top:1px solid #ececec;

    padding-top:12px;

}

.af-meta-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:#777;

    font-size:14px;

    margin:6px 0;

}

/*==============================
 Pagination
==============================*/

.af-pagination{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:45px 0;
}

/* الزر الفعال */

.af-pagination a{

    display:inline-block;

    min-width:170px;

    text-align:center;

    padding:12px 26px;

    background:#f8f3dd;

    color:#155d37;

    border:2px solid #155d37;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;
}

.af-pagination a:hover{

    background:#155d37;
    color:#fff;

    transform:translateY(-2px);
}

/* الزر غير الفعال */

.af-pagination span{

    display:inline-block;

    min-width:170px;

    text-align:center;

    padding:12px 26px;

    background:#ece8d5;

    color:#8a8a8a;

    border:2px solid #d8d3be;

    border-radius:10px;

    font-weight:700;

    cursor:default;
}

/*==================================================
 Responsive
==================================================*/

@media (max-width:1100px){

    .af-person-card{
        width:220px;
        flex:0 0 220px;
    }

}

@media (max-width:900px){

    .af-person-card{
        width:200px;
        flex:0 0 200px;
    }

}

@media (max-width:650px){

    .af-gallery{
        justify-content:center;
    }

    .af-person-card{
        width:170px;
        flex:0 0 170px;
    }

    .af-thumb{
        width:180px;
        height:180px;
    }

    .af-page-title h1{
        font-size:30px;
    }

}

@media (max-width:600px){

    .af-gallery{
        gap:16px;
    }

    .af-thumb{
        width:150px;
        height:150px;
    }

    .af-person-name{
        font-size:18px;
    }

}

/*==================================================
 Image View
==================================================*/

.af-image-page{

    max-width:1400px;

    margin:40px auto;

    padding:0 20px;

}

.af-image-layout{

    display:flex;

    gap:40px;

    align-items:flex-start;

    justify-content:center;

    flex-wrap:wrap;

}

.af-image-card{

    flex:0 0 430px;

    background:#fff;

    padding:14px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.af-image-photo{

    text-align:center;

}

.af-image-photo img{

    width:100%;

    height:auto;

    display:block;

    border-radius:14px;

    transition:.35s;

}

.af-image-photo img:hover{

    transform:scale(1.02);

}

.af-image-info{

    flex:1;

    min-width:360px;

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.10);

}

.af-image-title{

    margin:0 0 20px;

    color:#155d37;

    font-size:34px;

    line-height:1.8;

    font-weight:700;

    text-align:center;

}

.af-image-description{

    text-align:center;

    color:#666;

    line-height:2;

    margin-bottom:25px;

    font-size:18px;

}

.af-image-parameters{

    margin-top:20px;

}

.af-image-parameters table{

    width:100%;

    border-collapse:collapse;

}

.af-image-parameters td{

    padding:11px 14px;

    border-bottom:1px solid #ececec;

}

.af-image-parameters td:first-child{

    width:180px;

    background:#fafafa;

    color:#155d37;

    font-weight:bold;

}

.af-image-parameters a{

    color:#155d37;

    text-decoration:none;

    font-weight:600;

}

.af-image-parameters a:hover{

    color:#0d8d55;

}

@media (max-width:980px){

    .af-image-layout{

        flex-direction:column;

    }

    .af-image-card{

        width:100%;

        flex:auto;

    }

    .af-image-info{

        width:100%;

        min-width:unset;

    }

    .af-image-title{

        font-size:28px;

    }

}


.af-image-card{

    background:#fff;

    padding:18px;

    border-radius:22px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.af-info-card{

    margin-top:25px;

}