/*=========================================
BLOG DETAILS HERO
=========================================*/

.blog-details-hero{

    position:relative;

    padding:150px 0 90px;

    background:linear-gradient(135deg,#07111f,#111827,#1f2937);

    overflow:hidden;

}

.blog-details-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    right:-180px;

    top:-180px;

    filter:blur(80px);

}

.blog-details-hero .container{

    position:relative;

    z-index:2;

}

/* Breadcrumb */

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

    list-style:none;

    margin-bottom:35px;

}

.breadcrumb li{

    color:#d1d5db;

    font-size:15px;

}

.breadcrumb a{

    color:#ffffff;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#d4af37;

}

.breadcrumb .active{

    color:#d4af37;

}

/* Category */

.article-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:rgba(212,175,55,.15);

    color:#d4af37;

    border:1px solid rgba(212,175,55,.4);

    padding:12px 24px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:30px;

}

/* Heading */

.blog-details-hero h1{

    color:#ffffff;

    font-size:56px;

    line-height:1.2;

    max-width:900px;

    margin-bottom:30px;

}

.blog-details-hero p{

    color:#d1d5db;

    max-width:760px;

    line-height:32px;

    font-size:18px;

    margin-bottom:45px;

}

/* Meta */

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    align-items:center;

    margin-bottom:35px;

}

.meta-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

}

.meta-item img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #d4af37;

}

.meta-item strong{

    display:block;

    font-size:16px;

}

.meta-item span{

    color:#cbd5e1;

    font-size:14px;

}

.meta-item i{

    color:#d4af37;

    font-size:18px;

}

/* Share */

.article-share{

    display:flex;

    align-items:center;

    gap:15px;

}

.article-share span{

    color:#ffffff;

    font-weight:600;

}

.article-share a{

    width:45px;

    height:45px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    text-decoration:none;

    transition:.35s;

}

.article-share a:hover{

    background:#d4af37;

    color:#111827;

}

/* Responsive */

@media(max-width:992px){

.blog-details-hero{

padding:120px 0 70px;

}

.blog-details-hero h1{

font-size:42px;

}

}

@media(max-width:768px){

.blog-details-hero{

padding:100px 0 60px;

}

.blog-details-hero h1{

font-size:32px;

line-height:1.35;

}

.blog-details-hero p{

font-size:16px;

line-height:28px;

}

.article-meta{

gap:20px;

}

.article-share{

flex-wrap:wrap;

}

}

/*=========================================
ARTICLE CONTENT
=========================================*/

.article-section{

    padding:100px 0;

    background:#f8fafc;

}

.article-layout{

    display:grid;

    grid-template-columns:2fr 380px;

    gap:50px;

    align-items:start;

}

/*=====================
Article
======================*/

.article-content{

    background:#ffffff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.article-image{

    margin-bottom:40px;

}

.article-image img{

    width:100%;

    border-radius:18px;

    display:block;

}

/*=====================
Table of Contents
======================*/

.table-of-content{

    background:#f8fafc;

    border-left:5px solid #d4af37;

    padding:30px;

    border-radius:15px;

    margin-bottom:45px;

}

.table-of-content h3{

    margin-bottom:20px;

    color:#111827;

    display:flex;

    align-items:center;

    gap:10px;

}

.table-of-content ul{

    padding-left:18px;

}

.table-of-content li{

    margin-bottom:12px;

}

.table-of-content a{

    color:#374151;

    text-decoration:none;

    transition:.3s;

}

.table-of-content a:hover{

    color:#d4af37;

}

/*=====================
Typography
======================*/

.article-content h2{

    font-size:34px;

    color:#111827;

    margin:50px 0 20px;

    line-height:1.3;

}

.article-content h3{

    font-size:28px;

    color:#111827;

    margin:35px 0 15px;

}

.article-content p{

    color:#4b5563;

    font-size:17px;

    line-height:34px;

    margin-bottom:28px;

}

.first-paragraph:first-letter{

    float:left;

    font-size:70px;

    line-height:60px;

    font-weight:700;

    color:#d4af37;

    margin-right:12px;

}

/*=====================
Lists
======================*/

.article-list{

    margin:25px 0;

    padding-left:25px;

}

.article-list li{

    margin-bottom:15px;

    color:#374151;

    line-height:30px;

}

/*=====================
Info Box
======================*/

.info-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:#fff9eb;

    border-left:5px solid #d4af37;

    padding:30px;

    border-radius:16px;

    margin:40px 0;

}

.info-box i{

    font-size:30px;

    color:#d4af37;

}

.info-box strong{

    display:block;

    font-size:20px;

    margin-bottom:10px;

    color:#111827;

}

.info-box p{

    margin:0;

}

/*=====================
Quote
======================*/

blockquote{

    margin:45px 0;

    padding:35px;

    border-left:5px solid #d4af37;

    background:#111827;

    color:#ffffff;

    border-radius:16px;

    font-size:24px;

    line-height:42px;

    font-style:italic;

}

