/*=========================================================
  VBlink HR Consultants
  blog-post.css
  Part 1
=========================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

    --primary:#2f54eb;
    --primary-light:#5b7cff;
    --secondary:#0f172a;

    --accent:#ff8c42;
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --white:#ffffff;
    --light:#f7f9fc;
    --gray:#64748b;
    --gray-light:#e5e7eb;
    --border:#dbe4f0;

    --shadow-sm:0 4px 15px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.12);
    --shadow-lg:0 20px 50px rgba(0,0,0,.18);

    --radius:18px;
    --radius-sm:12px;

    --transition:.35s ease;

}

/*==============================
RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;
    font-size:16px;
    line-height:1.8;
    color:var(--secondary);
    background:var(--light);

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;
    transition:var(--transition);

}

ul{

    list-style:none;

}

.container{

    width:min(1280px,92%);
    margin:auto;

}

/*==============================
PAGE BANNER
==============================*/

.page-banner{

    position:relative;

    padding:120px 0 80px;

    overflow:hidden;

    background:
    linear-gradient(135deg,
    #1e3a8a,
    #2563eb,
    #4f46e5);

    color:#fff;

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top left,
    rgba(255,255,255,.18),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(255,255,255,.12),
    transparent 35%);

    pointer-events:none;

}

.banner-content{

    position:relative;
    z-index:2;

    text-align:center;

    max-width:900px;

    margin:auto;

}

.banner-category{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    font-size:.9rem;

    letter-spacing:.5px;

    margin-bottom:18px;

}

.banner-content h1{

    font-size:clamp(2.2rem,5vw,3.8rem);

    line-height:1.2;

    font-weight:700;

    margin-bottom:22px;

}

.post-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

    font-size:.95rem;

}

.post-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.post-meta i{

    color:#ffe082;

}

/*==============================
BLOG SECTION
==============================*/

.blog-post{

    padding:70px 0;

}

.blog-layout{

    display:grid;

    grid-template-columns:
    minmax(0,2.1fr)
    minmax(300px,.9fr);

    gap:45px;

    align-items:start;

}

/*==============================
ARTICLE AREA
==============================*/

.article-content{

    background:#fff;

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

}

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

.featured-image{

    margin-bottom:35px;

    overflow:hidden;

    border-radius:16px;

    box-shadow:var(--shadow-md);

}

.featured-image img{

    width:100%;

    transition:.8s;

}

.featured-image:hover img{

    transform:scale(1.04);

}

/*==============================
INTRO
==============================*/

.article-intro{

    margin-bottom:40px;

}

.lead{

    font-size:1.18rem;

    color:#374151;

    line-height:1.9;

    font-weight:400;

    position:relative;

    padding-left:25px;

}

.lead::before{

    content:"";

    position:absolute;

    left:0;

    top:6px;

    width:6px;

    height:90%;

    border-radius:30px;

    background:var(--primary);

}

/*==============================
ARTICLE TYPOGRAPHY
==============================*/

.blog-article h2{

    margin-top:55px;

    margin-bottom:20px;

    font-size:2rem;

    color:var(--secondary);

    line-height:1.3;

    position:relative;

}

.blog-article h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:10px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

}

.blog-article h3{

    margin-top:35px;

    margin-bottom:15px;

    font-size:1.35rem;

    color:var(--secondary);

}

.blog-article h4{

    margin-bottom:10px;

    font-size:1.1rem;

}

.blog-article p{

    margin-bottom:22px;

    color:#475569;

    text-align:justify;

}

.blog-article strong{

    color:var(--secondary);

}

.blog-article a{

    color:var(--primary);

    font-weight:600;

}

.blog-article a:hover{

    color:var(--accent);

}

/*==============================
HORIZONTAL RULE
==============================*/

.blog-article hr{

    border:none;

    height:1px;

    background:var(--border);

    margin:45px 0;

}

/*==============================
TEXT SELECTION
==============================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*=========================================================
END OF PART 1
PART 2 STARTS WITH:
Info Boxes
Lists
Skills Grid
Blockquotes
FAQ
CTA
=========================================================*/

/*=========================================================
  BLOG POST CSS
  PART 2
  Content Components
=========================================================*/


/*=========================================================
INFO BOX
=========================================================*/

.info-box{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin:35px 0;

    padding:28px;

    background:#eef4ff;

    border-left:6px solid var(--primary);

    border-radius:16px;

    box-shadow:var(--shadow-sm);

}

.info-box i{

    font-size:34px;

    color:var(--primary);

    margin-top:3px;

}

.info-box h3{

    margin:0 0 10px;

    color:var(--secondary);

}

.info-box p{

    margin:0;

}


