/*==================================
    ARTICLE PAGE
    SECTION 01
==================================*/

.articlehero{

    position:relative;

    padding:80px 0 45px;

}



.articlehero .container,
.articlecover .container{

    max-width:1320px;

    margin:0 auto;

    padding-inline:32px;

}





/*==================================
        BREADCRUMB
==================================*/

.article-breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:50px;

}



.article-breadcrumb a{

    color:rgba(255,255,255,.60);

    text-decoration:none;

    font-family:'IranYekan';

    font-size:.9rem;

    transition:.35s ease;

}



.article-breadcrumb a:hover{

    color:#ffb326;

}



.article-breadcrumb span{

    color:#ffffff;

    font-family:'IranYekan';

    font-size:.9rem;

    font-weight:700;

}



.article-breadcrumb i{

    color:#ffb326;

    font-size:.72rem;

}





/*==================================
        HERO
==================================*/

.articlehero-head{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}



.articlehero-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:24px;

    border-radius:999px;

    background:rgba(255,179,38,.08);

    border:1px solid rgba(255,179,38,.18);

    color:#ffb326;

    font-family:'IranYekan';

    font-size:.8rem;

    font-weight:700;

}



.articlehero-title{

    margin:0;

    color:#ffffff;

    font-family:'IranYekan';

    font-size:3.2rem;

    font-weight:900;

    line-height:1.45;

}



.articlehero-desc{

    max-width:720px;

    margin:28px auto 0;

    color:rgba(255,255,255,.72);

    font-family:'IranYekan';

    font-size:1.05rem;

    line-height:2.2;

}





/*==================================
        META
==================================*/

.articlehero-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:28px;

    margin-top:36px;

}



.articlehero-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.70);

    font-family:'IranYekan';

    font-size:.9rem;

}



.articlehero-item i{

    color:#ffb326;

    font-size:.95rem;

}
/* ===================================
   BLOG DETAIL ARTICLE
=================================== */


.article-section{

    width:100%;

    padding:100px 0;

    position:relative;

}



.article-section .container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 40px;

}



/* Article Content */

.article-content{

    width:100%;

    max-width:850px;

    margin:0 auto;

    position:relative;

    z-index:2;

    opacity:1;

    visibility:visible;

    transform:none;

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

}



/* Paragraph */

.article-content p{

    color:#ddd5ca;

    font-size:17px;

    line-height:2.2;

    font-weight:400;

    margin-bottom:30px;

    text-align:right;

}



/* Titles */

.article-content h2{

    color:#ffffff;

    font-size:32px;

    line-height:1.7;

    font-weight:700;

    text-align:center;

    margin-top:80px;

    margin-bottom:35px;

}



/* Title Accent */

.article-content h2::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#ff8a4a;

    margin:18px auto 0;

    border-radius:20px;

}





/* ===================================
   ARTICLE MEDIA
=================================== */


.article-media{

    width:100%;

    max-width:650px;

    margin:60px auto;

}



.article-media img{

    width:100%;

    height:auto;

    max-height:420px;

    object-fit:cover;

    display:block;

    border-radius:18px;

    border:1px solid rgba(255,138,74,.2);

}



.article-media figcaption{

    margin-top:15px;

    text-align:center;

    color:#9d9488;

    font-size:14px;

    line-height:1.8;

}





/* ===================================
   FALCON NOTE BOX
=================================== */


.article-note{
    text-align: center;

    width:100%;

    margin:70px 0;

    padding:35px 40px;

    background:rgba(255,138,74,.06);

    border:1px solid rgba(255,138,74,.2);

    border-radius:20px;

}



.article-note h3{

    color:#ffffff;

    font-size:22px;

    margin-bottom:15px;

}



.article-note p{

    margin:0;

    color:#d8d0c5;

}





/* ===================================
   RESPONSIVE
=================================== */


