/*==================================================
BLOG - GLOBAL STYLES
==================================================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#0f172a;
    --text:#334155;
    --light:#f8fafc;
    --border:#e2e8f0;
    --radius:18px;
    --shadow:0 12px 40px rgba(0,0,0,.08);

}

section{

    padding:50px 0;

}

.section-header{

    text-align:center;

    margin-bottom:50px;

}

.section-header h2{

    font-size:38px;

    color:var(--secondary);

    font-weight:700;

    margin-bottom:15px;

}

.section-header p{

    font-size:17px;

    color:#64748b;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}



/*==================================================
HERO SECTION
==================================================*/

.blog-hero{

    background:linear-gradient(135deg,#eff6ff,#ffffff);

    overflow:hidden;

    position:relative;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    padding:10px 20px;

    background:#dbeafe;

    color:#2563eb;

    font-size:14px;

    font-weight:600;

    border-radius:100px;

    margin-bottom:25px;

}

.hero-left h1{

    font-size:52px;

    line-height:1.15;

    margin-bottom:25px;

    color:#0f172a;

}

.hero-left p{

    font-size:18px;

    color:#64748b;

    line-height:1.9;

    margin-bottom:35px;

}



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

.hero-search{

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

    box-shadow:var(--shadow);

    margin-bottom:35px;

}

.hero-search input{

    flex:1;

    border:none;

    padding:18px 25px;

    font-size:16px;

    outline:none;

    background:none;

}

.hero-search button{

    border:none;

    background:var(--primary);

    color:#fff;

    padding:18px 35px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.hero-search button:hover{

    background:var(--primary-dark);

}



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

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.hero-tags a{

    padding:10px 22px;

    background:#fff;

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

    border-radius:50px;

    text-decoration:none;

    color:#334155;

    font-weight:500;

    transition:.3s;

}

.hero-tags a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}



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

.hero-right{

    text-align:center;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:550px;

    border-radius:25px;

    display:block;

    margin:auto;

}



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

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/*==================================================
TRENDING TUTORIALS
==================================================*/

.trending-section{

    padding:60px 0;

    background:#ffffff;

}

.trending-grid{

    display:grid;

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

    gap:20px;

}

.trending-grid a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

    background:#fff;

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

    border-radius:14px;

    text-decoration:none;

    color:#0f172a;

    font-weight:600;

    transition:.35s;

    box-shadow:0 8px 25px rgba(15,23,42,.04);

}

.trending-grid a::before{

    content:"🔥";

    font-size:18px;

}

.trending-grid a:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    color:var(--primary);

    box-shadow:0 18px 35px rgba(37,99,235,.15);

}



/*==================================================
POPULAR THIS WEEK
==================================================*/

.popular-week{

    background:#f8fafc;

}

.popular-grid{

    display:grid;

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

    gap:30px;

}

.popular-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    background:#fff;

    border-radius:18px;

    padding:25px;

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

    transition:.35s;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

}

.popular-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(37,99,235,.15);

    border-color:var(--primary);

}

.popular-number{

    width:65px;

    height:65px;

    min-width:65px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.popular-content{

    flex:1;

}

.popular-content h3{

    margin:0 0 12px;

    font-size:22px;

    line-height:1.4;

}

.popular-content h3 a{

    text-decoration:none;

    color:#0f172a;

    transition:.3s;

}

.popular-content h3 a:hover{

    color:var(--primary);

}

.popular-content p{

    color:#64748b;

    line-height:1.8;

    margin:0;

}



/*==================================================
COMMON CARD EFFECT
==================================================*/

.article-card,

.category-card,

.tool-card,

.why-card,

.stat-card{

    transition:.35s;

}

.article-card:hover,

.category-card:hover,

.tool-card:hover,

.why-card:hover,

.stat-card:hover{

    transform:translateY(-8px);

}



/*==================================================
VIEW ALL BUTTON
==================================================*/

.view-all-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    text-decoration:none;

    background:#2563eb;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.view-all-btn:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}



/*==================================================
SECTION TITLE FLEX
==================================================*/

.section-title{

    flex:1;

}

.section-action{

    display:flex;

    align-items:center;

    justify-content:flex-end;

}

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    text-align:left;

}

