/* ==========================================================
   Kingdom Publishing House - Responsive Overrides
   Breakpoints requested:
   Mobile       320px - 767px
   Tablet       768px - 999px
   Small laptop 1000px - 1300px
   Laptop       1301px - 1600px
   ========================================================== */

/* Safe fluid defaults */
img,
video,
svg {
    max-width: 100%;
}

video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}
/* 
.container,
.container-fluid {
    max-width: 100%;
} */

/* ------------------------- MOBILE ------------------------- */
@media (min-width: 320px) and (max-width: 767px) {
    html {
        font-size: 15px;
    }

    body {
        text-align: center;
    }

    /* User requirement: lists stay left-aligned on mobile */
    ul,
    ol,
    ul li,
    ol li,
    .navbar-nav,
    .navbar-nav li,
    .foot-links ul,
    .terms-sec ul,
    .services-banner-sec ul,
    .abt-publishing-sec ul,
    .cta-sec ul,
    .framework-sec ol,
    .contact-sec ul {
        text-align: left;
    }

    p,
    li,
    a,
    input,
    textarea,
    button {
        font-size: 14px;
        line-height: 1.65;
    }

    .container,
    .container-fluid {
        padding-left: 18px;
        padding-right: 18px;
    }

    .row {
        --bs-gutter-x: 1.25rem;
    }

    section.upcoming-row,
    section.about-book-row,
    section.portfolio-head-row,
    section.wide-range-row,
    section.story-row,
    section.support-row,
    section.flow-row,
    section.faq-row,
    section.review-row,
    section.abt-value-row,
    section.terms-row,
    section.abt-publishing-row,
    section.publishing-ser-row,
    section.ghostport-row,
    section.framework-row {
        padding: 42px 0;
    }

    .w-head h2,
    .about-sec h2,
    .terms-sec h2,
    .inner-banner-sec h1,
    .portfolio-sec .text h3,
    .framework-head h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .banner-sec h1,
    .about-book-sec h2,
    .cta-sec h2,
    .contact-lft-sec h2,
    .contact-sec h2,
    .abt-publishing-sec h2 {
        font-size: 27px;
        line-height: 1.25;
    }

    .banner-sec h3,
    .story-sec h3 {
        font-size: 23px;
        line-height: 1.3;
    }

    .w-head p,
    .banner-sec p,
    .about-book-sec p,
    .story-sec p,
    .cta-sec p,
    .inner-banner-sec p,
    .abt-publishing-sec p,
    .framework-sec p,
    .terms-sec p {
        font-size: 14px;
        line-height: 1.75;
    }

    /* Top bar */
    .topbar-row {
        padding: 10px 0;
    }

    .topbar-row .container-fluid {
        display: block;
    }

    .top-lft-sec,
    .top-rgt-sec {
        width: 100%;
    }

    .top-lft-sec p {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .top-rgt-sec ul {
        display: block;
        width: min(100%, 430px);
        margin: 0 auto;
    }

    .top-rgt-sec ul li {
        margin: 0 0 7px;
        align-items: flex-start;
        overflow-wrap: anywhere;
    }

    .top-rgt-sec ul li a {
        font-size: 12px;
        line-height: 1.45;
    }

    .top-rgt-sec ul li a svg {
        flex: 0 0 13px;
        margin-top: 3px;
        margin-right: 4px;
    }

    /* Header / mobile navigation */
    header.header-row {
        padding: 8px 20px;
    }

    .navbar {
        padding: 0;
    }

    .navbar-dark .navbar-brand {
        width: 145px;
        max-width: 48%;
    }

    .navbar-toggler {
        padding: 6px 9px;
        border-color: rgba(255,255,255,.45);
        display: block;
        margin: auto;
        margin-right: 0;
    }

    .navbar-collapse {
        margin-top: 12px;
        padding: 14px 4px 8px;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    .navbar-dark .navbar-nav .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 9px 8px;
        font-size: 13px;
        line-height: 1.4;
    }

    .navbar-dark .navbar-nav > li,
    .navbar-dark .navbar-nav > a {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .navbar-dark .navbar-nav li ul.main-drop {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        width: 100%;
        padding: 3px 0 7px 13px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .navbar-dark .navbar-nav li ul.main-drop li a {
        color: #e5e5e5;
        font-size: 12px;
        padding: 6px 8px;
    }

    .navbar-dark .navbar-nav li ul.main-drop li:hover a {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

    .right-menu {
        justify-content: center;
    }

    .right-menu a {
        width: auto;
    }

    .w-btn {
        display: inline-flex;
        justify-content: center;
        font-size: 14px;
        padding: 10px 18px;
    }

    /* Home banner */
    section.banner-row {
        padding: 46px 0;
        background-position: center;
    }

    section.banner-row:before {
        background: #04345c;
        opacity: .94;
    }

    .banner-sec {
        margin-bottom: 28px;
    }

    .banner-sec img {
        width: min(78%, 320px);
    }

    /* Upcoming books */
    section.upcoming-row .row {
        margin: 0;
        row-gap: 22px;
    }

    .upcoming-head,
    .wide-head,
    .story-head,
    .flow-head,
    .support-head,
    .review-head,
    .abt-publishing-head,
    .ghost-port-head {
        margin-bottom: 28px;
    }

    .upcoming-head p,
    .inner-banner-sec p {
        width: 100%;
    }

    .upcoming-sec {
        max-width: 390px;
        margin: 0 auto;
    }

    .upcoming-sec img {
        height: auto;
        max-height: 430px;
        object-fit: contain;
    }

    .upcoming-sec h3 {
        font-size: 20px;
        line-height: 1.25;
    }

    /* About sections */
    section.about-book-row:before,
    section.about-row:before,
    section.cta-row:before,
    section.contact-row:before {
        opacity: .25;
    }

    .about-book-sec,
    .about-lft-sec,
    .about-sec {
        margin-bottom: 24px;
    }

    section.about-row {
        padding: 42px 0;
    }

    .about-sec ul li {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .abt-count {
        max-width: 300px;
        margin: 0 auto 12px;
    }

    .abt-count h3 {
        font-size: 30px;
        line-height: 1.2;
    }

    /* Portfolio */
    .portfolio-main-tabs .nav-pills {
        justify-content: center;
        gap: 10px;
    }

    .portfolio-main-tabs .nav-pills .nav-link {
        font-size: 23px;
        line-height: 1.25;
        margin: 0;
        padding: 4px 0;
    }

    .portfolio-main-tabs .portfolio-tabs .nav-pills .nav-link {
        font-size: 13px;
        line-height: 1.4;
        margin: 0;
        padding: 7px 4px;
    }

    .portfolio-tabs {
        margin-top: 28px;
    }

    .portfolio-main-tabs .portfolio-tabs ul#pills-tab {
        margin-bottom: 28px !important;
    }

    .portfolio-sec {
        flex-direction: column;
        padding: 28px 18px 36px;
    }

    .portfolio-sec .img-box {
        width: min(100%, 300px);
        padding: 20px;
        margin: 0 auto 20px;
    }

    .portfolio-sec .img-box:before {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }

    .portfolio-sec .img-box img {
        height: auto;
        max-height: 390px;
        object-fit: contain;
    }

    .portfolio-sec .text {
        width: 100%;
        margin: 0;
    }

    .portfolio-sec .text .w-btn {
        margin: 22px auto 0;
    }

    /* Service icon list */
    section.wide-range-row:before,
    section.wide-range-row:after,
    section.publishing-ser-row:before,
    section.publishing-ser-row:after,
    section.flow-row:after {
        opacity: .08;
        pointer-events: none;
    }

    .wide-sec ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wide-sec ul li {
        display: block;
        width: 100%;
        min-height: 120px;
        margin: 0;
        padding: 15px 8px;
        font-size: 13px;
        line-height: 1.35;
        text-align: center;
        border-radius: 10px;
    }

    .wide-sec ul li img {
        height: 48px;
        margin-bottom: 8px;
    }

    /* Story / support / flow */
    .story-tabs .nav-pills {
        flex-wrap: wrap;
        gap: 9px;
    }

    .story-tabs .nav-pills .nav-link {
        width: 58px;
        height: 58px;
        margin: 0;
        border-width: 3px;
        font-size: 14px;
    }

    .story-tabs ul#pills-tab {
        margin-bottom: 32px;
    }

    section.support-row .col-lg-5,
    section.support-row .col-lg-2,
    section.flow-row .col-lg-5,
    section.flow-row .col-lg-2 {
        width: 100%;
    }

    .support-box {
        margin-bottom: 18px;
    }

    .support-or-sec h2 {
        margin: 10px 0 26px;
    }

    .support-or-sec h2:before,
    .support-or-sec h2:after {
        display: none;
    }

    .flow-sec {
        flex-direction: column-reverse;
        gap: 12px;
        margin-bottom: 24px;
    }

    .flow-sec .text {
        width: 100%;
        margin: 0;
    }

    .flow-sec svg {
        width: 58px;
        height: auto;
    }

    .flow-sec .text h3 {
        font-size: 20px;
        line-height: 1.35;
    }

    .flow-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }

    .flow-buttons a,
    .cta-sec .flow-buttons a {
        margin: 0;
    }

    /* FAQ */
    .faq-sec img {
        width: min(85%, 330px);
        margin-bottom: 25px;
    }

    .faq-sec .accordion-button,
    .faq-sec .accordion-body,
    .faq-sec .accordion-body p {
        text-align: left;
    }

    /* CTA */
    section.cta-row {
        padding: 42px 0;
    }

    .cta-sec img {
        width: min(90%, 360px);
        margin-top: 25px;
    }

    .cta-sec .flow-buttons {
        justify-content: center;
        text-align: center;
    }

    /* Inner banner */
    section.inner-banner-row {
        padding: 68px 0;
        background-position: center;
    }

    /* Contact */
    section.contact-row {
        padding: 42px 0;
    }

    .contact-lft-sec {
        margin-bottom: 34px;
    }

    .contact-lft-sec .form-group {
        width: 100%;
        text-align: left;
    }

    .contact-lft-sec .w-btn {
        margin: 25px auto 0;
    }

    .contact-sec {
        padding: 24px 18px;
        text-align: left;
    }

    .contact-sec ul li {
        padding-left: 58px;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .contact-sec ul li .icon {
        width: 42px;
        height: 42px;
        line-height: 42px;
    }

    .contact-sec ul li svg {
        width: 20px;
        height: 20px;
    }

    .contact-sec ul li strong {
        font-size: 17px;
    }

    .contact-sec ul li span,
    .contact-sec ul li a {
        font-size: 13px;
    }

    /* Services */
    .services-banner-sec ul li,
    .abt-publishing-sec ul li {
        font-size: 14px;
    }

    .services-banner-sec ul li svg {
        flex: 0 0 24px;
        width: 14px;
        margin-right: 8px;
        height: 14px;
        margin-top: 6px;
    }

    .abt-publishing-sec {
        padding: 22px 18px;
    }

    section.publishing-ser-row .col {
        width: 100%;
        flex: 0 0 100%;
    }

    .publishing-ser-sec {
        max-width: 430px;
        margin: 0 auto 18px;
        text-align: center;
    }

    .publishing-ser-sec img {
        object-position: center;
    }

    .framework-tabs ul#pills-tab {
        gap: 8px;
    }

    .framework-tabs ul#pills-tab .nav-link {
        padding: 10px 12px;
        margin: 0;
        font-size: 12px;
    }

    .framework-sec,
    .terms-sec {
        text-align: left;
    }

    /* Value grid */
    section.abt-value-row .col-lg-4:nth-child(1),
    section.abt-value-row .col-lg-4:nth-child(2),
    section.abt-value-row .col-lg-4:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid #d8d8d8;
    }

    section.abt-value-row .col-lg-4:nth-child(2):after,
    section.abt-value-row .col-lg-4:nth-child(3):after {
        display: none;
    }

    /* Review videos */
    .review-slider video {
        width: 100%;
        height: min(68vh, 420px);
        object-fit: contain;
        border-radius: 12px;
    }

    /* Footer */
    footer.footer-row {
        padding: 42px 0 18px;
    }

    footer.footer-row .col-lg-3 {
        border-left: 0;
        border-bottom: 1px solid #333;
        padding: 0 0 24px;
        margin-bottom: 24px;
    }

    footer.footer-row .col-lg-3:first-child {
        padding-bottom: 24px;
    }

    .foot-cont img.logo {
        width: min(58%, 190px);
    }

    .foot-links {
        max-width: 420px;
        margin: 0 auto;
    }

    .foot-links ul {
        padding-left: 18px;
        border-left: 1px solid #666;
    }

    .copyright-sec {
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    .copyright-sec p {
        font-size: 12px;
        line-height: 1.55;
        margin-bottom: 12px;
    }

    .copyright-sec ul {
        display: inline-block;
        padding-left: 18px;
    }

    .copyright-sec ul li {
        display: block;
        margin: 0 0 6px;
    }
}

/* ------------------------- TABLET ------------------------- */
@media (min-width: 768px) and (max-width: 999px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 740px;
    }

    .topbar-row {
        padding: 10px 20px 7px;
    }

    .top-lft-sec {
        width: 34%;
    }

    .top-rgt-sec {
        width: 64%;
    }

    .top-lft-sec p,
    .top-rgt-sec ul li a {
        font-size: 12px;
    }

    header.header-row {
        padding: 7px 20px;
    }

    /* Keep tablet navigation collapsed, including 992-999px */
    .navbar-expand-lg {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block;
    }

    .navbar-expand-lg .navbar-collapse {
        display: none !important;
        flex-basis: 100%;
    }

    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }

    .navbar-dark .navbar-brand {
        width: 145px;
    }

    .navbar-dark .navbar-nav .nav-link {
        justify-content: space-between;
        padding: 9px 7px;
        font-size: 13px;
    }

    .navbar-dark .navbar-nav li ul.main-drop {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 3px 0 7px 18px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .navbar-dark .navbar-nav li ul.main-drop li a {
        color: #ddd;
        font-size: 12px;
    }

    .right-menu {
        margin-bottom: 8px;
    }

    section.banner-row {
        padding: 58px 0;
    }

    .banner-sec h1 {
        font-size: 36px;
        line-height: 1.25;
    }

    .banner-sec h3 {
        font-size: 28px;
        line-height: 1.25;
    }

    .w-head h2,
    .about-sec h2,
    .terms-sec h2,
    .inner-banner-sec h1,
    .portfolio-sec .text h3 {
        font-size: 36px;
        line-height: 1.2;
    }

    section.upcoming-row,
    section.support-row {
        padding: 70px 0;
    }

    section.upcoming-row .row {
        margin: 0;
        row-gap: 24px;
    }

    .upcoming-head p,
    .inner-banner-sec p {
        width: 85%;
    }

    .upcoming-sec img {
        height: 360px;
        object-fit: contain;
    }

    .portfolio-main-tabs .nav-pills .nav-link {
        font-size: 34px;
        line-height: 1.25;
        margin-right: 22px;
    }

    .portfolio-main-tabs .portfolio-tabs .nav-pills .nav-link {
        font-size: 14px;
        margin-right: 25px;
    }

    .portfolio-sec .img-box {
        width: 34%;
        padding-left: 15px;
    }

    .portfolio-sec .img-box:before {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }

    .portfolio-sec .img-box img {
        height: 370px;
    }

    .portfolio-sec .text {
        width: 66%;
        margin-right: 25px;
    }

    .wide-sec ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .wide-sec ul li {
        width: 100%;
        margin: 0;
        padding: 15px 8px;
        font-size: 16px;
    }

    .story-tabs .nav-pills .nav-link {
        width: 68px;
        height: 68px;
        font-size: 16px;
        margin: 0 6px;
    }

    section.support-row .col-lg-5 {
        width: 45%;
    }

    section.support-row .col-lg-2 {
        width: 10%;
    }

    section.flow-row .col-lg-5 {
        width: 44%;
    }

    section.flow-row .col-lg-2 {
        width: 12%;
    }

    .flow-sec .text h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    .flow-sec svg {
        width: 21%;
    }

    section.cta-row,
    section.contact-row {
        padding: 38px 35px;
    }

    .cta-sec h2,
    .contact-lft-sec h2,
    .contact-sec h2 {
        font-size: 29px;
        line-height: 1.3;
    }

    .cta-sec img {
        width: 110%;
    }

    section.about-row {
        padding: 50px 20px;
    }

    section.publishing-ser-row .col {
        width: 50%;
        flex: 0 0 50%;
    }

    .framework-tabs ul#pills-tab .nav-link {
        padding: 12px 18px;
    }

    .review-slider video {
        height: 330px;
        object-fit: contain;
    }

    footer.footer-row .col-lg-3 {
        border-left: 0;
        padding-left: 12px;
        margin-bottom: 28px;
    }

    .copyright-sec {
        gap: 20px;
    }
}