/*=====================
Table
======================*/

.article-table{

    width:100%;

    border-collapse:collapse;

    margin:35px 0;

}

.article-table th{

    background:#111827;

    color:#d4af37;

    padding:18px;

    text-align:left;

}

.article-table td{

    padding:18px;

    border-bottom:1px solid #e5e7eb;

}

.article-table tr:nth-child(even){

    background:#f9fafb;

}

/*=====================
Tags
======================*/

.article-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

    margin-top:50px;

}

.article-tags span{

    font-weight:700;

    color:#111827;

}

.article-tags a{

    text-decoration:none;

    padding:10px 18px;

    border-radius:30px;

    background:#f3f4f6;

    color:#374151;

    transition:.3s;

}

.article-tags a:hover{

    background:#d4af37;

    color:#111827;

}

/*=====================
Author
======================*/

.author-box{

    display:flex;

    gap:25px;

    align-items:center;

    margin-top:60px;

    padding:35px;

    border-radius:18px;

    background:#111827;

}

.author-box img{

    width:110px;

    height:110px;

    border-radius:50%;

    border:4px solid #d4af37;

    object-fit:cover;

}

.author-box h3{

    color:#ffffff;

    margin-bottom:12px;

}

.author-box p{

    color:#d1d5db;

    margin:0;

}

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

@media(max-width:1200px){

.article-layout{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.article-section{

padding:70px 0;

}

.article-content{

padding:25px;

}

.article-content h2{

font-size:28px;

}

.article-content h3{

font-size:24px;

}

.article-content p{

font-size:16px;

line-height:30px;

}

blockquote{

font-size:20px;

line-height:34px;

padding:25px;

}

.info-box{

flex-direction:column;

}

.author-box{

flex-direction:column;

text-align:center;

}

.article-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/*=========================================
ARTICLE SIDEBAR
=========================================*/

.article-sidebar{

    position:sticky;

    top:120px;

}

.sidebar-widget{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    margin-bottom:30px;

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

}

.sidebar-widget h3{

    color:#111827;

    font-size:22px;

    margin-bottom:20px;

}

/* Search */

.sidebar-search{

    display:flex;

}

.sidebar-search input{

    flex:1;

    height:52px;

    border:1px solid #ddd;

    border-right:none;

    border-radius:10px 0 0 10px;

    padding:0 15px;

    outline:none;

}

.sidebar-search button{

    width:60px;

    border:none;

    background:#d4af37;

    color:#111827;

    border-radius:0 10px 10px 0;

    cursor:pointer;

}

/* Categories */

.sidebar-category{

    list-style:none;

    padding:0;

}

.sidebar-category li{

    margin-bottom:12px;

}

.sidebar-category a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    color:#374151;

    padding:12px 15px;

    border-radius:10px;

    transition:.3s;

}

.sidebar-category a:hover{

    background:#111827;

    color:#d4af37;

}

/* Popular Posts */

.sidebar-post{

    display:flex;

    gap:15px;

    margin-bottom:20px;

}

.sidebar-post:last-child{

    margin-bottom:0;

}

.sidebar-post img{

    width:90px;

    height:80px;

    border-radius:10px;

    object-fit:cover;

}

.sidebar-post h4{

    font-size:16px;

    color:#111827;

    line-height:1.5;

    margin-bottom:8px;

}

.sidebar-post span{

    color:#6b7280;

    font-size:13px;

}

.sidebar-post i{

    color:#d4af37;

}

/* PDF & Mock */

.pdf-widget,
.mock-widget{

    text-align:center;

}

.pdf-widget i,
.mock-widget i{

    font-size:50px;

    color:#d4af37;

    margin-bottom:18px;

}

.pdf-widget p,
.mock-widget p{

    line-height:28px;

    color:#6b7280;

}

.pdf-widget a,
.mock-widget a{

    display:inline-block;

    margin-top:18px;

    background:#d4af37;

    color:#111827;

    padding:12px 25px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;

}

/* Admission */

.admission-widget{

    padding:0;

    overflow:hidden;

    position:relative;

}

.admission-widget img{

    width:100%;

    display:block;

}

.admission-widget .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:25px;

    text-align:center;

}

.admission-widget h3{

    color:#ffffff;

    margin-bottom:12px;

}

.admission-widget p{

    color:#d1d5db;

    margin-bottom:20px;

}

.admission-widget a{

    background:#d4af37;

    color:#111827;

    text-decoration:none;

    padding:12px 24px;

    border-radius:8px;

    font-weight:700;

}

/* Responsive */

@media(max-width:1200px){

.article-sidebar{

position:static;

margin-top:40px;

}

}

/*=========================================
RELATED POSTS
=========================================*/

.related-posts{

    padding:100px 0;

    background:#f8fafc;

}

.related-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.related-card{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.related-image{

    position:relative;

    overflow:hidden;

}

.related-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.related-card:hover img{

    transform:scale(1.08);

}

.category-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#d4af37;

    color:#111827;

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

}

