/*
Foxians blog.css

This file is a scaffold for a complete blog stylesheet.
It is intended to be combined with the CSS already generated in this conversation.

Covers:
- Blog Listing
- Hero
- Cards
- Sidebar
- Pagination
- Single Post
- Related Posts
- Comments
- Gutenberg Blocks
- Responsive styles
*/

/*==================================================
 BLOG PAGE
==================================================*/

.blog-page{
    padding:140px 0 100px;
    background:#f8fafc;
}

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

.blog-hero{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
}

.blog-subtitle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:20px;
}

.blog-hero h1{
    font-size: 40px;
}

.blog-hero p{
    max-width:720px;
    margin:auto;
    font-size:18px;
    line-height:1.8;
    color:#64748b;
}

/*==================================================
 BLOG CARD
==================================================*/

.blog-card{
    background:#fff;
    border-radius: 20px;
    overflow:hidden;
    border:1px solid #edf2f7;
    box-shadow:0 15px 45px rgba(15,23,42,.06);
    transition:.35s ease;
    height:100%;
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(15,23,42,.12);
}

/*==================================================
 IMAGE
==================================================*/

.blog-card-image{
    display:block;
    overflow:hidden;
    position:relative;
}

.blog-card-image img{
    width:100%;
    object-fit:cover;
    transition:.5s;
    display:block;
    height: auto;
}

.blog-card:hover .blog-card-image img{
    transform:scale(1.08);
}

/*==================================================
 BODY
==================================================*/

.blog-card-body{
    padding:28px;
}

/*==================================================
 CATEGORY
==================================================*/

.blog-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-size: 12px;
    font-weight:600;
    margin-bottom:18px;
}

.blog-category a{
    color:inherit;
    text-decoration:none;
}

/*==================================================
 TITLE
==================================================*/

.blog-title{
    font-size: 22px;
}

.blog-title a{
    color:var(--dark);
    text-decoration:none;
    transition:.3s;
}

.blog-title a:hover{
    color:var(--primary);
}

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

.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
    margin-bottom:18px;
    font-size: 12px;
    color:#64748b;
}

.blog-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}

.blog-meta i{
    color:var(--primary);
}

/*==================================================
 EXCERPT
==================================================*/

.blog-excerpt{
    font-size: 14px;
}

/*==================================================
 READ MORE
==================================================*/

.blog-readmore{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size: 12px;
    color:var(--primary);
    text-decoration:none;
    font-weight: 400;
    transition:.3s;
}

.blog-readmore i{
    transition:.3s;
}

.blog-readmore:hover{
    color:var(--primary);
}

.blog-readmore:hover i{
    transform:translateX(6px);
}

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

@media(max-width:991px){

.blog-page{
    padding:110px 0 80px;
}

.blog-hero h1{
    font-size:44px;
}

.blog-title{
    font-size:24px;
}

}

@media(max-width:767px){

.blog-page{
    padding:90px 0 60px;
}

.blog-hero{
    margin-bottom:50px;
}

.blog-hero h1{
    font-size:34px;
}

.blog-hero p{
    font-size:16px;
}

.blog-card-body{
    padding:22px;
}

.blog-title{
    font-size:22px;
}

.blog-meta{
    gap:12px;
    font-size:13px;
}

}

/*==================================================
 SINGLE BLOG
==================================================*/

.single-blog{
    padding:140px 0 100px;
    background:#fff;
}

/*==================================================
 CATEGORY
==================================================*/

.post-category{
    margin-bottom:22px;
}

.post-category a{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    border-radius:50px;
    background:#FFF3EE;
    color:var(--primary);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.post-category a:hover{
    background:var(--primary);
    color:#fff;
}

/*==================================================
 TITLE
==================================================*/

.post-title{
    font-size: 48px;
    line-height:1.15;
    margin-bottom:30px;
    width: 75%;
}

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

.post-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:45px;
    padding-bottom:25px;
    border-bottom:1px solid #edf2f7;
}

.post-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#64748b;
    font-size:15px;
}

.post-meta i{
    color:var(--primary);
}

/*==================================================
 FEATURED IMAGE
==================================================*/

