/** ==============================
 * Blog Page Styles
 * ============================== */
.featured-blog-section-banner h2 { overflow: hidden; margin: 0px; padding-bottom: 10px;}
.featured-blog-section-banner > .featured-blog-section-banner-inner { position: relative; padding: 90px 0px 30px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: visible; }
.featured-blog-section-banner-inner .title-wrapper { padding-bottom: 320px; }
.featured-blog-img { position: absolute; bottom: -32vh; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); z-index: -1; width: max(35vw, 380px); margin: 0px auto; aspect-ratio: 1  / 1; animation: floaty 6s ease-in-out infinite; -webkit-animation: floaty 6s ease-in-out infinite; }
.featured-blog-img img { width: 100%; height: auto;}

@keyframes floaty {
    0%, 100% { transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); }
    50% { transform: translate(-50%, -20px); -webkit-transform: translate(-50%, -20px); }
}
/********** Blog Listing Section **********/
.blog-wrapper { padding: 154px 0px 50px; position: relative;}
.blog-wrapper:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(30px); background-color: white; z-index: -1; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);}
.theme-dark .blog-wrapper:before {  background-color: black;}
.blog-grid { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; gap: 48px; }
.blog-card { width: calc((100% / 3) - 36px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 16px; background: var(--black-color-400); border-radius: 20px; 
    box-shadow: 0px 4px 8.8px 0px #00000087 , 0px 0px 0px 10px #8383834D;
}

.related-blogs-grid.blog-grid { display: block; }
.related-blogs-grid.blog-grid .slick-track { padding: 10px 0px; }
.related-blogs-grid.blog-grid .blog-card {width: unset; margin: 0px 18px; }

.blog-card .blog-image-wrapper { display: block; width: 100%; aspect-ratio: 470 / 380; border-radius: 16px; overflow: hidden; }
.blog-card .blog-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blog-card .blog-image-wrapper:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); }
.blog-content { padding: 16px 0px; color: rgba(255, 255, 255, 1);}
.blog-meta { margin-bottom: 16px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; --webkit-align-items: center; }
.blog-meta .author-info { position: relative; display: flex; display: -webkit-flex; gap: 8px; }
.blog-meta .author-info .author-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.blog-meta .author-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-meta .author-name { font-weight: 600; font-size: 12px; line-height: 1; display: block; margin-bottom: 8px; text-transform: capitalize; }
.blog-meta .author-role { font-size: 12px; line-height: 1; text-transform: uppercase; display: block; }
.blog-meta .blog-date { font-size: 12px; line-height: 16px; }
.blog-title a { color: inherit; text-decoration: none; transition: none; display: block; margin-bottom: 12px; }
.blog-excerpt { font-size: 14px; line-height: 1.6; font-weight: 300; }
.load-more-wrapper { text-align: center; }
.blog-wrapper .load-more-btn { font-size: 16px; line-height: 1; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; border: none; width: fit-content; margin: 56px auto 0px; }


/************ Blog Detail Page Styles ************/
.blog-detail-page-content-wrapper { padding: 121px 0px;  }
.blog-detail-top-desc-inner { max-width: 83.3%; margin: 0px auto;}
.blog-detail-top-desc { padding-bottom: 50px; }
.blog-detail-top-desc .blog-date { display: block; margin-bottom: 16px; }
.blog-detail-top-desc .blog-title { margin-bottom: 24px; }
.blog-detail-top-desc .author-info { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; gap: 8px; }
.blog-detail-top-desc .author-info .author-img { width: 40px; height: 40px; border-radius: 50%; }
.blog-detail-top-desc .author-info .author-name { margin-bottom: 8px; }
.blog-detail-top-desc .author-info .author-name,
.blog-detail-top-desc .author-info .author-designation { display: block; font-size: 14px; line-height: 1; }


.blog-detail-page-content-wrapper .blog-featured-img { width: 100%; aspect-ratio: 1920 / 800;  }
.blog-detail-page-content-wrapper .blog-featured-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0px; }


.blog-content-wrapper { padding: 50px 0px; }
.blog-content-wrapper .row { max-width: 83.3%;  margin: 0px auto; }
.blog-content-wrapper h1 { font-size: 150px; line-height: 160px; }
.blog-content-wrapper h2 { font-size: 110px; line-height: 120px; }
.blog-content-wrapper h3 { font-size: 94px; line-height: 104px; }
.blog-content-wrapper h4 { font-size: 64px; line-height: 84px; }
.blog-content-wrapper h5 { font-size: 44px; line-height: 68px; }
.blog-content-wrapper h6 { font-size: 34px; line-height: 54px; }

.blog-content-wrapper h1:not(:last-child), .blog-content-wrapper h2:not(:last-child), .blog-content-wrapper h3:not(:last-child),
.blog-content-wrapper h4:not(:last-child), .blog-content-wrapper h5:not(:last-child), .blog-content-wrapper h6:not(:last-child),
.blog-content-wrapper p:not(:last-child), .blog-content-wrapper ol:not(:last-child), .blog-content-wrapper ul:not(:last-child), .blog-content-wrapper blockquote:not(:last-child) {margin-bottom: 24px;}