/*==================================================
FEATURED ARTICLE
==================================================*/

.featured-article-section{

    padding:80px 0;

    background:#ffffff;

}

.featured-article-card{

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:50px;

    background:#fff;

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

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.featured-article-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(37,99,235,.15);

}

.featured-image{

    overflow:hidden;

    height:100%;

}

.featured-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.featured-article-card:hover .featured-image img{

    transform:scale(1.05);

}

.featured-content{

    padding:45px;

}

.featured-category{

    display:inline-block;

    padding:8px 18px;

    background:#dbeafe;

    color:#2563eb;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.featured-content h2{

    font-size:38px;

    line-height:1.3;

    margin:0 0 20px;

}

.featured-content h2 a{

    color:#0f172a;

    text-decoration:none;

    transition:.3s;

}

.featured-content h2 a:hover{

    color:var(--primary);

}

.featured-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:25px;

    color:#64748b;

    font-size:15px;

}

.featured-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.featured-meta i{

    color:var(--primary);

}

.featured-content p{

    color:#64748b;

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

.featured-content .btn-primary{

    font-size:16px;

}

.featured-content .btn-primary i{

    transition:.3s;

}

.featured-content .btn-primary:hover i{

    transform:translateX(5px);

}



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

.featured-image img{

    background:#f1f5f9;

}



/*==================================================
SECTION SPACING
==================================================*/

.featured-article-section .section-header{

    margin-bottom:45px;

}

/*==================================================
LATEST ARTICLES
==================================================*/

.latest-articles-section{

    padding:80px 0;

    background:#f8fafc;

}

.articles-grid{

    display:grid;

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

    gap:30px;

    margin-top:45px;

}

.article-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    box-shadow:0 12px 35px rgba(15,23,42,.06);

    transition:.35s;

}

.article-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(37,99,235,.15);

}

.article-image{

    display:block;

    overflow:hidden;

}

.article-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.45s;

    display:block;

}

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

    transform:scale(1.08);

}

.article-content{

    padding:25px;

}

.article-category{

    display:inline-block;

    padding:7px 15px;

    background:#dbeafe;

    color:#2563eb;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.article-content h3{

    font-size:24px;

    line-height:1.45;

    margin-bottom:18px;

}

.article-content h3 a{

    color:#0f172a;

    text-decoration:none;

    transition:.3s;

}

.article-content h3 a:hover{

    color:#2563eb;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:18px;

    color:#64748b;

    font-size:14px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:7px;

}

.article-meta i{

    color:#2563eb;

}

.article-content p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

    min-height:85px;

}

.read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:600;

    color:#2563eb;

    transition:.3s;

}

.read-more i{

    transition:.3s;

}

.read-more:hover{

    color:#1d4ed8;

}

.read-more:hover i{

    transform:translateX(6px);

}



/*==================================================
NO POSTS
==================================================*/

.no-posts{

    grid-column:1/-1;

    text-align:center;

    padding:70px 20px;

    background:#fff;

    border-radius:20px;

    border:2px dashed #dbeafe;

}

.no-posts h3{

    font-size:30px;

    margin-bottom:15px;

    color:#0f172a;

}

.no-posts p{

    color:#64748b;

    font-size:16px;

}



/*==================================================
VIEW ALL BUTTON
==================================================*/

.section-action{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.view-all-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 26px;

    border-radius:50px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.view-all-btn:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}

.view-all-btn i{

    transition:.3s;

}

.view-all-btn:hover i{

    transform:translateX(5px);

}

/*==================================================
BROWSE CATEGORIES
==================================================*/

.browse-categories{

    padding:80px 0;

    background:#ffffff;

}

.category-grid{

    display:grid;

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

    gap:25px;

    margin-top:45px;

}

