:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-884af2f *//* =========================================================
   WPMINNER BLOG PAGE HERO
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

/* Ye variables Blog page ke main colors ko ek jagah manage karte hain */
.wpm-blog-hero {
    --wpm-bg: #f7f6f2;
    --wpm-text: #202020;
    --wpm-muted: #6f6f6f;
    --wpm-accent: #f2b51d;
    --wpm-accent-dark: #d99c00;
    --wpm-border: #e4e1d9;
    --wpm-label-bg: #f7e9bd;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--wpm-bg);
    border-bottom: 1px solid var(--wpm-border);
}


/* Ye subtle yellow glow hero ko homepage jaisa warm visual feel deta hai */
.wpm-blog-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(242, 181, 29, 0.09);
    filter: blur(10px);
    pointer-events: none;
}


/* Ye container content ko center aur controlled width mein rakhta hai */
.wpm-blog-hero__container {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 1200px);
    margin: 0 auto;
    padding: 72px 0 78px;
}


/* =========================================================
   BREADCRUMB
========================================================= */


/* Ye breadcrumb ke tamam items ko ek line mein arrange karta hai */
.wpm-blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    font-size: 13px;
    line-height: 1.5;
}


/* Ye Home breadcrumb link ka style hai */
.wpm-blog-breadcrumb a {
    color: var(--wpm-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}


/* Ye hover par breadcrumb link ko yellow accent deta hai */
.wpm-blog-breadcrumb a:hover {
    color: var(--wpm-accent-dark);
}


/* Ye breadcrumb separator ka style control karta hai */
.wpm-blog-breadcrumb__separator {
    color: #a9a9a9;
}


/* Ye current Blog page ko darker text mein show karta hai */
.wpm-blog-breadcrumb__current {
    color: var(--wpm-text);
    font-weight: 600;
}


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


/* Ye chota category label homepage ke eyebrow style ko follow karta hai */
.wpm-blog-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 11px;
    border-radius: 3px;
    background: var(--wpm-label-bg);
    color: #4e421f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.7px;
}


/* Ye Blog page ke main title ka desktop style hai */
.wpm-blog-hero__title {
    max-width: 760px;
    margin: 0;
    color: var(--wpm-text);
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 750;
    line-height: 1.03;
    letter-spacing: -2.4px;
}


/* Ye title ke important Tech Blog words ko WP Minner yellow color deta hai */
.wpm-blog-hero__title span {
    color: var(--wpm-accent-dark);
}


/* Ye title ke niche SEO description ka style control karta hai */
.wpm-blog-hero__description {
    max-width: 760px;
    margin: 22px 0 0;
    color: var(--wpm-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}


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


/* Ye tablet screens par spacing aur typography ko adjust karta hai */
@media (max-width: 991px) {

    /* Ye tablet par hero ki vertical spacing kam karta hai */
    .wpm-blog-hero__container {
        padding: 58px 0 62px;
    }


    /* Ye tablet par title letter spacing ko balanced rakhta hai */
    .wpm-blog-hero__title {
        letter-spacing: -1.8px;
    }

}


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


/* Ye mobile screens ke liye hero ko properly optimize karta hai */
@media (max-width: 767px) {

    /* Ye mobile par container ki side spacing control karta hai */
    .wpm-blog-hero__container {
        width: min(100% - 30px, 1200px);
        padding: 42px 0 48px;
    }


    /* Ye mobile par breadcrumb ka bottom gap reduce karta hai */
    .wpm-blog-breadcrumb {
        margin-bottom: 24px;
        font-size: 12px;
    }


    /* Ye mobile par eyebrow text ko compact rakhta hai */
    .wpm-blog-hero__eyebrow {
        margin-bottom: 14px;
        padding: 7px 9px;
        font-size: 9px;
        letter-spacing: 0.5px;
    }


    /* Ye mobile par title ko readable aur balanced size deta hai */
    .wpm-blog-hero__title {
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.05;
        letter-spacing: -1.5px;
    }


    /* Ye mobile par description ki readability improve karta hai */
    .wpm-blog-hero__description {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.75;
    }


    /* Ye mobile par background glow ko chota karta hai */
    .wpm-blog-hero::before {
        top: -120px;
        right: -180px;
        width: 340px;
        height: 340px;
    }

}


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


/* Ye bohat choti mobile screens par extra adjustment karta hai */
@media (max-width: 420px) {

    /* Ye small mobile par hero ki horizontal spacing maintain karta hai */
    .wpm-blog-hero__container {
        width: calc(100% - 24px);
    }


    /* Ye small mobile par main title ko overflow hone se bachata hai */
    .wpm-blog-hero__title {
        font-size: 35px;
    }


    /* Ye small mobile par description ko thora compact rakhta hai */
    .wpm-blog-hero__description {
        font-size: 14px;
    }

}/* End custom CSS */