/*==================================
 Editor Profile Page
 Mobarak-Shahr News
==================================*/


/*==============================
 Main Page
==============================*/


.editor-page{

    background:#f8f9fa;

    padding:60px 0;

}


/*==============================
 Profile Header
==============================*/


.editor-profile{

    background:#fff;

    border-radius:18px;

    padding:45px 35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

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

    border-top:4px solid var(--primary-color);

}



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


.editor-image img{

    width:200px;

    height:200px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #d4af37;

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

}



/*==============================
 Profile Information
==============================*/


.editor-info{

    width:100%;

}



.editor-badge{

    display:inline-block;

    margin-top:25px;

    padding:8px 25px;

    border-radius:30px;

    background:#f8f0d8;

    color:#8a6a00;

    font-size:15px;

    font-weight:700;

}



.editor-info h1{

    margin:20px 0 10px;

    font-size:40px;

    font-weight:800;

    color:var(--primary-color);

}



.editor-info h2{

    margin:0 0 20px;

    font-size:24px;

    font-weight:700;

    color:var(--heading-color);

}



.editor-intro{

    max-width:750px;

    margin:25px auto 0;

    font-size:18px;

    line-height:2.3;

    color:#555;

    text-align:center;

}



/*==============================
 Skills
==============================*/


.editor-skills{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:30px 0;

}



.editor-skill{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    background:#fafafa;

    border:1px solid #e5e7eb;

    border-radius:30px;

    transition:.3s;

}



.editor-skill i{

    color:var(--primary-color);

    font-size:18px;

}



.editor-skill span{

    font-size:15px;

    font-weight:600;

}



.editor-skill:hover{

    background:var(--primary-color);

    color:#fff;

}



.editor-skill:hover i{

    color:#fff;

}



/*==============================
 Contact
==============================*/


.editor-contact-line{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:20px;

    font-size:17px;

}



.editor-contact-line i{

    color:var(--primary-color);

}



.editor-contact-line a{

    color:#555;

    text-decoration:none;

}



.editor-contact-line a:hover{

    color:var(--primary-color);

}

/*==============================
 Content Sections
==============================*/


.editor-content{

    background:#fff;

    margin-top:40px;

    padding:40px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}



/*==============================
 Section Titles
==============================*/


.editor-content > h2,
.media-info > h2,
.editor-notes > h2{

    text-align:center;

    font-size:30px;

    font-weight:800;

    color:var(--heading-color);

    margin:20px 0 35px;

    position:relative;

}



.editor-content > h2::after,
.media-info > h2::after,
.editor-notes > h2::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:var(--primary-color);

    margin:15px auto 0;

    border-radius:5px;

}



/*==============================
 Text Content
==============================*/


.editor-content p{

    font-size:18px;

    line-height:2.3;

    color:#333;

    text-align:justify;

}



.editor-content ul{

    margin:25px 0;

    padding-right:25px;

}



.editor-content li{

    margin-bottom:15px;

    font-size:17px;

    line-height:2;

}



/*==============================
 Values Cards
==============================*/


.editor-values{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:35px;

}



.editor-value-card{

    background:#fff;

    border-radius:18px;

    padding:30px 25px;

    text-align:center;

    border:1px solid #eee;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transition:.3s;

}



.editor-value-card:hover{

    transform:translateY(-8px);

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

}



.editor-value-card i{

    display:block;

    font-size:38px;

    color:var(--primary-color);

    margin-bottom:20px;

}



.editor-value-card h3{

    font-size:20px;

    margin-bottom:15px;

    color:var(--heading-color);

}



.editor-value-card p{

    font-size:15px;

    color:#666;

    line-height:2;

    text-align:center;

}



/*==============================
 History Section
==============================*/


.editor-history{

    margin-top:40px;

}



.history-item{

    background:#fff;

    padding:25px 30px;

    margin-bottom:20px;

    border-radius:14px;

    border-right:4px solid var(--primary-color);

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

}



.history-item span{

    display:block;

    color:var(--primary-color);

    font-size:21px;

    font-weight:800;

    margin-bottom:10px;

}



.history-item p{

    margin:0;

}



/*==============================
 Editor Message
==============================*/


.editor-message{

    text-align:center;

}



.editor-message p{

    max-width:850px;

    margin:auto;

    text-align:center;

    font-size:19px;

}

/*==============================
 Media Information
==============================*/


.media-info{

    background:#fff;

    margin-top:40px;

    padding:40px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}



.media-info-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.media-info-item{

    background:#fafafa;

    padding:25px 20px;

    border-radius:14px;

    border:1px solid #eee;

    text-align:center;

}



.media-info-item i{

    display:block;

    font-size:34px;

    color:var(--primary-color);

    margin-bottom:15px;

}



.media-info-item h3{

    font-size:17px;

    font-weight:700;

    color:#111827;

    margin-bottom:10px;

}



.media-info-item p{

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:#555;

    text-align:center;

}



/*==============================
 Editor Notes
==============================*/


.editor-notes{

    background:#fff;

    margin-top:40px;

    padding:40px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}



.editor-notes-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.editor-note-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transition:.3s;

}



.editor-note-card:hover{

    transform:translateY(-8px);

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

}



.editor-note-image{

    width:100%;

    height:220px;

    overflow:hidden;

}



.editor-note-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}



.editor-note-card:hover img{

    transform:scale(1.05);

}



.editor-note-card h3{

    font-size:19px;

    line-height:1.8;

    padding:20px 20px 10px;

    margin:0;

}



.editor-note-card h3 a{

    color:var(--heading-color);

    text-decoration:none;

}



.editor-note-card h3 a:hover{

    color:var(--primary-color);

}



.editor-note-card p{

    padding:0 20px 25px;

    margin:0;

    color:#666;

    font-size:15px;

    line-height:2;

}



/*==============================
 More Button
==============================*/


.editor-notes-more{

    text-align:center;

    margin-top:35px;

}



.editor-notes-more a{

    display:inline-block;

    padding:12px 30px;

    background:#b30000;

    color:#fff;

    border-radius:30px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

}



.editor-notes-more a:hover{

    opacity:.85;

}



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


@media(max-width:992px){


.media-info-grid{

    grid-template-columns:repeat(2,1fr);

}



.editor-values{

    grid-template-columns:1fr 1fr;

}



.editor-notes-grid{

    grid-template-columns:1fr 1fr;

}


}



@media(max-width:768px){


.editor-page{

    padding:30px 0;

}



.editor-profile{

    padding:30px 20px;

}



.editor-image img{

    width:150px;

    height:150px;

}



.editor-info h1{

    font-size:30px;

}



.editor-info h2{

    font-size:20px;

}



.editor-content,
.media-info,
.editor-notes{

    padding:25px;

}



.editor-content > h2,
.media-info > h2,
.editor-notes > h2{

    font-size:24px;

}



.editor-values,
.media-info-grid,
.editor-notes-grid{

    grid-template-columns:1fr;

}



.editor-contact-line{

    flex-wrap:wrap;

}



.editor-note-image{

    height:220px;

}


}

/*==============================
 Media Details Center Fix
==============================*/

.media-profile{

    width:100%;

}


.media-details{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


.media-detail-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.media-detail-item > div{

    width:100%;

    text-align:center;

}



.media-detail-item h4{

    text-align:center;

    font-size:18px;

    margin-bottom:10px;

}



.media-detail-item p{

    text-align:center !important;

    margin:0;

    width:100%;

}