.category-card{

    background:#fff;

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

    border-radius:20px;

    padding:28px;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 12px 30px rgba(15,23,42,.05);

    transition:.35s;

}

.category-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:0 22px 45px rgba(37,99,235,.15);

}

.category-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#dbeafe;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563eb;

    font-size:26px;

    flex-shrink:0;

}

.category-content{

    flex:1;

}

.category-content h3{

    margin:0 0 8px;

    font-size:20px;

    color:#0f172a;

}

.category-content p{

    margin:0;

    color:#64748b;

    font-size:15px;

}

.category-arrow{

    color:#2563eb;

    font-size:18px;

    transition:.3s;

}

.category-card:hover .category-arrow{

    transform:translateX(5px);

}



/*==================================================
FEATURED TOOLS
==================================================*/

.featured-tools{

    padding:90px 0;

    background:#f8fafc;

}

.tools-grid{

    display:grid;

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

    gap:30px;

    margin-top:45px;

}

.tool-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

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

    box-shadow:0 12px 35px rgba(15,23,42,.06);

    transition:.35s;

}

.tool-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(37,99,235,.15);

    border-color:#2563eb;

}

.tool-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:20px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

}

.tool-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:#0f172a;

}

.tool-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:30px;

    min-height:90px;

}

.tool-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 26px;

    background:#2563eb;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.tool-btn:hover{

    background:#1d4ed8;

}

.tool-btn i{

    transition:.3s;

}

.tool-btn:hover i{

    transform:translateX(5px);

}



/*==================================================
TOOLS CTA
==================================================*/

.tools-cta{

    margin-top:70px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    border-radius:25px;

    padding:60px;

    text-align:center;

    color:#fff;

}

.tools-cta h3{

    font-size:36px;

    margin-bottom:18px;

}

.tools-cta p{

    max-width:750px;

    margin:0 auto 35px;

    line-height:1.9;

    opacity:.95;

}

.tools-cta .btn-primary{

    background:#fff;

    color:#2563eb;

}

.tools-cta .btn-primary:hover{

    background:#eff6ff;

}

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

.newsletter-section{

    padding:90px 0;

    background:#ffffff;

}

.newsletter-wrapper{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:50px;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    border-radius:28px;

    padding:60px;

    color:#fff;

    overflow:hidden;

}

.newsletter-badge{

    display:inline-block;

    padding:10px 18px;

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

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.newsletter-left h2{

    font-size:42px;

    line-height:1.25;

    margin-bottom:20px;

}

.newsletter-left p{

    font-size:17px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:35px;

}



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

.newsletter-input{

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

}

.newsletter-input input{

    flex:1;

    border:none;

    padding:18px 24px;

    font-size:16px;

    outline:none;

    background:none;

}

.newsletter-input button{

    border:none;

    background:#0f172a;

    color:#fff;

    padding:18px 32px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.newsletter-input button:hover{

    background:#020617;

}



/*==================================================
STATS GRID
==================================================*/

.stats-grid{

    display:grid;

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

    gap:20px;

}

.stat-card{

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

    backdrop-filter:blur(8px);

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    background:#fff;

    color:#2563eb;

}

.stat-icon{

    width:65px;

    height:65px;

    margin:auto auto 18px;

    border-radius:18px;

    background:#fff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.stat-card h3{

    font-size:34px;

    margin-bottom:8px;

}

.stat-card p{

    font-size:15px;

}



/*==================================================
WHY WEBTOOLRUSH
==================================================*/

.why-webtoolrush{

    padding:90px 0;

    background:#f8fafc;

}

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:45px;

}

.why-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

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

    box-shadow:0 12px 35px rgba(15,23,42,.05);

}

.why-card i{

    width:75px;

    height:75px;

    margin:auto auto 25px;

    border-radius:20px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.why-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:#0f172a;

}

.why-card p{

    color:#64748b;

    line-height:1.8;

}



/*==================================================
SMALL ANIMATIONS
==================================================*/