blockquote { position: relative; background: var(--grey-color-700); padding: 16px 16px 16px 48px; overflow: hidden; border-radius: 8px; }
.theme-dark blockquote, .theme-dark .conversation-box { background: var(--black-color-200);}
blockquote::before { display: none; }
blockquote::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background: var(--blue-color-100); }

.blog-content-wrapper ul { list-style-type: disc; padding-left: 22px; }
.blog-content-wrapper ol { list-style-type: decimal; padding-left: 22px; }
.blog-content-wrapper ul li, .blog-content-wrapper ol li { margin-bottom: 12px; }
.blog-content-wrapper article a { color: var(--blue-color-100); text-decoration: underline; }
.blog-content-wrapper article a:hover { text-decoration: none; }  

.row { display: flex; display: -webkit-flex; gap: 30px; }
.blog-left-content { flex: 1 0; }
.blog-sidebar { width: 375px; } 

.conversation-box { background: var(--grey-color-700); border-radius:12px; padding: 24px; }
.conversation-box .conversation-btn { width: 100%; }  

.blog-sidebar .social-icon-list { list-style: none; justify-content: center; -webkit-justify-content: center;  display: flex; display: -webkit-flex; gap: 36px; margin: 36px 0px 0px 0px; padding: 0px; }
.blog-sidebar .social-icon-list li { margin: 0px; }

.related-blogs-section .section-header .title { padding-bottom: 36px; text-align: left; }

/** ==============================
 * Author Page Styles
 * ============================== */
.author-detail-page-content-wrapper {padding: 121px 0px 0px;  }
.author-detail-desc-inner { max-width: 83.3%; margin: 0px auto; display: flex; gap: 24px;}
.author-avatar-info { width: 200px; flex-shrink: 0;}
.author-avatar-info > img {  aspect-ratio: 1 / 1; width: 100%; object-fit: cover;  box-shadow: 0 0 15px rgba(0,0,0,0.2);  border-radius: 10%;}
.author-detail-info { flex: 1 0;}
.author-avatar-info .social-icon-list { display: flex; display: -webkit-flex; justify-content: space-between; margin-top: 12px; padding: 0px; list-style: none; }
.author-avatar-info .social-icon-list img { width: 24px;}
.author-designation { margin-bottom: 12px;}


.author-avatar-info .heading-style-6, 
.author-avatar-info .author-designation { display: none;}

@media (max-width: 1399px) {

    /* .blog-content-wrapper { padding: 50px 0px; } */
    .blog-content-wrapper h1 { font-size: 100px; line-height: 110px; }
    .blog-content-wrapper h2 { font-size: 80px; line-height: 90px; }
    .blog-content-wrapper h3 { font-size: 70px; line-height: 80px; }
    .blog-content-wrapper h4 { font-size: 50px; line-height: 60px; }
    .blog-content-wrapper h5 { font-size: 36px; line-height: 46px; }
    .blog-content-wrapper h6 { font-size: 28px; line-height: 38px; }


    /* .featured-blog-img { width: 380px; } */
    .featured-blog-section-banner-inner .title-wrapper { padding-bottom: 280px; }
    .blog-wrapper { padding: 100px 0px 50px; }  
    .blog-card { width: calc((100% / 2) - 24px); }
    /** ==============================
    * Author Page Styles
    * ============================== */
    .author-avatar-info .social-icon-list img { width: 22px;}
}

@media (max-width: 1199px) {


    .blog-content-wrapper h1 { font-size: 80px; line-height: 90px; }
    .blog-content-wrapper h2 { font-size: 70px; line-height: 80px; }
    .blog-content-wrapper h3 { font-size: 60px; line-height: 70px; }
    .blog-content-wrapper h4 { font-size: 40px; line-height: 50px; }
    .blog-content-wrapper h5 { font-size: 32px; line-height: 42px; }
    .blog-content-wrapper h6 { font-size: 24px; line-height: 34px; }

    .featured-blog-section-banner > .featured-blog-section-banner-inner { padding: 40px 20px 20px; }
    /* .featured-blog-img { width: 300px; } */
    .featured-blog-section-banner-inner .title-wrapper { padding-bottom: 150px; }
    .blog-wrapper { padding: 80px 0px 40px; }


    /************ BLOG DETAIL PAGE STYLES ************/
    .blog-detail-page-content-wrapper { padding: 110px 0px 60px; }
    .blog-detail-top-desc { padding-bottom: 40px; }
    .blog-detail-top-desc .blog-date { margin-bottom: 6px; }
    .blog-content-wrapper h1:not(:last-child), .blog-content-wrapper h2:not(:last-child), 
    .blog-content-wrapper h3:not(:last-child), .blog-content-wrapper h4:not(:last-child), 
    .blog-content-wrapper h5:not(:last-child), .blog-content-wrapper h6:not(:last-child), 
    .blog-content-wrapper p:not(:last-child), .blog-content-wrapper ol:not(:last-child), 
    .blog-content-wrapper ul:not(:last-child), .blog-content-wrapper blockquote:not(:last-child) { margin-bottom: 20px;}
    .blog-sidebar { width: 300px; }
    .blog-sidebar .social-icon-list { gap: 24px; margin-top: 26px; }
    .conversation-box { padding: 20px; }
    .blog-sidebar .social-icon-list img { width: 30px; height: auto; }
    /** ==============================
    * Author Page Styles
    * ============================== */
    .author-detail-page-content-wrapper   {padding: 110px 0px 0px;}
    .author-avatar-info { width: 120px;}
    .author-avatar-info .social-icon-list {  margin-top: 12px;}
    .author-avatar-info .social-icon-list img { width: 20px;}
}