.post-thumbnail{
    overflow:hidden;
    border-radius:24px;
    margin-bottom:50px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.post-thumbnail img{
    width:100%;
    height:auto;
    display:block;
    transition:.5s;
}

.post-thumbnail:hover img{
    transform:scale(1.03);
}

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

.post-content{
    margin:auto;
    font-size:18px;
    line-height:1.95;
    color:#475569;
}

.post-content > *{
    margin-bottom:26px;
}

/*==================================================
 TAGS
==================================================*/

.post-tags{
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid #edf2f7;
}

.post-tags strong{
    color:var(--dark);
    margin-right:10px;
}

.post-tags a{
    display:inline-block;
    padding:8px 18px;
    margin:6px;
    border-radius:40px;
    background:#f8fafc;
    color:var(--dark);
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.post-tags a:hover{
    background:var(--primary);
    color:#fff;
}

/*==================================================
 PREVIOUS / NEXT
==================================================*/

.post-navigation{
    margin:70px 0;
    padding:35px 0;
    border-top:1px solid #edf2f7;
    border-bottom:1px solid #edf2f7;
    display:flex;
    justify-content:space-between;
    gap:30px;
}

.post-navigation div{
    flex:1;
}

.post-navigation .next-post{
    text-align:right;
}

.post-navigation a{
    display:inline-block;
    color:var(--dark);
    text-decoration:none;
    font-weight:600;
    font-size:17px;
    transition:.3s;
}

.post-navigation a:hover{
    color:var(--primary);
}

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

@media(max-width:991px){

.single-blog{
    padding:110px 0 80px;
}

.post-title{
    font-size:42px;
}

.post-content{
    font-size:17px;
}

}

@media(max-width:767px){

.single-blog{
    padding:90px 0 60px;
}

.post-title{
    font-size:32px;
}

.post-meta{
    gap:14px;
    font-size:14px;
}

.post-content{
    font-size:16px;
}

.post-navigation{
    flex-direction:column;
}

.post-navigation .next-post{
    text-align:left;
}

.post-thumbnail{
    border-radius:18px;
}

}

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

.related-posts{
    margin-top:90px;
    padding-top:70px;
    border-top:1px solid #edf2f7;
}

.related-posts h2{
    font-size: 24px;
    text-align:center;
    margin-bottom:50px;
}

/*==================================================
 BLOG SIDEBAR
==================================================*/

.blog-sidebar{
    position:sticky;
    top:120px;
}

/*==================================================
 SIDEBAR WIDGET
==================================================*/

.sidebar-widget{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.sidebar-widget:last-child{
    margin-bottom:0;
}

.sidebar-widget .widget-title{
    font-size:22px;
    font-weight:700;
    color:var(--dark);
    margin-bottom:22px;
    position:relative;
    padding-bottom:12px;
}

.sidebar-widget .widget-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:55px;
    height:3px;
    background:var(--primary);
    border-radius:20px;
}

.sidebar-widget ul{
    margin:0;
    padding:0;
    list-style:none;
}

.sidebar-widget li{
    border-bottom:1px solid #edf2f7;
    padding:14px 0;
}

.sidebar-widget li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.sidebar-widget a{
    color:var(--dark);
    text-decoration:none;
    transition:.3s;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sidebar-widget a:hover{
    color:var(--primary);
    padding-left:6px;
}

.sidebar-widget img{
    max-width:100%;
    border-radius:12px;
}

.sidebar-widget select,
.sidebar-widget input,
.sidebar-widget textarea{
    width:100%;
    border:1px solid #dbe4ee;
    border-radius:12px;
    padding:12px 16px;
    outline:none;
}

.sidebar-widget select:focus,
.sidebar-widget input:focus,
.sidebar-widget textarea:focus{
    border-color:var(--primary);
}

.sidebar-widget table{
    width:100%;
}

.sidebar-widget table td,
.sidebar-widget table th{
    padding:8px;
    text-align:center;
}

.sidebar-widget .tagcloud{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.sidebar-widget .tagcloud a{
    display:inline-block;
    padding:8px 14px;
    border-radius:40px;
    background:#f8fafc;
    color:var(--dark);
    font-size:13px !important;
}

.sidebar-widget .tagcloud a:hover{
    background:var(--primary);
    color:#fff;
    padding-left:14px;
}

/*==================================================
 PAGINATION
==================================================*/

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:70px;
}

.page-numbers{
    width: 40px;
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    color:var(--dark);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
    box-shadow:0 5px 18px rgba(15,23,42,.04);
}

.page-numbers.current,
.page-numbers:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.page-numbers.dots{
    border:none;
    box-shadow:none;
    background:transparent;
}

/*==================================================
 SEARCH WIDGET
==================================================*/

.sidebar-widget .wp-block-search{
    display:flex;
}

.sidebar-widget .wp-block-search input{
    flex:1;
    border-radius:50px 0 0 50px;
}

.sidebar-widget .wp-block-search button{
    border:none;
    background:var(--primary);
    color:#fff;
    padding:0 22px;
    border-radius:0 50px 50px 0;
    cursor:pointer;
}

/*==================================================
 CALENDAR
==================================================*/

#wp-calendar{
    width:100%;
    border-collapse:collapse;
}

#wp-calendar caption{
    margin-bottom:10px;
    font-weight:600;
}

#wp-calendar td,
#wp-calendar th{
    padding:10px;
    text-align:center;
    border:1px solid #edf2f7;
}