/*=========================================================
TIP BOX
=========================================================*/

.tip-box{

    display:flex;

    gap:20px;

    margin:40px 0;

    padding:28px;

    background:#ecfff3;

    border-left:6px solid var(--success);

    border-radius:16px;

    box-shadow:var(--shadow-sm);

}

.tip-box i{

    font-size:34px;

    color:var(--success);

}

.tip-box h3{

    margin-bottom:10px;

    color:var(--success);

}

.tip-box p{

    margin-bottom:0;

}


/*=========================================================
WARNING BOX
=========================================================*/

.warning-box{

    margin:40px 0;

    padding:28px;

    background:#fff8e8;

    border-left:6px solid var(--warning);

    border-radius:16px;

    box-shadow:var(--shadow-sm);

}

.warning-box ul{

    margin:0;

    padding-left:20px;

    list-style:disc;

}

.warning-box li{

    margin-bottom:12px;

    color:#444;

}


/*=========================================================
EXAMPLE BOX
=========================================================*/

.example-box{

    margin:40px 0;

    padding:30px;

    border-radius:16px;

    background:#f8fafc;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}

.example-box h3{

    margin-bottom:18px;

    color:var(--primary);

}

.example-box strong{

    color:var(--danger);

}


/*=========================================================
CTA BOX
=========================================================*/

.cta-box{

    margin:60px 0;

    padding:45px;

    text-align:center;

    border-radius:20px;

    color:#fff;

    background:linear-gradient(135deg,#2f54eb,#4f46e5);

    box-shadow:var(--shadow-lg);

}

.cta-box h2{

    margin-top:0;

    color:#fff;

}

.cta-box h2::after{

    display:none;

}

.cta-box p{

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

    max-width:700px;

    margin:20px auto 35px;

}


/*=========================================================
BUTTONS
=========================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:40px;

    background:#fff;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

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

}


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

.blog-article blockquote{

    position:relative;

    margin:40px 0;

    padding:35px 40px;

    border-left:6px solid var(--primary);

    border-radius:16px;

    background:#f8fbff;

    font-size:1.18rem;

    font-style:italic;

    color:#334155;

    box-shadow:var(--shadow-sm);

}

.blog-article blockquote::before{

    content:"“";

    position:absolute;

    top:10px;

    left:20px;

    font-size:70px;

    color:rgba(47,84,235,.15);

    line-height:1;

}


/*=========================================================
CHECK LIST
=========================================================*/

.check-list{

    margin:25px 0 40px;

}

.check-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

    font-size:16px;

}

.check-list i{

    color:var(--success);

    margin-top:3px;

}


/*=========================================================
NUMBER LIST
=========================================================*/

.number-list{

    margin:25px 0 40px 25px;

}

.number-list li{

    margin-bottom:14px;

    padding-left:10px;

}


/*=========================================================
SKILLS GRID
=========================================================*/

.skills-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

    margin:45px 0;

}

.skill-card{

    background:#fff;

    padding:30px;

    border-radius:18px;

    text-align:center;

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.skill-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.skill-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:20px;

}

.skill-card h4{

    margin-bottom:15px;

    color:var(--secondary);

}

.skill-card p{

    margin-bottom:0;

    text-align:center;

}


/*=========================================================
FAQ
=========================================================*/

.faq{

    margin-top:50px;

}

.faq h3{

    padding:18px 24px;

    margin:25px 0 0;

    border-radius:12px 12px 0 0;

    background:#eef4ff;

    color:var(--primary);

}

.faq p{

    margin:0;

    padding:22px 24px;

    background:#fff;

    border:1px solid var(--border);

    border-top:none;

    border-radius:0 0 12px 12px;

}


/*=========================================================
TABLES
=========================================================*/

.blog-article table{

    width:100%;

    border-collapse:collapse;

    margin:40px 0;

    overflow:hidden;

    border-radius:14px;

    box-shadow:var(--shadow-sm);

}

.blog-article th{

    padding:16px;

    text-align:left;

    color:#fff;

    background:var(--primary);

}

.blog-article td{

    padding:16px;

    border-bottom:1px solid var(--border);

    background:#fff;

}

.blog-article tr:nth-child(even) td{

    background:#f8fafc;

}


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

.blog-article code{

    padding:3px 8px;

    border-radius:6px;

    background:#eef2ff;

    color:#d63384;

    font-family:Consolas,monospace;

}


/*=========================================================
CODE BLOCK
=========================================================*/

.blog-article pre{

    overflow:auto;

    margin:35px 0;

    padding:22px;

    border-radius:14px;

    background:#0f172a;

    color:#f1f5f9;

    font-size:15px;

    line-height:1.7;

}