/* ---------------------- SMALL LAPTOP ---------------------- */
@media (min-width: 1000px) and (max-width: 1300px) {
    .container {
        max-width: 960px;
    }

    .topbar-row {
        padding: 10px 32px 7px;
    }

    .top-lft-sec p,
    .top-rgt-sec ul li a {
        font-size: 13px;
    }

    header.header-row {
        padding: 7px 32px;
    }

    /* Many menu items: collapsed state is cleaner up to 1300px */
    .navbar-expand-lg {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block;
    }

    .navbar-expand-lg .navbar-collapse {
        display: none !important;
        flex-basis: 100%;
    }

    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }

    .navbar-dark .navbar-brand {
        width: 145px;
    }

    .navbar-dark .navbar-nav .nav-link {
        justify-content: space-between;
        padding: 9px 8px;
        font-size: 13px;
    }

    .navbar-dark .navbar-nav li ul.main-drop {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 3px 0 7px 20px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .navbar-dark .navbar-nav li ul.main-drop li a {
        color: #ddd;
        font-size: 12px;
    }

    .right-menu {
        margin-bottom: 8px;
    }

    .banner-sec h1 {
        font-size: 38px;
        line-height: 1.25;
    }

    .banner-sec h3 {
        font-size: 30px;
        line-height: 1.25;
    }

    .w-head h2,
    .about-sec h2,
    .terms-sec h2,
    .inner-banner-sec h1,
    .portfolio-sec .text h3 {
        font-size: 40px;
        line-height: 1.22;
    }

    section.upcoming-row .row {
        margin: 0 25px;
    }

    .upcoming-sec img {
        height: 380px;
        object-fit: contain;
    }

    .portfolio-main-tabs .nav-pills .nav-link {
        font-size: 39px;
        line-height: 1.3;
        margin-right: 26px;
    }

    .portfolio-main-tabs .portfolio-tabs .nav-pills .nav-link {
        font-size: 15px;
        margin-right: 35px;
    }

    .portfolio-sec .img-box {
        width: 30%;
    }

    .portfolio-sec .img-box:before {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }

    .portfolio-sec .text {
        width: 70%;
        margin-right: 35px;
    }

    .wide-sec ul li {
        width: 19%;
        font-size: 16px;
    }

    section.cta-row {
        padding: 28px 100px;
    }

    section.contact-row {
        padding: 34px 90px;
    }

    section.about-row {
        padding: 50px 28px;
    }

    .contact-sec {
        padding: 20px 30px;
    }

    section.publishing-ser-row .col {
        width: 33.333%;
        flex: 0 0 33.333%;
    }

    .review-slider video {
        height: 340px;
        object-fit: contain;
    }

    footer.footer-row .col-lg-3 {
        padding-left: 20px;
    }
}