@media(max-width:1024px){


    .article-section .container{

        padding:0 30px;

    }


    .article-content h2{

        font-size:28px;

    }


    .article-media{

        max-width:600px;

    }


}





@media(max-width:768px){


    .article-section{

        padding:70px 0;

    }



    .article-section .container{

        padding:0 20px;

    }



    .article-content h2{

        font-size:24px;

        margin-top:55px;

        margin-bottom:25px;

    }



    .article-content p{

        font-size:15px;

        line-height:2;

    }



    .article-media{

        width:100%;

        max-width:100%;

        margin:40px auto;

    }



    .article-media img{

        max-height:none;

        border-radius:14px;

    }



    .article-note{

        padding:25px 20px;

        margin:45px 0;

    }



    .article-note h3{

        font-size:19px;

    }


}
/* ===================================
   RELATED ARTICLES - BASE
=================================== */


.related-articles{

    font-family: 'IranYekan';

    width:100%;

    padding:100px 0;

    position:relative;

}



/* Container */

.related-articles .container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 40px;

}



/* Header */

.related-header{

    width:100%;

    text-align:center;

    margin-bottom:60px;

}



/* Small Label */

.related-header span{

    display:inline-block;

    color:#ff8a4a;

    font-size:14px;

    font-weight:500;

    letter-spacing:.5px;

    margin-bottom:15px;

    position:relative;

}



/* Title */

.related-header h2{

    color:#ffffff;

    font-size:34px;

    line-height:1.6;

    font-weight:700;

    margin:0 0 20px;

}



/* Accent Line */

.related-header h2::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#ff8a4a;

    margin:18px auto 0;

    border-radius:20px;

}



/* Description */

.related-header p{

    max-width:600px;

    margin:20px auto 0;

    color:#cfc6ba;

    font-size:16px;

    line-height:2;

}
/* ===================================
   RELATED ARTICLES - GRID & CARDS
=================================== */


/* Grid */

.related-grid{

    width:100%;

    display:grid;

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

    gap:30px;

}



/* Card */

.related-card{

    width:100%;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,138,74,.12);

    border-radius:22px;

    overflow:hidden;

    position:relative;

    transition:.45s ease;

}



/* Card Hover */

.related-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,138,74,.35);

}





/* Image Wrapper */

.related-image{

    width:100%;

    height:240px;

    overflow:hidden;

}



/* Image */

.related-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s ease;

}



/* Image Hover */

.related-card:hover .related-image img{

    transform:scale(1.08);

}





/* Content */

.related-content{

    padding:30px;

}



/* Category */

.related-content span{

    display:inline-block;

    color:#ff8a4a;

    font-size:13px;

    margin-bottom:15px;

}





/* Title */

.related-content h3{

    color:#ffffff;

    font-size:21px;

    line-height:1.8;

    margin:0 0 15px;

    font-weight:700;

}





/* Description */

.related-content p{

    color:#cfc6ba;

    font-size:15px;

    line-height:2;

    margin-bottom:25px;

}
/* ===================================
   RELATED ARTICLES - CARD DETAILS
=================================== */


/* Read More Link */

.related-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#ff8a4a;

    font-size:15px;

    font-weight:500;

    text-decoration:none;

    position:relative;

    transition:.35s ease;

}



/* Arrow */

.related-content a::after{

    content:"→";

    font-size:18px;

    transition:.35s ease;

}



/* Link Hover */

.related-content a:hover{

    color:#ffb028;

}



.related-content a:hover::after{

    transform:translateX(-6px);

}





/* Bottom Accent */

.related-card::after{

    content:"";

    position:absolute;

    bottom:0;

    right:0;

    width:0;

    height:3px;

    background:#ff8a4a;

    transition:.45s ease;

}



/* Activate Accent */

.related-card:hover::after{

    width:100%;

}





/* Card Light Effect */