@media (max-width: 991px) {

    .blog-content-wrapper h1 { font-size: 70px; line-height: 80px; }
    .blog-content-wrapper h2 { font-size: 60px; line-height: 70px; }
    .blog-content-wrapper h3 { font-size: 50px; line-height: 60px; }
    .blog-content-wrapper h4 { font-size: 30px; line-height: 40px; }
    .blog-content-wrapper h5 { font-size: 24px; line-height: 34px; }
    .blog-content-wrapper h6 { font-size: 20px; line-height: 30px; }


    /* .featured-blog-img { width: 360px; } */

    /************ BLOG DETAIL PAGE STYLES ************/
    .blog-detail-top-desc-inner,
    .blog-content-wrapper .row { max-width: 100%;  margin: 0px auto; }
    .blog-detail-top-desc { padding-bottom: 30px; }
    .blog-detail-top-desc .blog-date { margin-bottom: 6px; }
    .blog-content-wrapper h1:not(:last-child), .blog-content-wrapper h2:not(:last-child), 
    .blog-content-wrapper h3:not(:last-child), .blog-content-wrapper h4:not(:last-child), 
    .blog-content-wrapper h5:not(:last-child), .blog-content-wrapper h6:not(:last-child), 
    .blog-content-wrapper p:not(:last-child), .blog-content-wrapper ol:not(:last-child), 
    .blog-content-wrapper ul:not(:last-child), .blog-content-wrapper blockquote:not(:last-child) {
        margin-bottom: 20px;
    }
    blockquote { padding: 12px 12px 12px 30px; }
    .blog-sidebar .social-icon-list img { width: 25px; height: auto; }
    /** ==============================
    * Author Page Styles
    * ============================== */
    .author-detail-desc-inner { max-width: 100%; flex-direction: column;}
    .author-avatar-info { display: flex; gap: 24px; width: 100%;}
    .author-avatar-info > img { width: 120px;}
    .author-avatar-info .heading-style-6, 
    .author-avatar-info .author-designation { display: block;}
    .author-avatar-info .social-icon-list { justify-content: flex-start; gap: 10px;}
    .author-detail-info .heading-style-6, 
    .author-detail-info .author-designation { display: none;}


}

@media (max-width: 767px) {

    .blog-content-wrapper h1 { font-size: 60px; line-height: 70px; }
    .blog-content-wrapper h2 { font-size: 50px; line-height: 60px; }
    .blog-content-wrapper h3 { font-size: 40px; line-height: 50px; }
    .blog-content-wrapper h4 { font-size: 28px; line-height: 38px; }
    .blog-content-wrapper h5 { font-size: 22px; line-height: 32px; }
    .blog-content-wrapper h6 { font-size: 18px; line-height: 28px; }


    .featured-blog-section-banner-inner .title-wrapper  { padding-bottom: 50px; }
    .featured-blog-section-banner > .featured-blog-section-banner-inner { padding: 40px 0px 20px; }
    .featured-blog-img { width: 400px; }
    .blog-grid { gap: 40px; }
    .blog-card { width: 100%; border-radius: 16px; }
    .blog-wrapper { padding: 60px 0px 30px; }
    .blog-wrapper .load-more-btn  { margin: 46px auto 0px; }



    /************ BLOG DETAIL PAGE STYLES ************/
    .blog-detail-page-content-wrapper { padding: 100px 0px 60px; }
    .blog-content-wrapper { padding: 30px 0px; }
    .blog-content-wrapper h1:not(:last-child), .blog-content-wrapper h2:not(:last-child), 
    .blog-content-wrapper h3:not(:last-child), .blog-content-wrapper h4:not(:last-child), 
    .blog-content-wrapper h5:not(:last-child), .blog-content-wrapper h6:not(:last-child), 
    .blog-content-wrapper p:not(:last-child), .blog-content-wrapper ol:not(:last-child), 
    .blog-content-wrapper ul:not(:last-child), .blog-content-wrapper blockquote:not(:last-child) {
        margin-bottom: 16px;
    }
    .blog-detail-page-content-wrapper .blog-featured-img { aspect-ratio: 1 / 0.7;}
    .blog-content-wrapper .row { flex-direction: column; -webkit-flex-direction: column; }
    .blog-left-content, .blog-sidebar  { width: 100%;}
    .blog-sidebar .social-icon-list img { width: 22px; height: auto; }
}