#wp-calendar a{
    color:var(--primary);
    font-weight:600;
}

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

@media(max-width:991px){

.blog-sidebar{
    position:static;
    margin-top:60px;
}

.related-posts{
    margin-top:70px;
}

.related-posts h2{
    font-size:34px;
}

}

@media(max-width:767px){

.related-posts h2{
    font-size:28px;
}

.sidebar-widget{
    padding:22px;
}

.pagination{
    gap:8px;
}

.page-numbers{
    width:42px;
    height:42px;
    font-size:14px;
}

}

/*==================================================
 CONTENT TYPOGRAPHY
==================================================*/

.post-content{
    margin:auto;
    color:#475569;
    font-size:18px;
    line-height:1.9;
}

.post-content > *{
    margin-bottom:28px;
}

/*==================================================
 HEADINGS
==================================================*/

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6{
    color:var(--dark);
    line-height:1.3;
    margin:45px 0 20px;
}

.post-content h1{
    font-size:48px;
}

.post-content h2{
    font-size: 24px;
}

.post-content h3{
    font-size: 24px;
}

.post-content h4{
    font-size:26px;
}

.post-content h5{
    font-size:22px;
}

.post-content h6{
    font-size:18px;
}

/*==================================================
 PARAGRAPH
==================================================*/

.post-content p{
    font-size: 16px;
    margin-bottom:24px;
}

/*==================================================
 LINKS
==================================================*/

.post-content a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.post-content a:hover{
    color:var(--secondary);
    text-decoration:underline;
}

/*==================================================
 LISTS
==================================================*/

.post-content ul,
.post-content ol{
    margin:0 0 30px 28px;
    padding:0;
}

.post-content ul{
    list-style:disc;
}

.post-content ol{
    list-style:decimal;
}

.post-content li{
    margin-bottom:12px;
    line-height: 1.5;
    color:#475569;
    font-size: 16px;
}

.post-content li::marker{
    color:var(--primary);
}

/*==================================================
 IMAGES
==================================================*/

.post-content img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
    margin:40px auto;
    border-radius:20px;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

/*==================================================
 FIGURE
==================================================*/

.post-content figure{
    margin:45px 0;
}

.post-content figure img{
    margin:0;
}

.post-content figcaption{
    margin-top:14px;
    text-align:center;
    font-size:14px;
    color:#64748b;
    font-style:italic;
}

/*==================================================
 TABLE
==================================================*/