.related-content{

    padding:28px;

}

.related-content h3{

    font-size:24px;

    color:#111827;

    line-height:1.4;

    margin:18px 0;

}

.related-content p{

    color:#6b7280;

    line-height:30px;

    margin-bottom:24px;

}

.related-content a{

    color:#d4af37;

    text-decoration:none;

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.related-content a:hover{

    gap:16px;

}

.post-meta{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    color:#6b7280;

    font-size:14px;

}

.post-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.post-meta i{

    color:#d4af37;

}

/* Responsive */

@media(max-width:992px){

.related-grid{

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

}

}

@media(max-width:768px){

.related-posts{

padding:70px 0;

}

.related-grid{

grid-template-columns:1fr;

}

.related-image img{

height:220px;

}

.related-content{

padding:22px;

}

.related-content h3{

font-size:22px;

}

}

/*=========================================
COMMENTS
=========================================*/

.comments-section{

    padding:100px 0;

    background:#ffffff;

}

.comments-list{

    margin-top:60px;

}

.comment-item{

    display:flex;

    gap:25px;

    background:#f8fafc;

    border-radius:18px;

    padding:30px;

    margin-bottom:30px;

    transition:.35s;

}

.comment-item:hover{

    transform:translateY(-5px);

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

}

.comment-avatar img{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #d4af37;

}

.comment-content{

    flex:1;

}

.comment-header{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:15px;

}

.comment-header h4{

    color:#111827;

    font-size:20px;

}

.comment-header span{

    color:#6b7280;

    font-size:14px;

}

.comment-header i{

    color:#d4af37;

}

.comment-content p{

    color:#4b5563;

    line-height:30px;

    margin-bottom:20px;

}

.reply-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#d4af37;

    font-weight:700;

    transition:.3s;

}

.reply-btn:hover{

    gap:14px;

}

/*====================
Form
====================*/

.comment-form{

    margin-top:70px;

    background:#f8fafc;

    border-radius:20px;

    padding:40px;

}

.comment-form h3{

    margin-bottom:30px;

    color:#111827;

}

.form-row{

    display:grid;

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

    gap:20px;

    margin-bottom:20px;

}

.comment-form input,
.comment-form textarea{

    width:100%;

    border:1px solid #d1d5db;

    border-radius:12px;

    padding:16px 18px;

    font-size:16px;

    outline:none;

    margin-bottom:20px;

    transition:.3s;

}

.comment-form input:focus,
.comment-form textarea:focus{

    border-color:#d4af37;

}

.comment-form textarea{

    resize:vertical;

}

.comment-form button{

    border:none;

    background:#d4af37;

    color:#111827;

    padding:16px 32px;

    border-radius:10px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.comment-form button:hover{

    background:#f3c948;

    transform:translateY(-3px);

}

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

@media(max-width:768px){

.comments-section{

padding:70px 0;

}

.comment-item{

flex-direction:column;

text-align:center;

}

.comment-avatar{

margin:auto;

}

.comment-header{

justify-content:center;

}

.form-row{

grid-template-columns:1fr;

}

.comment-form{

padding:25px;

}

.comment-form button{

width:100%;

}

}

/*=========================================
ARTICLE CTA
=========================================*/

.article-cta{

    padding:120px 0;

    background:linear-gradient(135deg,#07111f,#111827,#1f2937);

    overflow:hidden;

}

.article-cta-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.article-cta-content h2{

    color:#ffffff;

    font-size:52px;

    line-height:1.2;

    margin:25px 0;

}

.article-cta-content p{

    color:#d1d5db;

    font-size:18px;

    line-height:32px;

    margin-bottom:35px;

}

.article-cta-content strong{

    color:#d4af37;

}

.cta-features{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-size:17px;

}

.feature i{

    color:#d4af37;

}

.cta-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:18px 32px;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

}

.primary-btn{

    background:#d4af37;

    color:#111827;

}

.primary-btn:hover{

    background:#f2c94c;

    transform:translateY(-5px);

}

.secondary-btn{

    border:2px solid rgba(255,255,255,.25);

    color:#ffffff;

}

.secondary-btn:hover{

    background:#ffffff;

    color:#111827;

}

.article-cta-image{

    text-align:center;

}

.article-cta-image img{

    width:100%;

    max-width:520px;

    animation:floatCTA 5s ease-in-out infinite;

}

@keyframes floatCTA{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.article-cta{

padding:90px 0;

}

.article-cta-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.cta-features{

grid-template-columns:1fr;

}

.cta-buttons{

justify-content:center;

}

.article-cta-image{

margin-top:40px;

}

}

@media(max-width:768px){

.article-cta-content h2{

font-size:36px;

}

.article-cta-content p{

font-size:16px;

line-height:28px;

}

.cta-buttons{

flex-direction:column;

}

.cta-btn{

width:100%;

justify-content:center;

}

}