.tool-card,
.article-card,
.category-card,
.why-card,
.popular-card,
.featured-article-card{

    transition:all .35s ease;

}

.tool-card:hover,
.article-card:hover,
.category-card:hover,
.why-card:hover,
.popular-card:hover,
.featured-article-card:hover{

    transform:translateY(-10px);

}



/*==================================================
SECTION SPACING FIX
==================================================*/

.blog-hero,
.trending-section,
.popular-week,
.featured-article-section,
.latest-articles-section,
.browse-categories,
.featured-tools,
.newsletter-section,
.why-webtoolrush{

    position:relative;

}

.section-header{

    margin-bottom:45px;

}


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


/********************************
Large Laptop
********************************/

@media (max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-tags{

justify-content:center;

}

.hero-search{

max-width:700px;

margin:35px auto;

}

.hero-right{

margin-top:20px;

}

.featured-article-card{

grid-template-columns:1fr;

}

.newsletter-wrapper{

grid-template-columns:1fr;

}

.section-header{

flex-direction:column;

text-align:center;

}

.section-action{

justify-content:center;

}

}



/********************************
Tablet
********************************/

@media (max-width:992px){

.hero-left h1{

font-size:42px;

}

.hero-left p{

font-size:17px;

}

.articles-grid{

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

}

.category-grid{

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

}

.tools-grid{

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

}

.why-grid{

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

}

.trending-grid{

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

}

.popular-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.featured-content{

padding:35px;

}

.featured-content h2{

font-size:32px;

}

.newsletter-left h2{

font-size:34px;

}

}



/********************************
Mobile
********************************/

@media (max-width:768px){

section{

padding:60px 0;

}

.section-header h2{

font-size:30px;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:16px;

}

.hero-search{

flex-direction:column;

border-radius:18px;

}

.hero-search input{

padding:18px;

}

.hero-search button{

width:100%;

padding:18px;

border-radius:0;

}

.hero-tags{

justify-content:center;

}

.hero-tags a{

font-size:14px;

padding:10px 18px;

}

.articles-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.tools-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.trending-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.newsletter-wrapper{

padding:35px;

}

.newsletter-input{

flex-direction:column;

border-radius:18px;

}

.newsletter-input input{

padding:18px;

}

.newsletter-input button{

width:100%;

padding:18px;

}

.featured-content{

padding:25px;

}

.featured-content h2{

font-size:28px;

}

.featured-meta{

gap:12px;

font-size:14px;

}

.article-content h3{

font-size:22px;

}

.tool-card{

padding:28px;

}

.tools-cta{

padding:40px 25px;

}

.tools-cta h3{

font-size:30px;

}

.newsletter-left h2{

font-size:30px;

}

.stat-card{

padding:25px;

}

.why-card{

padding:28px;

}

}



/********************************
Small Mobile
********************************/

@media (max-width:576px){

.container{

padding-left:18px;

padding-right:18px;

}

.hero-left h1{

font-size:30px;

line-height:1.3;

}

.hero-badge{

font-size:13px;

}

.hero-tags{

gap:10px;

}

.hero-tags a{

font-size:13px;

padding:8px 14px;

}

.section-header h2{

font-size:28px;

}

.featured-content h2{

font-size:24px;

}

.article-content{

padding:20px;

}

.article-content h3{

font-size:20px;

}

.category-card{

padding:22px;

}

.category-icon{

width:55px;

height:55px;

font-size:22px;

}

.tool-icon{

width:70px;

height:70px;

font-size:30px;

}

.newsletter-left h2{

font-size:26px;

}

.newsletter-left p{

font-size:15px;

}

.tools-cta h3{

font-size:26px;

}

.stat-card h3{

font-size:28px;

}

}



/********************************
Animation
********************************/

@media (prefers-reduced-motion:no-preference){

.article-card,

.tool-card,

.category-card,

.why-card,

.popular-card,

.featured-article-card{

transition:all .35s ease;

}

}