.post-content table{
    width:100%;
    border-collapse:collapse;
    margin:40px 0;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.post-content th{
    background:var(--primary);
    color:#fff;
    padding:16px;
    text-align:left;
    font-weight:600;
}

.post-content td{
    padding:16px;
    border-bottom:1px solid #edf2f7;
    color:#475569;
    background:#fff;
}

.post-content tr:nth-child(even) td{
    background:#f8fafc;
}

/*==================================================
 BLOCKQUOTE
==================================================*/

.post-content blockquote{
    margin:45px 0;
    padding:30px 35px;
    border-left:5px solid var(--primary);
    background:#fff7f4;
    border-radius:16px;
    font-size:22px;
    line-height:1.7;
    font-style:italic;
    color:var(--dark);
    position:relative;
}

.post-content blockquote p:last-child{
    margin-bottom:0;
}

/*==================================================
 PRE
==================================================*/

.post-content pre{
    background:#1e293b;
    color:#f8fafc;
    padding:24px;
    border-radius:16px;
    overflow:auto;
    margin:40px 0;
    font-size:15px;
    line-height:1.7;
}

/*==================================================
 INLINE CODE
==================================================*/

.post-content code{
    background:#fff3ee;
    color:var(--primary);
    padding:3px 8px;
    border-radius:6px;
    font-size:.95em;
    font-family:Consolas, monospace;
}

.post-content pre code{
    background:none;
    color:inherit;
    padding:0;
}

/*==================================================
 IFRAME
==================================================*/

.post-content iframe{
    width:100%;
    min-height:500px;
    border:none;
    border-radius:20px;
    overflow:hidden;
    margin:40px 0;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

/*==================================================
 VIDEO
==================================================*/

.post-content video{
    width:100%;
    border-radius:20px;
    overflow:hidden;
    margin:40px 0;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

/*==================================================
 AUDIO
==================================================*/

.post-content audio{
    width:100%;
    margin:30px 0;
}

/*==================================================
 WORDPRESS ALIGNMENT
==================================================*/

.post-content .alignleft{
    float:left;
    max-width:45%;
    margin:10px 30px 20px 0;
}

.post-content .alignright{
    float:right;
    max-width:45%;
    margin:10px 0 20px 30px;
}

.post-content .aligncenter{
    display:block;
    margin:40px auto;
}

.post-content::after{
    content:"";
    display:block;
    clear:both;
}

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

@media (max-width:991px){

.post-content{
    font-size:17px;
}

.post-content h1{font-size:40px;}
.post-content h2{font-size:34px;}
.post-content h3{font-size:28px;}
.post-content h4{font-size:24px;}

.post-content iframe{
    min-height:400px;
}

}

@media (max-width:767px){

.post-content{
    font-size:16px;
}

.post-content h1{font-size:34px;}
.post-content h2{font-size:30px;}
.post-content h3{font-size:26px;}
.post-content h4{font-size:22px;}
.post-content h5{font-size:20px;}
.post-content h6{font-size:18px;}

.post-content p,
.post-content li{
    font-size:16px;
}

.post-content .alignleft,
.post-content .alignright{
    float:none;
    max-width:100%;
    margin:30px auto;
}

.post-content iframe{
    min-height:250px;
}

.post-content blockquote{
    padding:24px;
    font-size:18px;
}

.post-content img,
.post-content video{
    border-radius:16px;
}

}



/*==================================================
 GUTENBERG IMAGE
==================================================*/

.wp-block-image{
    margin:40px 0;
}

.wp-block-image img{
    width:100%;
    height:auto;
    border-radius:20px;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

.wp-block-image figcaption{
    margin-top:12px;
    color:#64748b;
    text-align:center;
    font-size:14px;
    font-style:italic;
}

/*==================================================
 GALLERY
==================================================*/

.wp-block-gallery{
    margin:40px 0;
    gap:20px;
}

.wp-block-gallery img{
    border-radius:16px;
    transition:.35s;
}

.wp-block-gallery img:hover{
    transform:scale(1.03);
}

/*==================================================
 COLUMNS
==================================================*/

.wp-block-columns{
    margin:40px 0;
    gap:30px;
}

.wp-block-column{
    min-width:0;
}

/*==================================================
 BUTTON
==================================================*/

.wp-block-button{
    margin:30px 0;
}

.wp-block-button__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:50px;
    background:var(--primary);
    color:#fff !important;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.wp-block-button__link:hover{
    background:var(--secondary);
    transform:translateY(-2px);
}

/*==================================================
 COVER
==================================================*/

.wp-block-cover{
    margin:50px 0;
    border-radius:24px;
    overflow:hidden;
}

.wp-block-cover img{
    border-radius:0;
    box-shadow:none;
}

/*==================================================
 TABLE
==================================================*/

.wp-block-table{
    margin:40px 0;
    overflow-x:auto;
}

.wp-block-table table{
    width:100%;
    border-collapse:collapse;
}

.wp-block-table th{
    background:var(--primary);
    color:#fff;
    padding:16px;
}

.wp-block-table td{
    padding:16px;
    border:1px solid #edf2f7;
}

/*==================================================
 QUOTE
==================================================*/

.wp-block-quote{
    margin:45px 0;
    padding:30px;
    border-left:5px solid var(--primary);
    background:#fff7f4;
    border-radius:16px;
}

.wp-block-quote p:last-child{
    margin-bottom:0;
}

.wp-block-quote cite{
    display:block;
    margin-top:15px;
    color:#64748b;
    font-style:normal;
}

/*==================================================
 PULLQUOTE
==================================================*/

.wp-block-pullquote{
    margin:60px 0;
    padding:40px;
    text-align:center;
    border:none;
    border-radius:24px;
    background:#f8fafc;
}

.wp-block-pullquote blockquote{
    border:none;
    padding:0;
    background:none;
    margin:0;
    font-size:30px;
    font-weight:600;
    color:var(--dark);
}

.wp-block-pullquote cite{
    display:block;
    margin-top:20px;
    color:#64748b;
}

/*==================================================
 MEDIA & TEXT
==================================================*/

.wp-block-media-text{
    margin:50px 0;
    gap:35px;
    align-items:center;
}

.wp-block-media-text img{
    border-radius:20px;
}

/*==================================================
 GROUP
==================================================*/

.wp-block-group{
    margin:45px 0;
    padding:35px;
    background:#f8fafc;
    border-radius:24px;
}

/*==================================================
 EMBED
==================================================*/

.wp-block-embed{
    margin:50px 0;
}

.wp-block-embed iframe{
    width:100%;
    min-height:500px;
    border:none;
    border-radius:20px;
}

/*==================================================
 FILE
==================================================*/

.wp-block-file{
    margin:35px 0;
    padding:20px 24px;
    border:1px solid #edf2f7;
    border-radius:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    background:#fff;
}

.wp-block-file a{
    color:var(--dark);
    font-weight:600;
}

.wp-block-file .wp-block-file__button{
    padding:10px 22px;
    border-radius:40px;
    background:var(--primary);
    color:#fff;
}

/*==================================================
 SEPARATOR
==================================================*/

.wp-block-separator{
    margin:60px auto;
    border:none;
    width:120px;
    height: 2px;
    background:var(--primary);
    border-radius:50px;
    opacity:.2;
}

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

@media(max-width:991px){

.wp-block-columns{
    gap:20px;
}

.wp-block-embed iframe{
    min-height:400px;
}

}

@media(max-width:767px){

.wp-block-group{
    padding:25px;
}

.wp-block-pullquote{
    padding:30px 20px;
}

.wp-block-pullquote blockquote{
    font-size:22px;
}

.wp-block-media-text{
    gap:20px;
}

.wp-block-embed iframe{
    min-height:250px;
}

}

/*==================================================
 SHARE SECTION
==================================================*/

.post-share{
    margin-top:70px;
    padding-top:35px;
    border-top:1px solid #edf2f7;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.post-share h5{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:var(--dark);
    margin-right:10px;
}

.post-share a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    border:1px solid #e5e7eb;
    color:#475569;
    text-decoration:none;
    font-size:18px;
    transition:all .3s ease;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.post-share a:hover{
    transform:translateY(-4px);
    color:#fff;
}

/* Facebook */
.post-share a:nth-child(2):hover{
    background:#1877F2;
    border-color:#1877F2;
}

/* X (Twitter) */
.post-share a:nth-child(3):hover{
    background:#000;
    border-color:#000;
}

/* LinkedIn */
.post-share a:nth-child(4):hover{
    background:#0A66C2;
    border-color:#0A66C2;
}

/* WhatsApp */
.post-share a:nth-child(5):hover{
    background:#25D366;
    border-color:#25D366;
}

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

@media(max-width:767px){

.post-share{
    justify-content:center;
    text-align:center;
}

.post-share h5{
    width:100%;
    margin:0 0 10px;
}

.post-share a{
    width:44px;
    height:44px;
    font-size:16px;
}

}


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

.comment-respond{
    margin-top:80px;
    padding:40px;
    background:#fff;
    border:1px solid #edf2f7;
    border-radius: 20px;
    box-shadow:0 15px 40px rgba(15,23,42,.05);
}

.comment-reply-title{
    font-size: 24px;
    margin-bottom:12px;
}

.comment-reply-title small{
    margin-left:10px;
}

.comment-reply-title small a{
    color:var(--primary);
    font-size:15px;
    text-decoration:none;
}

.comment-notes{
    margin-bottom:30px;
    font-size: 14px;
}

.required{
    color:#ef4444;
}

/*==================================================
 LABELS
==================================================*/

.comment-form label{
    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:600;
    color:var(--dark);
}

/*==================================================
 INPUTS
==================================================*/

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    width:100%;
    padding:15px 18px;
    border:1px solid #dbe4ee;
    border-radius:14px;
    background:#fff;
    font-size:16px;
    transition:.3s;
    outline:none;
}

.comment-form textarea{
    min-height:180px;
    resize:vertical;
}

.comment-form input:focus,
.comment-form textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(255,102,0,.10);
}

/*==================================================
 FORM LAYOUT
==================================================*/

.comment-form-comment{
    margin-bottom:25px;
}

.comment-form-author,
.comment-form-email,
.comment-form-url{
    width: 32%;
    display:inline-block;
    vertical-align:top;
    margin-right: 1%;
    margin-bottom:25px;
}

.comment-form-url{
    margin-right:0;
}

/*==================================================
 CHECKBOX
==================================================*/

.comment-form-cookies-consent{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:20px 0 30px;
}

.comment-form-cookies-consent input{
    width:18px;
    height:18px;
    accent-color:var(--primary);
    margin-top:3px;
}

.comment-form-cookies-consent label{
    margin:0;
    color:#64748b;
    font-size:15px;
    line-height:1.6;
}

/*==================================================
 BUTTON
==================================================*/

.form-submit{
    margin-top:10px;
}

.comment-form .submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    border:none;
    border-radius:50px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.comment-form .submit:hover{
    background:var(--secondary);
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

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

@media(max-width:991px){

.comment-form-author,
.comment-form-email,
.comment-form-url{
    width:100%;
    margin-right:0;
}

}

@media(max-width:767px){

.comment-respond{
    padding:25px;
    border-radius:18px;
}

.comment-reply-title{
    font-size:26px;
}

.comment-form input,
.comment-form textarea{
    font-size:15px;
}

.comment-form .submit{
    width:100%;
}

}


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

.commentlist{
    margin:60px 0;
    padding:0;
    list-style:none;
}

.commentlist > li{
    list-style:none;
    margin-bottom:30px;
}

/*==================================================
 COMMENT CARD
==================================================*/

.comment-body{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius: 20px;
    padding:30px;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    transition:.3s;
}

.comment-body:hover{
    box-shadow:0 20px 45px rgba(15,23,42,.08);
}

/*==================================================
 HEADER
==================================================*/

.comment-meta{
    margin-bottom:20px;
}

.comment-author{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:10px;
}

.comment-author img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #f4f4f4;
}

.comment-author .fn{
    font-size:18px;
    font-weight:700;
}

.comment-author .fn a{
    color:var(--dark);
    text-decoration:none;
}

.comment-author .fn a:hover{
    color:var(--primary);
}

.comment-author .says{
    display:none;
}

/*==================================================
 DATE
==================================================*/

.comment-metadata{
    margin-left:75px;
    margin-bottom:20px;
}

.comment-metadata a{
    color:#64748b;
    text-decoration:none;
    font-size:14px;
}

.comment-metadata a:hover{
    color:var(--primary);
}

/*==================================================
 MODERATION
==================================================*/

.comment-awaiting-moderation{
    display:inline-block;
    margin-left:75px;
    margin-bottom:20px;
    padding:8px 14px;
    border-radius:40px;
    background:#FFF7E6;
    color:#D97706;
    font-size:14px;
    font-style:normal;
}

/*==================================================
 COMMENT CONTENT
==================================================*/

.comment-content{
    margin-left:75px;
}

.comment-content p:last-child{
    margin-bottom:0;
}

.comment-content p{
    color:#475569;
    line-height:1.9;
    font-size:16px;
}

/*==================================================
 REPLY BUTTON
==================================================*/

.reply{
    margin-top:25px;
    margin-left:75px;
}

.reply a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:40px;
    background:#FFF3EE;
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.reply a:hover{
    background:var(--primary);
    color:#fff;
}

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

.commentlist .children{
    list-style:none;
    margin:30px 0 0 70px;
    padding-left:30px;
    border-left:2px solid #edf2f7;
}

.commentlist .children .comment-body{
    background:#fcfcfc;
}

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

@media(max-width:767px){

.comment-body{
    padding:22px;
}

.comment-author{
    flex-direction:column;
    align-items:flex-start;
}

.comment-author img{
    width:50px;
    height:50px;
}

.comment-metadata,
.comment-content,
.reply,
.comment-awaiting-moderation{
    margin-left:0;
}

.commentlist .children{
    margin-left:20px;
    padding-left:15px;
}

}


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

#comments{
    position:relative;
    margin:80px 0 40px;
    padding-bottom:18px;
    color:var(--dark);
    font-size: 24px;
    line-height: 1.5;
    width: 60%;
}

#comments::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:70px;
    height:4px;
    border-radius:50px;
    background:var(--primary);
}

#comments span{
    color:var(--primary);
}

@media(max-width:991px){

#comments{
    font-size:30px;
}

}

@media(max-width:767px){

#comments{
    font-size:26px;
    margin:60px 0 30px;
}

#comments::after{
    width:55px;
}

}


@media (max-width:991px){}
@media (max-width:767px){}