/* -------------------------- LAPTOP ------------------------ */
@media (min-width: 1301px) and (max-width: 1600px) {
    .container {
        max-width: 1200px;
    }

    .topbar-row {
        padding: 10px 55px 6px;
    }

    .top-lft-sec {
        width: 35%;
    }

    .top-rgt-sec {
        width: 62%;
    }

    .top-lft-sec p,
    .top-rgt-sec ul li a {
        font-size: 14px;
    }

    header.header-row {
        padding: 0 28px;
    }

    .navbar-dark .navbar-brand {
        width: 110px;
        flex: 0 0 110px;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-size: 14px;
        padding: 0 8px;
    }

    .navbar-dark .navbar-nav .nav-link svg {
        width: 10px;
        height: 10px;
        margin-left: 6px;
    }

    .right-menu .w-btn {
        font-size: 14px;
        padding: 10px 15px;
        white-space: nowrap;
    }

    section.upcoming-row .row {
        margin: 0 45px;
    }

    .portfolio-main-tabs .nav-pills .nav-link {
        font-size: 43px;
        margin-right: 30px;
    }

    .portfolio-main-tabs .portfolio-tabs .nav-pills .nav-link {
        font-size: 15px;
        margin-right: 45px;
    }

    section.cta-row {
        padding: 20px 155px;
    }

    section.contact-row {
        padding: 30px 70px;
    }

    .review-slider video {
        height: 350px;
        object-fit: contain;
    }
    section.flow-row:after {
        bottom: -110px;
    }
    section.support-row .row.align-items-end {
        align-items: center !important;
    }
    .support-or-sec h2 {
        margin-bottom: 0;
    }
    section.wide-range-row:before {
        left: -100px;
    }
}