.blog-article pre code{

    padding:0;

    background:none;

    color:inherit;

}


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

.blog-article figure{

    margin:40px 0;

}

.blog-article figcaption{

    margin-top:12px;

    text-align:center;

    color:var(--gray);

    font-size:14px;

}


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

.blog-article img{

    transition:.5s;

}

.blog-article img:hover{

    transform:scale(1.02);

}


/*=========================================================
END PART 2

PART 3

Sidebar
Author Card
Search
Recent Posts
Categories
Newsletter
Social Icons

=========================================================*/

/*=========================================================
  BLOG POST CSS
  PART 3
  SIDEBAR
=========================================================*/


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

.blog-sidebar{

    display:flex;
    flex-direction:column;
    gap:30px;

}


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

.sidebar-widget{

    position:relative;

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.sidebar-widget:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}


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

.widget-title{

    position:relative;

    font-size:1.25rem;

    font-weight:700;

    color:var(--secondary);

    margin-bottom:22px;

    padding-bottom:12px;

}

.widget-title::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:60px;
    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

}


/*=========================================================
AUTHOR CARD
=========================================================*/

.author-widget{

    text-align:center;

}

.author-image{

    width:130px;
    height:130px;

    margin:auto auto 20px;

    border-radius:50%;

    overflow:hidden;

    border:6px solid #eef3ff;

    box-shadow:var(--shadow-md);

}

.author-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.author-widget:hover .author-image img{

    transform:scale(1.08);

}

.author-widget h3{

    font-size:1.45rem;

    color:var(--secondary);

    margin-bottom:12px;

}

.author-widget p{

    color:var(--gray);

    margin-bottom:25px;

    line-height:1.8;

}


/*=========================================================
AUTHOR SOCIAL
=========================================================*/

.author-social{

    display:flex;

    justify-content:center;

    gap:14px;

}

.author-social a{

    width:44px;
    height:44px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#f4f7ff;

    color:var(--primary);

    font-size:18px;

    transition:var(--transition);

}

.author-social a:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-5px);

}


/*=========================================================
SEARCH FORM
=========================================================*/

.sidebar-widget form{

    position:relative;

}

.search-input{

    width:100%;

    height:52px;

    padding:0 58px 0 18px;

    border:1px solid var(--border);

    border-radius:50px;

    outline:none;

    font-size:15px;

    transition:var(--transition);

}

.search-input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(47,84,235,.12);

}

.search-btn{

    position:absolute;

    top:6px;
    right:6px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    transition:var(--transition);

}

.search-btn:hover{

    background:var(--accent);

}


/*=========================================================
RECENT POSTS
=========================================================*/

.recent-post{

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:20px;

    padding-bottom:20px;

    border-bottom:1px solid #edf1f7;

}

.recent-post:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;

}

.recent-post img{

    width:90px;

    height:70px;

    border-radius:12px;

    object-fit:cover;

    transition:.4s;

}

.recent-post:hover img{

    transform:scale(1.06);

}

.recent-post div{

    flex:1;

}

.recent-post a{

    display:block;

    color:var(--secondary);

    font-weight:600;

    line-height:1.5;

    margin-bottom:6px;

}

.recent-post a:hover{

    color:var(--primary);

}

.recent-post span{

    font-size:13px;

    color:var(--gray);

}


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

.category-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.category-list li{

    list-style:none;

}

.category-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:12px;

    background:#f8faff;

    color:var(--secondary);

    transition:var(--transition);

}

.category-list a:hover{

    background:var(--primary);

    color:#ffffff;

    padding-left:24px;

}


/*=========================================================
SHARE ICONS
=========================================================*/

.share-icons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.share-icons a{

    width:48px;
    height:48px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#eef3ff;

    color:var(--primary);

    font-size:18px;

    transition:var(--transition);

}

.share-icons a:hover{

    transform:translateY(-5px) rotate(10deg);

    background:var(--primary);

    color:#fff;

}


/*=========================================================
NEWSLETTER
=========================================================*/

.newsletter-box{

    text-align:center;

    background:

    linear-gradient(
        135deg,
        #2f54eb,
        #5b7cff
    );

    color:#fff;

}

.newsletter-box h3{

    color:#fff;

    margin-bottom:16px;

}

.newsletter-box p{

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

    margin-bottom:25px;

}

.newsletter-box .btn-primary{

    background:#fff;

    color:var(--primary);

}

.newsletter-box .btn-primary:hover{

    background:#f2f5ff;

}


/*=========================================================
SIDEBAR BANNER
=========================================================*/

.sidebar-banner{

    width:100%;

    border-radius:18px;

    overflow:hidden;

    transition:.6s;

    box-shadow:var(--shadow-md);

}

