/*=========================================
BLOG PAGE
Hive Tech Media
=========================================*/

.blog-page{

padding:80px 0;

background:var(--bg);

}

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

.blog-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

box-shadow:0 8px 30px rgba(0,0,0,.05);

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}

.blog-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(41,149,211,.15);

border-color:var(--primary);

}

.blog-image{

overflow:hidden;

position:relative;

aspect-ratio:16/10;

}

.blog-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.blog-card:hover img{

transform:scale(1.08);

}

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

.blog-content{

padding:28px;

display:flex;

flex-direction:column;

flex:1;

}

.blog-category{

display:inline-block;

padding:6px 14px;

background:#EAF6FD;

color:var(--primary);

border-radius:30px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.blog-content h3{

font-size:24px;

line-height:1.4;

margin-bottom:15px;

}

.blog-content h3 a{

text-decoration:none;

color:var(--dark);

transition:.3s;

}

.blog-content h3 a:hover{

color:var(--primary);

}

.blog-meta{

font-size:14px;

color:var(--text);

margin-bottom:25px;

display:flex;

align-items:center;

gap:8px;

}

.blog-meta i{

color:var(--primary);

}

.read-more{

margin-top:auto;

display:inline-flex;

align-items:center;

gap:10px;

text-decoration:none;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.read-more:hover{

gap:15px;

color:var(--primary-hover);

}

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

.blog-sidebar{

display:flex;

flex-direction:column;

gap:30px;

}

.sidebar-widget{

background:#fff;

padding:28px;

border-radius:20px;

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

box-shadow:0 8px 30px rgba(0,0,0,.04);

}

.widget-title{

font-size:22px;

font-weight:700;

margin-bottom:20px;

color:var(--dark);

position:relative;

padding-bottom:10px;

}

.widget-title::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:60px;

height:3px;

background:var(--primary);

border-radius:10px;

}

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

.search-form{

position:relative;

}

.search-form input{

height:54px;

padding-right:55px;

border-radius:14px;

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

}

.search-form button{

position:absolute;

right:6px;

top:6px;

width:42px;

height:42px;

border:none;

background:var(--primary);

color:#fff;

border-radius:12px;

transition:.3s;

}

.search-form button:hover{

background:var(--primary-hover);

}

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

.category-list{

padding:0;

margin:0;

list-style:none;

}

.category-list li{

margin-bottom:12px;

}

.category-list a{

display:flex;

justify-content:space-between;

align-items:center;

text-decoration:none;

padding:12px 16px;

border-radius:12px;

color:var(--dark);

background:#F8FAFC;

transition:.3s;

}

.category-list a:hover{

background:#EAF6FD;

color:var(--primary);

}

.category-list span{

background:var(--primary);

color:#fff;

padding:3px 10px;

border-radius:30px;

font-size:12px;

}

/*=========================================
LATEST POSTS
=========================================*/

.latest-post{

display:flex;

gap:15px;

align-items:center;

text-decoration:none;

padding:12px 0;

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

transition:.3s;

}

.latest-post:last-child{

border-bottom:none;

padding-bottom:0;

}

.latest-post img{

width:85px;

height:75px;

border-radius:12px;

object-fit:cover;

flex-shrink:0;

transition:.3s;

}

.latest-post:hover img{

transform:scale(1.05);

}

.latest-post h6{

margin:0 0 8px;

font-size:16px;

line-height:1.5;

color:var(--dark);

transition:.3s;

}

.latest-post:hover h6{

color:var(--primary);

}

.latest-post small{

color:var(--text);

font-size:13px;

}

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

.newsletter-box{

background:linear-gradient(135deg,#162235,#24364F);

color:#fff;

}

.newsletter-box h4{

font-size:26px;

margin-bottom:15px;

}

.newsletter-box p{

opacity:.9;

line-height:1.8;

margin-bottom:20px;

}

.newsletter-box input{

height:54px;

border-radius:12px;

border:none;

padding:15px;

}

.newsletter-box .btn-brand{

margin-top:15px;

}

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

.sidebar-social{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.sidebar-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#EAF6FD;

color:var(--primary);

transition:.3s;

text-decoration:none;

}

.sidebar-social a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

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

.pagination{

gap:10px;

margin-top:50px;

}

.pagination .page-link{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border:none;

border-radius:12px;

color:var(--dark);

background:#fff;

box-shadow:0 6px 20px rgba(0,0,0,.05);

transition:.3s;

}

.pagination .page-item.active .page-link{

background:var(--primary);

color:#fff;

}

.pagination .page-link:hover{

background:var(--primary);

color:#fff;

}

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

@media(max-width:991px){

.blog-page{

padding:60px 0;

}

.blog-sidebar{

margin-top:40px;

}

.sidebar-widget{

padding:24px;

}

}

@media(max-width:767px){

.blog-content{

padding:22px;

}

.blog-content h3{

font-size:20px;

}

.latest-post{

align-items:flex-start;

}

.latest-post img{

width:70px;

height:65px;

}

.widget-title{

font-size:20px;

}

}

@media(max-width:575px){

.blog-page{

padding:50px 0;

}

.sidebar-widget{

padding:20px;

}

.blog-content{

padding:20px;

}

.blog-content h3{

font-size:18px;

}

.blog-meta{

font-size:13px;

}

.search-form input{

height:50px;

}

.newsletter-box h4{

font-size:22px;

}

.sidebar-social{

justify-content:center;

}

.pagination{

gap:8px;

}

.pagination .page-link{

width:42px;

height:42px;

font-size:14px;

}

}