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

/* HERO */

.blog-hero{

 
min-height:70vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

overflow:hidden;

background:
linear-gradient(
    135deg,
    #050816,
    #0f172a
);
 

}

.blog-hero::before{

 
content:"";

position:absolute;

width:600px;
height:600px;

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

border-radius:50%;

top:-200px;
right:-200px;

filter:blur(80px);
 

}

.hero-badge{

 
display:inline-block;

padding:12px 25px;

border-radius:50px;

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

border:
1px solid rgba(255,255,255,.08);

color:#00d4ff;

margin-bottom:25px;
 

}

.page-title{

 
font-size:4rem;

font-weight:800;

color:white;

margin-bottom:20px;
 

}

.page-description{

 
max-width:800px;

margin:auto;

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

font-size:1.15rem;
 

}

/* SEARCH */

.blog-search-section{

 
padding:60px 0;
 

}

.search-wrapper{

 
max-width:700px;

margin:auto;
 

}

#blogSearch{

 
height:60px;

border-radius:50px;

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

border:
1px solid rgba(255,255,255,.08);

color:white;

padding-left:25px;

backdrop-filter:blur(20px);
 

}

#blogSearch:focus{

 
border-color:#00d4ff;

box-shadow:none;
 

}

/* FEATURED BLOG */

.featured-blog-section{

 
padding:60px 0 120px;
 

}

.featured-blog-card{

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

backdrop-filter:
blur(20px);

border:
1px solid rgba(255,255,255,.08);

border-radius:30px;

overflow:hidden;

padding:30px;

transition:.5s;
 

}

.featured-blog-card:hover{

 
transform:
translateY(-8px);
 

}

.featured-blog-image{

 
width:100%;

height:450px;

object-fit:cover;

border-radius:20px;
 

}

.featured-label{

 
display:inline-block;

padding:8px 18px;

border-radius:50px;

background:
rgba(0,212,255,.15);

color:#00d4ff;

margin-bottom:20px;
 

}

.featured-blog-card h2{

 
color:white;

font-size:2.8rem;

margin-bottom:20px;
 

}

.featured-blog-card p{

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

margin-bottom:25px;
 

}

/* BLOG GRID */

.blog-grid-section{

 
padding:120px 0;
 

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

.blog-card{

    position: relative;

    height: 100%;

    background: #101827;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 25px;

    overflow: hidden;

    transition: all .4s ease;

    opacity: 1 !important;

    filter: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

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

}

.blog-card:hover{

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0,0,0,.35);

    border-color: rgba(0,212,255,.35);

}

.blog-image{

    overflow: hidden;

    background: #0f172a;

}

.blog-image img{

    width: 100%;

    height: 260px;

    object-fit: cover;

    display: block;

    opacity: 1 !important;

    filter: none !important;

    transition: transform .5s ease;

}

.blog-card:hover .blog-image img{

    transform: scale(1.06);

}

.blog-content{

    padding: 25px;

    background: #101827;

}

.blog-category{

    display: inline-block;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(0,212,255,.15);

    color: #00d4ff;

    font-size: .85rem;

    font-weight: 600;

    margin-bottom: 15px;

}

.blog-content h4{

    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 700;

    line-height: 1.4;

    min-height: 65px;

    margin-bottom: 15px;

}

.blog-content p{

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

    line-height: 1.7;

    margin-bottom: 20px;

}

.blog-meta{

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

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

    font-size: .9rem;

}

.blog-meta i{

    color: #00d4ff;

}

.read-more-btn{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #00d4ff;

    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;

}

.read-more-btn:hover{

    color: #ffffff;

}

.read-more-btn i{

    transition: transform .3s ease;

}

.read-more-btn:hover i{

    transform: translateX(6px);

}

/* CATEGORIES */

.blog-categories-section{

 
padding:120px 0;
 

}

.category-grid{

 
display:grid;

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

gap:25px;
 

}

.category-card{

 
text-align:center;

padding:50px 20px;

border-radius:25px;

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

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:
blur(20px);

transition:.4s;

font-size:2rem;
 

}

.category-card:hover{

 
transform:
translateY(-10px);

background:
rgba(0,212,255,.1);
 

}

.category-card h5{

 
color:white;

margin-top:20px;
 

}

/* NEWSLETTER */

.newsletter-section{

 
padding:140px 0;

text-align:center;
 

}

.newsletter-section h2{

 
color:white;

font-size:3rem;

margin-bottom:20px;
 

}

.newsletter-section p{

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

margin-bottom:35px;
 

}

.newsletter-form{

 
max-width:700px;

margin:auto;

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;
 

}

.newsletter-form input{

 
flex:1;

min-width:300px;

height:60px;

border-radius:50px;

border:
1px solid rgba(255,255,255,.08);

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

color:white;

padding:0 25px;
 

}

.newsletter-form input:focus{

 
outline:none;

border-color:#00d4ff;
 

}

/* SECTION HEADER */

.section-header{

 
margin-bottom:70px;
 

}

.section-tag{

 
color:#00d4ff;

letter-spacing:2px;

font-weight:600;
 

}

.section-header h2{

 
color:white;

font-size:3rem;

margin-top:15px;
 

}

/* ANIMATIONS */

.blog-card,
.category-card,
.featured-blog-card{

 
animation:
fadeUp .8s ease;
 

}

@keyframes fadeUp{

 
from{

    opacity:0;

    transform:
    translateY(40px);
}

to{

    opacity:1;

    transform:
    translateY(0);
}
 

}

/* RESPONSIVE */

@media(max-width:768px){

 
.page-title{

    font-size:2.5rem;
}

.featured-blog-card h2{

    font-size:2rem;
}

.newsletter-section h2{

    font-size:2.2rem;
}

.newsletter-form{

    flex-direction:column;
}

.newsletter-form input{

    min-width:100%;
}
 

}