.related-card::before{

    content:"";

    position:absolute;

    top:-80px;

    left:-80px;

    width:160px;

    height:160px;

    background:rgba(255,138,74,.08);

    filter:blur(70px);

    opacity:0;

    transition:.45s ease;

}



/* Show Light */

.related-card:hover::before{

    opacity:1;

}
/* ===================================
   RELATED ARTICLES - RESPONSIVE
=================================== */


/* Tablet */

@media(max-width:1024px){


    .related-articles{

        padding:80px 0;

    }



    .related-articles .container{

        padding:0 30px;

    }



    .related-grid{

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

        gap:25px;

    }



    .related-header h2{

        font-size:30px;

    }



    .related-image{

        height:220px;

    }


}







/* Mobile */

@media(max-width:768px){


    .related-articles{

        padding:70px 0;

    }



    .related-articles .container{

        padding:0 20px;

    }



    .related-header{

        margin-bottom:40px;

    }



    .related-header h2{

        font-size:24px;

    }



    .related-header p{

        font-size:14px;

        line-height:2;

    }



    .related-grid{

        grid-template-columns:1fr;

        gap:25px;

    }



    .related-card{

        border-radius:18px;

    }



    .related-image{

        height:200px;

    }



    .related-content{

        padding:25px 20px;

    }



    .related-content h3{

        font-size:19px;

        line-height:1.7;

    }



    .related-content p{

        font-size:14px;

    }



    .related-content a{

        font-size:14px;

    }


}

/* ===================================
   ARTICLE HERO
   TITLE + BREADCRUMB
=================================== */


/* Breadcrumb */

.article-breadcrumb{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    white-space:nowrap;

    overflow:hidden;

    margin-bottom:35px;

    direction:rtl;

}



.article-breadcrumb a{

    color:#bdb4a8;

    text-decoration:none;

    font-size:14px;

    flex-shrink:0;

    transition:.3s ease;

}



.article-breadcrumb a:hover{

    color:#ff8a4a;

}



.article-breadcrumb i{

    color:#ff8a4a;

    font-size:12px;

    flex-shrink:0;

}



.article-breadcrumb span{

    color:#ffffff;

    font-size:14px;

    max-width:450px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}





/* Category Badge */

.articlehero-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:auto;

    color:#ff8a4a;

    font-size:14px;

    font-weight:500;

    padding:8px 18px;

    background:rgba(255,138,74,.08);

    border:1px solid rgba(255,138,74,.2);

    border-radius:50px;

    margin-bottom:20px;

}





/* Main Title */

.articlehero-title{

    width:100%;

    max-width:900px;

    margin:0 auto 25px;

    text-align:center;

    color:#ffffff;

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

    font-size:42px;

    line-height:1.6;

    font-weight:700;

}





/* Description */

.articlehero-desc{

    width:100%;

    max-width:750px;

    margin:0 auto;

    text-align:center;

    color:#cfc6ba;

    font-size:17px;

    line-height:2;

}





/* ===================================
   TABLET
=================================== */


@media(max-width:1024px){


    .articlehero-title{

        font-size:34px;

        max-width:750px;

    }



    .articlehero-desc{

        font-size:16px;

    }


}





/* ===================================
   MOBILE
=================================== */


@media(max-width:768px){


    .article-breadcrumb{

        gap:8px;

        margin-bottom:25px;

        justify-content:center;

    }



    .article-breadcrumb a,

    .article-breadcrumb i,

    .article-breadcrumb span{

        font-size:12px;

    }



    .article-breadcrumb span{

        max-width:140px;

    }



    .articlehero-category{

        font-size:13px;

        margin-bottom:15px;

    }



    .articlehero-title{

        font-size:24px;

        line-height:1.7;

        max-width:100%;

        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;

    }



    .articlehero-desc{

        font-size:14px;

        line-height:2;

        display:-webkit-box;

        -webkit-line-clamp:3;

        -webkit-box-orient:vertical;

        overflow:hidden;

    }


}