.sidebar-banner:hover{

    transform:scale(1.03);

}


/*=========================================================
STICKY SIDEBAR
=========================================================*/

.blog-sidebar{

    position:sticky;

    top:110px;

    align-self:start;

}


/*=========================================================
END PART 3

PART 4

Related Posts
Previous / Next
Animations
Responsive Design

=========================================================*/

/*=========================================================
  BLOG POST CSS
  PART 4
  Related Posts • Navigation • Responsive
=========================================================*/


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

.related-posts{

    padding:70px 0;

    background:#f7f9fc;

}

.related-posts h2{

    text-align:center;

    font-size:2.3rem;

    margin-bottom:50px;

    color:var(--secondary);

}

.related-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}


/*=========================================================
RELATED CARD
=========================================================*/

.related-card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.related-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.related-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.6s;

}

.related-card:hover img{

    transform:scale(1.05);

}

.related-content{

    padding:25px;

}

.related-content span{

    display:inline-block;

    margin-bottom:14px;

    padding:6px 14px;

    border-radius:30px;

    background:#eef3ff;

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}

.related-content h3{

    margin-bottom:15px;

    line-height:1.4;

    font-size:1.3rem;

}

.related-content h3 a{

    color:var(--secondary);

}

.related-content h3 a:hover{

    color:var(--primary);

}

.related-content p{

    margin-bottom:20px;

    color:var(--gray);

}

.read-more{

    font-weight:600;

    color:var(--primary);

}

.read-more:hover{

    color:var(--accent);

}


/*=========================================================
POST NAVIGATION
=========================================================*/

.post-navigation-section{

    padding:40px 0 80px;

    background:#ffffff;

}

.post-navigation{

    display:grid;

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

    gap:25px;

}

.prev-post,
.next-post{

    display:block;

    padding:28px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.prev-post:hover,
.next-post:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

    border-color:var(--primary);

}

.prev-post span,
.next-post span{

    display:block;

    margin-bottom:10px;

    font-size:.9rem;

    color:var(--primary);

    font-weight:600;

}

.prev-post h3,
.next-post h3{

    margin:0;

    color:var(--secondary);

    line-height:1.5;

}

.next-post{

    text-align:right;

}


/*=========================================================
SMOOTH FADE
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.article-content,
.sidebar-widget,
.related-card{

    animation:fadeUp .8s ease both;

}


/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2446c5;

}


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

@media(max-width:992px){

.blog-layout{

    grid-template-columns:1fr;

}

.blog-sidebar{

    position:relative;

    top:0;

}

.page-banner{

    padding:100px 0 70px;

}

.article-content{

    padding:35px;

}

.related-grid{

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

}

.post-navigation{

    grid-template-columns:1fr;

}

.next-post{

    text-align:left;

}

}


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

@media(max-width:768px){

.page-banner{

    padding:90px 0 60px;

}

.banner-content h1{

    font-size:2rem;

}

.post-meta{

    gap:15px;

    flex-direction:column;

}

.article-content{

    padding:25px;

}

.blog-article h2{

    font-size:1.7rem;

}

.info-box,
.tip-box{

    flex-direction:column;

}

.skills-grid{

    grid-template-columns:1fr;

}

.related-grid{

    grid-template-columns:1fr;

}

.author-social{

    flex-wrap:wrap;

}

.share-icons{

    justify-content:center;

}

.cta-box{

    padding:35px 25px;

}

}


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

@media(max-width:576px){

.container{

    width:94%;

}

.page-banner{

    padding:80px 0 50px;

}

.banner-category{

    font-size:.8rem;

}

.banner-content h1{

    font-size:1.7rem;

}

.article-content{

    padding:20px;

}

.lead{

    font-size:1.05rem;

}

.blog-article h2{

    font-size:1.45rem;

}

.blog-article h3{

    font-size:1.2rem;

}

.widget-title{

    font-size:1.1rem;

}

.related-posts h2{

    font-size:1.8rem;

}

.prev-post,
.next-post{

    padding:22px;

}

.recent-post{

    flex-direction:column;

    align-items:flex-start;

}

.recent-post img{

    width:100%;

    height:180px;

}

.search-input{

    font-size:14px;

}

}


/*=========================================================
PRINT
=========================================================*/

@media print{

header,
footer,
.blog-sidebar,
.post-navigation-section,
.related-posts{

    display:none;

}

body{

    background:#fff;

}

.article-content{

    width:100%;

    box-shadow:none;

    border:none;

    padding:0;

}

.page-banner{

    background:#fff;

    color:#000;

    padding:20px 0;

}

}


/*=========================================================
END OF FILE
=========================================================*/