/* Quran Haven - compact natural titles V3 */

/* =========================
   PROGRAM PAGE TITLE
========================= */

.program-details-content h1,
.program-details-title {
    font-size: clamp(28px, 2vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    max-width: 1000px !important;
}

/* =========================
   PROGRAM WHATSAPP BUTTON
========================= */

.program-details-hero a.btn.btn-success,
.program-details-hero a.btn.btn-success.btn-lg,
.program-details-content a.btn.btn-success,
.program-details-content a.btn.btn-success.btn-lg {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;

    padding: 5px 10px !important;

    border-radius: 6px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}

.program-details-hero a.btn.btn-success .bi-whatsapp,
.program-details-content a.btn.btn-success .bi-whatsapp {
    font-size: 13px !important;
    width: auto !important;
    height: auto !important;
    margin-right: 5px !important;
}

/* =========================
   BLOG ARTICLE TITLE
========================= */

.blog-article-heading h1,
.blog-article-heading > h1 {
    font-size: clamp(28px, 2.1vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;

    max-width: 900px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

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

@media (max-width: 991.98px) {

    .program-details-content h1,
    .program-details-title,
    .blog-article-heading h1 {
        font-size: 28px !important;
    }
}

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

@media (max-width: 575.98px) {

    .program-details-content h1,
    .program-details-title,
    .blog-article-heading h1 {
        font-size: 24px !important;
        line-height: 1.22 !important;
    }

    .program-details-hero a.btn.btn-success,
    .program-details-hero a.btn.btn-success.btn-lg,
    .program-details-content a.btn.btn-success,
    .program-details-content a.btn.btn-success.btn-lg {
        min-height: 28px !important;
        padding: 4px 9px !important;
        font-size: 11.5px !important;
    }

    .program-details-hero a.btn.btn-success .bi-whatsapp,
    .program-details-content a.btn.btn-success .bi-whatsapp {
        font-size: 12px !important;
    }
}


/* =========================================================
   BLOG ARTICLE TITLE SMALLER V4
========================================================= */

.blog-article-heading h1,
.blog-article-heading > h1 {
    font-size: clamp(24px, 1.7vw, 28px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.005em !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 991.98px) {
    .blog-article-heading h1,
    .blog-article-heading > h1 {
        font-size: 25px !important;
    }
}

@media (max-width: 575.98px) {
    .blog-article-heading h1,
    .blog-article-heading > h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
}

/* BLOG ARTICLE TITLE SMALLER V4 END */


/* =========================================================
   BLOG INNER HEADINGS V5
========================================================= */

/* Main section headings inside article content */
.blog-article-content h2,
.blog-post-content h2,
.article-content h2,
.blog-content h2 {
    font-size: 25px !important;
    line-height: 1.28 !important;
    margin-top: 34px !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.005em !important;
}

/* Smaller subheadings inside article content */
.blog-article-content h3,
.blog-post-content h3,
.article-content h3,
.blog-content h3 {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-top: 26px !important;
    margin-bottom: 12px !important;
}

/* Mobile */
@media (max-width: 575.98px) {

    .blog-article-content h2,
    .blog-post-content h2,
    .article-content h2,
    .blog-content h2 {
        font-size: 22px !important;
    }

    .blog-article-content h3,
    .blog-post-content h3,
    .article-content h3,
    .blog-content h3 {
        font-size: 18px !important;
    }
}

/* BLOG INNER HEADINGS V5 END */