/* =============================================================
   RESPONSIVE.CSS — Premier Author Publishing
   Bootstrap 5 Breakpoints:
   xxl  → max-width: 1399.98px
   xl   → max-width: 1199.98px
   lg   → max-width: 991.98px
   md   → max-width: 767.98px
   sm   → max-width: 575.98px
============================================================= */


/* ─────────────────────────────────────────────
   XXL — max-width: 1399.98px
   (Large desktops that aren't full 1400+)
───────────────────────────────────────────── */
@media (max-width: 1399.98px) {
    
    .reviewed-right{
        margin-left: 0px;
    }
    section.type ul li {
        flex: 0 0 15%;
    }
    
    section.type.type-inner p {
        display: block;
    }
    
    section.type.type-inner ul li {
        display: block;
    }
    
    section.banner.home-banner .book-before-img{
        left: -16%;
    }

    .banner-content h1 {
        font-size: 38px;
        line-height: 52px;
    }

    .section-heading h2 {
        font-size: 38px;
    }

    .banner-img {
        width: 45%;
    }

    .cta-launch-box {
    }

    .number-box h3 {
        font-size: 28px;
        line-height: 36px;
    }

    .success-upper h3 {
        font-size: 30px;
    }
    section.banner.home-banner{
        height: auto;
        padding:150px 0 60px;
    }
    
    .book-before-img {
        left: -12%;
        bottom: -23%;
    }
    
    .cta-wrapper .section-heading {
        flex: 0 0 75%;
    }
    
    p.manu-h3 {
        font-size: 26px;
    }
    .numbers {
        padding-bottom: 100px;
    }
    
    section.type ul {
        gap: 0 !important;
        justify-content: space-between !important;
    }
    
}


/* ─────────────────────────────────────────────
   XL — max-width: 1199.98px
   (Standard laptops / smaller desktops)
───────────────────────────────────────────── */
@media (max-width: 1199.98px) {

    /* === HEADER === */
    div#navbarSupportedContent .navbar-nav {
        gap: 20px;
    }

    div#navbarSupportedContent .nav-item a {
        font-size: 16px;
    }

    /* === BANNER === */
    section.banner.home-banner {
        height: 780px;
    }

    .banner-content h1 {
        font-size: 34px;
        line-height: 46px;
    }

    .banner-img {
        width: 46%;
        right: 0;
    }

    /* === SECTION HEADINGS === */
    .section-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    /* === SERVICE EXPERTISE === */
    .cta-box {
        min-height: 340px;
        padding: 25px 20px;
    }

    .cta-box a h3 {
        font-size: 20px;
    }

    /* === NUMBERS / PROCESS === */
    .number-box {
        min-height: 400px;
    }

    .number-box h3 {
        font-size: 26px;
        line-height: 32px;
        letter-spacing: -1px;
    }

    /* === SUCCESS BOXES === */
    .success-upper h3 {
        font-size: 26px;
        letter-spacing: -1px;
    }

    .success-box {
        min-height: auto;
    }

    /* === CTA LAUNCH === */
    .cta-launch-box {
        width: calc(100% - 350px);
        gap: 8px;
    }

    /* === COUNTER === */
    .counter-box p.co-h6 {
        font-size: 32px;
    }

    /* === PODCAST === */
    .podcast-left {
        width: 100%;
    }

    /* === FAQ === */
    .accordion-button {
        padding: 20px 30px;
        font-size: 15px;
    }
}


/* ─────────────────────────────────────────────
   LG — max-width: 991.98px
   (Tablets landscape / smaller laptops)
───────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* === GLOBAL === */
    .section-heading h2 {
        font-size: 28px;
        letter-spacing: -1px;
        word-wrap: break-word;
    }

    .section-heading h2 br {
        display: none;
    }

    .section-heading h2 span {
        display: inline-block;
    }

    .section-heading p {
        font-size: 15px;
        margin-top: 10px;
    }

    .btn-wrapper {
        margin-top: 20px;
    }

    /* === HEADER / NAVBAR === */
    header {
        top: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-toggler {
        background-color: white;
    }

    .navbar-collapse {
        background-color: #4B3990;
        padding: 15px 20px;
        border-radius: 12px;
        margin-top: 10px;
    }

    .navbar-nav {
        gap: 0;
    }

    a.nav-link {
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-size: 15px !important;
    }

    a.navbar-brand img {
        width: 130px;
    }

    div#navbarSupportedContent .nav-item a {
        font-size: 15px;
    }

    div#navbarSupportedContent .navbar-nav {
        gap: 0;
    }

    header .form-inline ul {
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
        padding-bottom: 10px;
    }

    header .form-inline ul li .btn {
        display: block;
        text-align: center;
        width: 100%;
    }

    .navbar-nav .dropdown-menu {
        display: block !important;
        position: static !important;
        padding: 0 10px;
        margin: 0;
        border-radius: 8px;
        border: none;
        background-color: rgba(255,255,255,0.08);
    }

    .navbar-nav .dropdown-menu a {
        font-size: 14px !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .dropdown-toggle::after {
        display: none;
    }

    /* === BANNER === */
    section.banner.home-banner {
        height: auto;
        padding: 120px 0 60px;
    }

    section.banner.home-banner .banner-content {
        margin-top: 0;
        padding-top: 70px;
    }

    .banner-content h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 12px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .banner-img {
        display: none;
    }

    .book-before-img {
        width: 120px;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    .book-before-img img {
        width: 100%;
    }

    .inner-banner:before,
    .home-banner:before {
        width: 150px;
        height: 130px;
        left: -40px;
    }

    /* === PODCAST / EXPERTISE === */
    section.podcast.expertise {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .podcast {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .podcast-left {
        width: 100%;
        margin-bottom: 20px;
    }

    .podcast-img {
        margin-top: 20px;
    }

    .podcast-img img {
        width: 100%;
    }

    /* === SERVICE EXPERTISE === */
    section.service-expertise {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 50px 0 60px;
    }

    .cta-box {
        min-height: auto;
        margin-top: 30px;
        padding: 25px 20px;
        border-radius: 30px;
    }

    .cta-box a h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .cta-box p {
        font-size: 14px;
    }

    /* === CTA STRIP === */
    section.cta {
        padding: 60px 0 40px;
        margin-top: 0;
    }

    .cta-wrapper {
        display: block;
        text-align: center;
    }

    p.manu-h3 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    /* === NUMBERS / PROCESS === */
    .numbers {
        padding: 50px 0 60px;
        background-size: contain;
        background-position: bottom center;
    }

    .numbers .section-heading {
        margin-bottom: 20px;
    }

    .number-box {
        padding: 20px;
        min-height: auto;
        margin: 8px 0;
        border-radius: 20px;
    }

    .number-box h3 {
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -1px;
        margin: 10px 0 8px;
    }

    .number-box p {
        font-size: 14px;
        line-height: 21px;
    }

    .number-box .btn-purple-light {
        font-size: 13px;
        padding: 5px 18px;
    }

    /* === TYPE / BOOK CATEGORIES === */
    section.type {
        overflow: hidden;
    }

    section.type .section-heading {
        padding: 40px 20px 70px;
        border-radius: 30px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .type .section-heading p {
        padding: 0 20px;
    }

    section.type ul {
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px;
        margin-top: -40px;
        border-radius: 20px;
        gap: 5px;
    }

    section.type ul li {
        flex: 0 0 30%;
        margin: 5px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    section.type ul li p {
        font-size: 13px;
        margin-top: 5px;
    }

    .nav.nav-tabs button img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    /* === SUCCESS / END-TO-END === */
    .success {
        padding: 50px 0 40px;
    }

    .success .section-heading {
        margin-bottom: 10px;
    }

    .success-box {
        padding: 20px;
        margin: 8px 0;
        min-height: auto;
        border-radius: 20px;
    }

    .success-upper h3 {
        font-size: 22px;
        letter-spacing: -1px;
        line-height: 28px;
    }

    .success-upper span {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    .success-upper span img {
        height: 35px;
    }

    .success-box p {
        font-size: 14px;
        margin-top: 10px;
    }

    /* === CTA LAUNCH === */
    section.cta-launch {
        padding-top: 20px;
    }

    section.cta-launch:before {
        height: 218px;
    }

    .cta-launch-img {
        position: static;
    }

    .cta-launch-img img {
        width: 100%;
        max-width: 360px;
        display: block;
        margin: 0 auto;
    }

    .cta-launch-box {
        display: block;
        width: 100%;
        padding: 30px 20px;
        text-align: center;
    }

    p.cta {
        font-size: 22px;
        line-height: 30px;
        flex: none;
        margin-bottom: 12px;
    }

    .cta-launch-box > p:not(.cta) {
        margin-bottom: 20px;
    }

    /* === COUNTER STATS === */
    section.counter {
        padding: 50px 0;
    }

    .counter-content.section-heading p {
        width: 90%;
    }

    .counter-box {
        border-radius: 30px;
        padding: 25px 10px;
        margin: 8px 0;
    }

    p.co-h6 {
        font-size: 32px;
    }

    .counter-box p:last-child {
        font-size: 13px;
    }

    /* === AUTHOR BOOKS SLIDER === */
    section.author {
        padding: 50px 0 80px;
    }

    .author-slider {
        margin-top: 20px;
    }

    .author-btn {
        margin-top: 30px;
    }

    /* === REVIEWED / TESTIMONIALS === */
    .reviewed {
        padding: 50px 0;
    }

    .reviewed-box {
        display: block;
    }

    .reviewed-left img {
        width: 150px;
        margin: 0 auto 15px;
        display: block;
    }

    .reviewed-right {
        width: 100% !important;
        flex: none;
        margin: 0;
        text-align: center;
        padding: 0 10px;
    }

    p.ratings-para {
        font-size: 18px;
    }

    .reviewed-right p {
        font-size: 15px;
        margin: 12px 0 20px;
    }

    p.review-name {
        font-size: 1.5rem;
    }

    .reviewed-slider {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    /* === FAQ === */
    section.faq-wrapper {
        padding-bottom: 50px;
    }

    div#accordionExample {
        margin-top: 20px;
    }

    div#accordionExample .accordion-item {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .accordion-button {
        padding: 18px 25px;
        font-size: 14px;
        border-radius: 40px !important;
    }

    .accordion-body {
        padding: 20px 20px;
        font-size: 14px;
        border-radius: 20px;
    }

    /* === FOOTER === */
    footer {
        padding: 40px 0 20px !important;
    }

    .menu-list {
        margin-bottom: 25px;
    }

    img.footer-logo {
        width: 120px;
    }

    .menu-list.footer p {
        font-size: 14px;
        margin-top: 10px;
    }

    .menu-list h4 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .menu-list a {
        font-size: 14px;
        margin: 4px 0;
    }

    .copy-right p {
        font-size: 13px;
    }

    footer:after {
        width: 120px;
        height: 90px;
    }

    footer:before {
        width: 120px;
        height: 160px;
    }

    /* === EXPERIENCE IMAGE === */
    section.experience-image-box {
        padding: 20px 0;
    }
}


/* ─────────────────────────────────────────────
   MD — max-width: 767.98px
   (Tablets portrait / large phones)
───────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* === GLOBAL === */
    .section-heading h2 {
        font-size: 24px;
        letter-spacing: -0.5px;
    }

    .section-heading p {
        font-size: 14px;
    }

    /* === BANNER === */
    .banner-content h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .banner-content p {
        font-size: 13px;
    }

    .btn-wrapper a.btn {
        font-size: 13px;
        padding: 8px 18px;
    }

    .btn-wrapper a:first-child {
        margin-right: 8px;
        margin-bottom: 8px;
    }

    /* === PODCAST / EXPERTISE === */
    section.podcast.expertise {
        padding: 30px 0 15px;
    }

    /* === SERVICE EXPERTISE === */
    section.service-expertise {
        padding: 40px 0 50px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .cta-box {
        border-radius: 24px;
        padding: 22px 18px;
    }

    /* === TYPE SECTION === */
    section.type ul li {
        flex: 0 0 45%;
    }

    section.type .section-heading {
        padding: 30px 15px 65px;
    }

    .type .section-heading p {
        padding: 0 10px;
        font-size: 14px;
    }

    /* === NUMBERS / PROCESS === */
    .numbers {
        padding: 40px 0 50px;
    }

    .number-box h3 {
        font-size: 20px;
        line-height: 26px;
    }

    /* === SUCCESS === */
    .success {
        padding: 40px 0 30px;
    }

    .success-upper h3 {
        font-size: 20px;
        line-height: 26px;
    }

    /* === COUNTER === */
    .counter-content.section-heading p {
        width: 100%;
        font-size: 14px;
    }

    section.counter {
        padding: 40px 0;
    }

    .counter-box {
        margin: 6px 0;
    }

    p.co-h6 {
        font-size: 28px;
    }

    /* === CTA LAUNCH === */
    section.cta-launch:before {
        height: 160px;
    }

    p.cta {
        font-size: 20px;
        line-height: 28px;
    }

    /* === FAQ === */
    .accordion-button {
        font-size: 13px;
        padding: 15px 20px;
    }

    /* === REVIEWED === */
    .reviewed {
        padding: 40px 0;
    }

    p.review-name {
        font-size: 1.25rem;
    }

    p.ratings-para {
        font-size: 16px;
        letter-spacing: -1px;
    }

    /* === FOOTER === */
    .footer-content {
        column-count: 2;
        column-gap: 15px;
    }

    .footer-content a {
        break-inside: avoid;
        font-size: 13px;
    }

    img.footer-logo {
        width: 55%;
    }

    .copy-right {
        margin-top: 20px;
    }

    .copy-right p {
        font-size: 12px;
        line-height: 20px;
    }
}


/* ─────────────────────────────────────────────
   SM — max-width: 575.98px
   (Mobile phones)
───────────────────────────────────────────── */
@media (max-width: 575.98px) {

    /* === GLOBAL === */
    .section-heading h2 {
        font-size: 22px;
        letter-spacing: -0.3px;
    }

    .section-heading p {
        font-size: 15px;
        margin-top: 8px;
    }

    .btn-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
    }

    .btn-wrapper a:first-child {
        margin-right: 0;
        margin-bottom: 0;
    }

    .btn-wrapper a.btn {
        flex: 1 1 100%;
        text-align: center;
        font-size: 15px;
        padding: 10px 18px;
    }

    /* === HEADER === */
    a.navbar-brand img {
        width: 100px;
    }

    header {
        padding: 4px 0;
    }

    header.sticky img {
        width: 100px;
    }

    /* === BANNER === */
    section.banner.home-banner {
        padding: 150px 0 50px;
        overflow: hidden;
    }

    .banner-content h1 {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 10px;
    }

    .banner-content p {
        font-size: 15px;
        line-height: 24px;
    }

    .book-before-img {
        width: 80px;
    }

    /* === PODCAST / EXPERTISE === */
    section.podcast.expertise {
        padding: 25px 0 10px;
    }

    section.podcast {
        padding: 30px 0;
    }

    /* === SERVICE EXPERTISE === */
    section.service-expertise {
        padding: 35px 0 40px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 0;
    }

    .cta-box {
        margin-top: 20px;
        border-radius: 20px;
        padding: 20px 16px;
        border-top-width: 6px;
    }

    .cta-box a h3 {
        font-size: 17px;
        letter-spacing: -0.5px;
    }

    .cta-box p {
        font-size: 15px;
        line-height: 24px;
    }

    /* === CTA STRIP === */
    section.cta {
        padding: 40px 0 30px;
        margin-top: -35px;
    }

    p.manu-h3 {
        font-size: 1.25rem;
        line-height: 1.6;
        text-align: center;
    }

    .cta-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* === NUMBERS / PROCESS === */
    .numbers {
        padding: 35px 0 40px;
    }

    .numbers .section-heading {
        margin-bottom: 15px;
    }

    .number-box {
        padding: 18px 16px;
        margin: 6px 0;
        border-radius: 16px;
    }

    .number-box h3 {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.5px;
        margin: 8px 0 6px;
    }

    .number-box p {
        font-size: 15px;
        line-height: 24px;
        width: 100%;
    }

    .number-box .btn-purple-light {
        font-size: 12px;
        padding: 4px 16px;
    }

    /* === TYPE SECTION === */
    section.type ul {
        border-radius: 16px;
        padding: 12px 8px;
        gap: 0;
    }

    section.type ul li {
        flex: 0 0 33%;
        margin: 10px 0;
        width: 33%;
        overflow: hidden;
    }

    section.type ul li p {
        font-size: 13px;
        letter-spacing: -0.3px;
    }

    .nav.nav-tabs button img {
        width: 32px;
        height: 32px;
    }

    section.type .section-heading {
        padding: 25px 15px 60px;
        border-radius: 20px 20px 0 0;
    }

    .type .section-heading p {
        padding: 0;
        font-size: 15px;
    }

    /* === SUCCESS / END-TO-END === */
    .success {
        padding: 35px 0 25px;
    }

    .success-box {
        padding: 16px;
        margin: 6px 0;
        border-radius: 16px;
    }

    .success-upper {
        gap: 10px;
    }

    .success-upper h3 {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.5px;
    }

    .success-upper span {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .success-upper span img {
        height: 28px;
    }

    .success-box p {
        font-size: 15px;
        line-height: 24px;
        margin-top: 8px;
    }

    /* === CTA LAUNCH === */
    section.cta-launch {
        padding-top: 20px;
    }

    section.cta-launch:before {
        height: 100%;
    }

    .cta-launch-img img {
        max-width: 260px;
    }

    .cta-launch-box {
        padding: 20px 0;
        text-align: center;
    }

    p.cta {
        font-size: 18px;
        line-height: 26px;
    }

    /* === COUNTER === */
    section.counter {
        padding: 35px 0;
    }

    .counter-content.section-heading h2 {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .counter-content.section-heading p {
        font-size: 15px;
        width: 100%;
    }

    .counter-box {
        border-radius: 20px;
        padding: 20px 0px;
        margin: 5px 0;
        border-left-width: 5px;
        border-right-width: 5px;
        min-height: 117px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    p.co-h6 {
        font-size: 26px !important;
        margin-bottom: 2px;
    }

    .counter-box p:last-child {
        font-size: 13px;
    }

    /* === AUTHOR SLIDER === */
    section.author {
        padding: 35px 0 60px;
    }

    .author-btn {
        margin-top: 20px;
    }

    .author-box p {
        font-size: 14px;
    }

    /* === REVIEWED === */
    .reviewed {
        padding: 35px 0;
    }

    .reviewed-right {
        padding: 0;
    }

    p.review-name {
        font-size: 1.1rem;
    }

    p.ratings-para {
        font-size: 14px;
        letter-spacing: -0.5px;
    }

    .reviewed-right p {
        font-size: 15px;
        margin: 10px 15px 15px;
    }

    .star-box i {
        font-size: 14px;
    }

    /* === FAQ === */
    section.faq-wrapper {
        padding-bottom: 40px;
    }

    div#accordionExample {
        margin-top: 15px;
    }

    div#accordionExample .accordion-item {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .accordion-button {
        font-size: 15px;
        padding: 14px 18px;
        border-radius: 30px !important;
        line-height: 24px;
    }

    .accordion-body {
        padding: 16px;
        font-size: 15px;
        border-radius: 14px;
        margin-top: 10px;
    }

    /* === FOOTER === */
    footer {
        padding: 30px 0 15px !important;
    }

    img.footer-logo {
        width: 30%;
        margin-bottom: 5px;
    }

    .menu-list.footer p {
        font-size: 15px;
        line-height: 24px;
    }

    .menu-list {
        margin-bottom: 20px;
    }

    .menu-list h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .menu-list a {
        font-size: 15px;
        margin: 3px 0;
    }

    .footer-content {
        column-count: 1;
    }

    .copy-right {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    .copy-right p {
        font-size: 13px;
        line-height: 22px;
    }

    .copy-right a {
        display: inline;
    }

    footer:after,
    footer:before {
        display: none;
    }

    /* === MODAL === */
    .modal-body.p-5 {
        padding: 20px 15px !important;
    }

    p.model-header {
        font-size: 24px;
    }

    p.serv-header {
        font-size: 16px;
    }

    .contact-form .form-control {
        height: 40px;
        font-size: 13px;
    }

    .contact-form .form-select {
        height: 40px;
        font-size: 13px;
    }

    .form-check-flex .d-flex {
        gap: 10px !important;
    }

    .form-check label {
        font-size: 13px;
    }
    
    body{
        overflow-x: hidden;
    }
    
    .expertise-img {
        margin-top: 0px;
    }
    
    section.experience-image-box {
        padding: 0 0;
    }
    
    figure.exp-fig {
        margin: 0;
    }
    
    .nav.nav-tabs {
        gap: 0;
    }
    
    .nav.nav-tabs button {
        padding: 0;
        display: block;
        width: 100%;
        text-align: center;
    }
}


/* =============================================================
   ABOUT PAGE — Responsive Additions
   Sections: about-banner · stories · makes · art-cta · team
============================================================= */


/* ─────────────────────────────────────────────
   ABOUT — XXL: max-width: 1399.98px
───────────────────────────────────────────── */
@media (max-width: 1399.98px) {

    .banner-content h2 {
        font-size: 52px;
        margin-bottom: 50px;
    }

    .about-banner h5 {
        font-size: 42px;
    }

    .about-banner p {
        font-size: 17px;
    }
}


/* ─────────────────────────────────────────────
   ABOUT — XL: max-width: 1199.98px
───────────────────────────────────────────── */
@media (max-width: 1199.98px) {

    /* === ABOUT BANNER === */
    .about-banner {
        padding-top: 140px;
    }

    .banner-content h2 {
        font-size: 44px;
        margin-bottom: 40px;
    }

    .about-banner h5 {
        font-size: 36px;
    }

    .about-banner p {
        font-size: 16px;
        width: 90%;
    }

    /* === STORIES === */
    section.stories {
        padding-top: 60px;
        margin-bottom: 40px;
    }

    section.stories:before {
        height: 560px;
    }

    /* === MAKES === */
    .makes-box h6 {
        font-size: 22px;
    }

    .makes-box p {
        font-size: 15px;
    }

    /* === ART CTA === */
    .section-heading h4 {
        font-size: 38px;
    }

    /* === TEAM === */
    .team-img {
        width: 200px;
        height: 200px;
    }

    .team-box h5 {
        font-size: 22px;
    }
}


/* ─────────────────────────────────────────────
   ABOUT — LG: max-width: 991.98px
───────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* === ABOUT BANNER === */
    .about-banner {
        padding-top: 120px;
        text-align: left;
    }

    .banner-content h2 {
        font-size: 32px;
        letter-spacing: -1px;
        margin-bottom: 20px;
        text-align: left;
    }

    .about-banner h5 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .about-banner p {
        width: 100%;
        font-size: 14px;
        line-height: 24px;
        margin: 0 0 25px;
    }

    .about-banner .expertise-img {
        margin-top: 20px;
    }

    .about-banner .expertise-img img {
        width: 100%;
    }

    /* === STORIES === */
    section.stories {
        padding-top: 40px;
        margin-bottom: 20px;
    }

    section.stories:before {
        height: 420px;
        top: 0;
    }

    .stories-img {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .stories-img img {
        width: 100%;
        border-radius: 16px;
    }

    /* === MAKES === */
    .makes-left {
        margin-bottom: 30px;
    }

    .makes-left .section-heading h2 {
        font-size: 26px !important;
    }

    .makes-left .section-heading p {
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 22px;
    }

    .makes-left .btn-purple-light {
        font-size: 14px;
        padding: 8px 22px;
    }

    .makes-box {
        margin-bottom: 22px;
    }

    .makes-box h6 {
        font-size: 18px;
        margin-bottom: 8px;
        gap: 8px;
    }

    .makes-box h6 img {
        width: 28px;
    }

    .makes-box p {
        font-size: 14px;
        line-height: 22px;
    }

    /* === ART CTA === */
    section.art-cta {
        padding: 40px 0;
    }

    .section-heading h4 {
        font-size: 26px;
        letter-spacing: -1px;
        margin-bottom: 12px;
    }

    .section-heading h6 {
        font-size: 15px;
        margin-bottom: 18px;
    }

    ul.image-wrapper {
        justify-content: flex-start;
        gap: 15px;
        flex-wrap: wrap;
    }

    ul.image-wrapper li {
        flex: 0 0 30%;
    }

    ul.image-wrapper li img {
        width: 100%;
    }

    /* === TEAM === */
    section.team {
        padding: 40px 0 50px;
    }

    .team-box {
        margin-top: 30px;
    }

    .team-img {
        width: 180px;
        height: 180px;
    }

    .team-box h5 {
        font-size: 20px;
        margin-top: 15px;
    }

    .team-box p {
        font-size: 14px;
    }
}


/* ─────────────────────────────────────────────
   ABOUT — MD: max-width: 767.98px
───────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* === ABOUT BANNER === */
    .about-banner {
        padding-top: 110px;
    }

    .banner-content h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .about-banner h5 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .about-banner p {
        font-size: 13px;
        line-height: 22px;
    }

    /* === STORIES === */
    section.stories:before {
        height: 360px;
    }

    section.stories {
        padding-top: 30px;
    }

    .stories-img {
        margin-bottom: 30px;
    }

    /* === MAKES === */
    .makes-left .section-heading h2 {
        font-size: 22px !important;
    }

    .makes-box h6 {
        font-size: 16px;
    }

    .makes-box h6 img {
        width: 24px;
    }

    /* === ART CTA === */
    section.art-cta {
        padding: 30px 0;
    }

    .section-heading h4 {
        font-size: 22px;
        letter-spacing: -0.5px;
        margin-bottom: 10px;
    }

    .section-heading h4 span {
        display: inline;
    }

    .section-heading h6 {
        font-size: 14px;
    }

    ul.image-wrapper li {
        flex: 0 0 28%;
    }

    /* === TEAM === */
    section.team {
        padding: 30px 0 40px;
    }

    .team-img {
        width: 160px;
        height: 160px;
    }

    .team-box h5 {
        font-size: 18px;
    }

    .team-box p {
        font-size: 13px;
    }

    .team-box {
        margin-top: 20px;
    }
    
    .contact-box {
        width: 100%;
        gap: 10px;
    }
    
    .contact-box p {
        font-size: 14px;
    }
    
    .contact-box i {
        font-size: 20px;
    }
    
    .contact-box-wrapper h6 {
        font-size: 30px;
    }
    
    .contact-form {
        margin-left: 0;
    }
    
    .contact-form h2 {
        font-size: 24px;
    }
    
    .contact-banner {
        padding-bottom: 40px;
    }
    
    section.contact-img {
        position: static;
        margin: 0;
    }
    
    section.contact-img {
        position: static;
        margin: 0;
    }
    
    .contact-info-box h6 {
        font-size: 20px;
    }
    
    .contact-info-box {
        width: 100%;
    }
    
    section.banner.home-banner.service-banner {
        padding-top: 150px !important;
        padding-bottom: 50px !important;
    }
    
    section.banner.home-banner.service-banner .contact-form {
        margin-top: 40px;
        padding: 10px 20px;
    }
    
    p.self-publishing-form {
        font-size: 19px !important;
        margin-bottom: 20px;
    }
    
    p.form-check-heading {
        font-size: 15px !important;
    }
    
    .check-flex {
        gap: 0px;
    }
    
    .contact-form p {
        font-size: 12px;
    }
    
    section.expertise {
        padding: 40px 0px 0;
    }
    
    .makes-box h6, .makes-box h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .makes-box h6 img, .makes-box h3 img {
        height: 22px;
    }
    
    section.stories.service-stories .makes-left {
        margin-top: 20px;
    }
    
    .inner-cta p.header {
        font-size: 15px;
        line-height: 24px;
        width: 100%;
    }
    
    .cta-wrapper-inner img {
        width: 140px;
    }
    
    section.cta.mt-0.new-cta.inner-cta {
        padding: 30px 0px !important;
    }
    
    section.count {
        padding: 40px 0px;
    }
    
    section.count ul {
        width: 100%;
        margin: 0;
    }
    
    section.count ul li {
        margin: 15px 0px;
    }
    
    section.count ul li {
        font-size: 15px;
        line-height: 25px;
    }
    
    section.cta-launch.cta-launch-inner-sec::before {
        height: 100%;
    }
    
    p.launch-h5 {
        font-size: 18px;
        margin-bottom: 12px !important;
    }
    
    p.launch-h5+p {
        font-size: 15px;
        line-height: 26px;
        margin-top: 0 !important;
    }
    
    .cta-launch-img {
        border-bottom: 1px solid white;
    }
    
    section.cta-launch.cta-launch-inner-sec {
        padding: 20px 0px 10px !important;
    }
    
    .type-inner {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    section.type ul li img {
        height: 40px;
    }
    
    .contact-bottom {
        padding-top: 50px;
        padding-bottom: 25px;
    }

    section.type.type-inner .section-heading h2 {
        margin-bottom: 15px;
    }
    

    .nav.nav-tabs.develp-telme {
        width: 100%;
        flex: 0 0 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .nav.nav-tabs.develp-telme li {
        width: 23%;
    }
    
    .nav.nav-tabs button span {
        font-size: 13px;
        margin-top: 7px;
        margin-bottom: 5px;
    }
    
    .nav.nav-tabs button i {
        top: -34px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    .tab-content>.tab-pane {
        padding: 15px;
    }
    
    .tab-content {
        margin-top: 30px;
    }
    
    h3.h3-proccess {
        font-size: 25px;
    }
    
    .process-heading p {
        font-size: 15px;
    }
    
    .process-right {
        margin-top: 15px;
    }
    
    .process-right ul li {
        margin-bottom: 4px;
    }
    
    section.difference {
        padding: 50px 0px 0;
    }
    
    ul#differenceTab li {
        width: 32%;
    }
    
    ul#differenceTab {
        justify-content: center;
        gap: 40px 6px;
    }
    
    .difference-box {
        padding: 20px;
    }
    
    .difference-box p {
        font-size: 15px;
        line-height: 25px;
    }
    
    .difference-box span, .difference-box p.diff-header {
        font-size: 12px;
    }
    
    .tab-difference.tab-content {
        margin-top: 60px;
    }
    
    .inner-cta p.header {
        font-size: 15px;
        line-height: 24px;
        width: 100%;
    }
    
    .cta-wrapper-inner img {
        width: 140px;
    }
    
    section.cta.mt-0.new-cta.inner-cta {
        padding: 30px 0px !important;
    }
    
    section.count {
        padding: 40px 0px;
    }
    
    section.count ul {
        width: 100%;
        margin: 0;
    }
    
    section.count ul li {
        margin: 15px 0px;
    }
    
    section.count ul li {
        font-size: 15px;
        line-height: 25px;
    }
    
    ul.difference-list {
        flex-wrap: wrap;
        margin-top: 30px;
        gap: 4px;
        width: 100%;
    }
    
    ul.difference-list li {
        padding: 9px 10px;
        font-size: 10px;
    }
    
    .security-right h5, .security-right h3 {
        font-size: 20px;
    }
    
    .security-right p {
        font-size: 15px;
        width: 100%;
    }
    
    .security-box {
        gap: 15px;
        padding: 0;
    }
    
    .security-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    
    section.protection {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .protection .number-box h3 {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .number-box ul li {
        font-size: 15px;
        margin: 5px 0px;
    }
    
    .number-box ul {
        margin-top: 10px;
    }
    
    
    section.process .nav.nav-tabs {
        justify-content: center;
        gap: 40px 10px;
    }
    
    section.process .nav.nav-tabs li {
        width: 30%;
    }
    
    section.voice_options {
        margin: 0;
        padding-top: 50px;
        padding-bottom: 40px;
    }
    
    .security-box.security-box-new {
        padding: 20px;
    }
    
    .security-full>p {
        font-size: 15px;
    }
    
    .list-wrapper ul li {
        font-size: 14px;
        display: flex;
        gap: 8px;
    }
    
    .list-wrapper ul li i {
        position: relative;
        top: 5px;
    }
    
    .security-box.security-box-new {
        margin: 15px 0px;
    }
    
    .protection .number-box {
        min-height: auto;
    }
    
    .input-card p {
        font-size: 20px;
        margin: 0;
    }
    
    .input-card {
        padding: 25px;
        gap: 15px;
    }
    
    .field-header {
    }
    
    .rev-amount {
        font-size: 35px;
    }
    
    .rev-label {
        font-size: 13px;
    }
    
    .rev-note {
        font-size: 12px;
    }
    
    .stat-icon {
        font-size: 15px;
        width: 45px;
        padding: 2px;
    }
    
    .stat-value {
        font-size: 25px;
    }
    
    section.calc-wrapper {
        margin-bottom: 50px;
    }
    
    .manuscript-success-left>p {
        font-size: 15px;
    }
    
    .manuscript-success-left {
        border-radius: 0;
        padding: 15px;
    }
    
    .manuscript-success-box {
        margin-top: 20px;
    }
    
    p.manu-title-xs {
        font-size: 16px;
        margin-bottom: 9px;
    }
    
    p.manu-text {
        font-size: 14px;
    }
    
    p.manu-title-lg {
        margin: 5px 0px;
    }
    
    .manuscript-success-right .number-box {
        padding: 15px;
    }
    
    .manuscript-success-head {}
    
    .manuscript-success-head p.manu-title-xs {
        margin: 0;
    }
    
    .manuscript-success-head p.manu-title-md {
        margin-bottom: 6px;
        font-size: 18px;
    }
    
    .manuscript-success-right {
        padding: 15px;
        border: 0;
        padding-right: 0;
    }
    
    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }
    
    section.stories.service-stories {
        padding-top: 20px;
    }
    
    .production-included {
        width: 100%;
        padding: 15px;
        margin-bottom: 30px;
    }
    
    .production-included li {
        font-size: 15px;
    }
    
    .production-included > p {
        margin-bottom: 10px;
    }
    
    .pre-box ul {
        flex-wrap: wrap;
    }
    
    .pre-box {
        padding: 20px !important;
    }
    
    section.launch-strategy {
        padding: 35px 0px;
    }
    
    section.process.launch-strategy .nav.nav-tabs button span strong {
        font-size: 11px;
    }
    
    .process-right.launch-strategy-right ul li {
        margin: 8px 0px;
    }
    
    .process-right.launch-strategy-right ul {
        margin-top: 0;
    }
    
    p.pro-tip {
        margin: 0;
    }
    
    .nav.nav-tabs.step-tabs li {width: 30%;}
    
    .nav.nav-tabs.step-tabs {
        gap: 40px 12px;
    }
    
    section.personalized-quote .tab-content>.tab-pane {
        padding: 40px 20px;
    }
    
    section.personalized-quote .tab-content>.tab-pane .mt-3 {
        margin: 0 !important;
    }
    
    .option-box {
        padding: 10px 30px;
        font-size: 15px;
    }
    
    section.personalized-quote .tab-content>.tab-pane .row>* {
        margin: 5px 0px;
    }
    
    section.personalized-quote {
        margin-bottom: 50px;
    }
    
    .ebook-author-identity {
        margin: 50px 0px 10px;
    }
    
    .e-book-author-identity-img {
        margin-bottom: 40px;
    }
    
    p.design-p {
        margin-top: 0;
    }
    
    
    section.process.launch-strategy .nav.nav-tabs li {
        width: 48%;
        gap: 0;
    }
    
    section.process.launch-strategy .nav.nav-tabs {
        gap: 7px;
    }
    
    .platform-tabs .nav.nav-tabs button {
        padding: 10px 0 !important;
        height: auto !important;
        margin: 0 !important;
    }
    
    .platform-tabs .nav.nav-tabs button span {
        margin: 0;
    }
    
    .plat-body {
        display: block;
    }
    
    .plat-col {
        padding-bottom: 0;
    }
    
    section.distribution-strategy {
        margin-bottom: 50px;
        margin-top: 50px;
    }
    
    .direct-table tbody tr td {
        padding: 10px;
    }
    
    .flip-card:hover {transform: none;}
    
    .flip-card {
        transition: none;
    }
    
    .flip-card-wrapper {
        perspective: none;
        margin: 0;
        height: auto;
    }
    
    .metric-value {
        font-size: 20px;
    }
    
    .card-metric {
        gap: 10px 0px;
    }
    
    .metric-label {
        text-align: left;
    }
    
    .challenge-text {
        margin-bottom: 15px;
    }
    
    .flip-card-front {
        margin-bottom: 20px;
        margin-top: 20px;
        position: static;
    }
    
    section.author-outcomes {
        margin-bottom: 50px;
    }
    
    .flip-card-front, .flip-card-back {
        position: static;
    }
    
    .flip-card-back {
        transform: none;
    }
    
    .contact-form.mobile-contact-form {
        display: block;
    }
    
    figure.mobile-figure {
        display: none;
    }
    
    .makes-left.genre-left {
        width: 100%;
        margin: 0 !important;
        margin-bottom: 40px !important;
    }
    
    .makes-box.genre-box {
        margin: 10px 0px !important;
    }
    
    .makes-box.genre-box p {
        font-size: 18px;
    }
    
    .makes-box.genre-box i {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    
    section.templates {
        padding-top: 50px;
    }
    
    .template-list ul li p {
        font-size: 15px;
        margin-bottom: 4px;
    }
    
    .template-list {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
    .section-heading h2 br {
        display: none;
    }
    
    .author-slider-wrapper .nav.nav-tabs {
        gap: 10px 10px;
    }
    
    .author-slider-wrapper .nav.nav-tabs li {
    }
    
    .author-slider-wrapper .nav.nav-tabs button {
        padding: 3px 15px;
        font-size: 15px;
    }
    
    section.genre-expertise {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .genre-box img {
        height: 150px;
        object-fit: cover;
    }
    
    .genre-lower {
        padding: 20px;
    }
    
    h3.genre-lower-h3 {
        font-size: 22px;
    }
    
    .genre-lower p {
        font-size: 15px;
    }
    
    .genre-box {
        margin: 10px 0px;
    }
    
    .custom-book-illustration-box img {
        height: 150px;
        object-fit: cover;
    }
    
    .custom-book-illustration-lower {
        padding: 20px;
        min-height: auto;
    }
    
    .custom-book-illustration-lower p {
        font-size: 15px;
    }
    
    .custom-book-illustration-box {
        margin: 10px 0px;
    }
    
    section.custom-book-illustration {
        padding-bottom: 0;
    }
    
    section.platform-optimization {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    ul.content-list {
        width: 100%;
        gap: 5px 0px;
    }
    
    ul.content-list li {
        width: 100%;
        flex: 0 0 100%;
        font-size: 15px;
    }
    
    .platform-optimization-image {
        padding: 35px;
    }
    
    .platform-lower-icon i {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .platform-lower-icon p {
        font-size: 12px;
    }
    
    .platform-lower {
        gap: 0;
        justify-content: space-between;
    }
    
    section.transformation {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .row.align-items-center.mt-5 {}
    
    section.transformation .row.align-items-center.mt-5 {
        margin-top: 20px !important;
    }
    
    .compare-wrap {
        margin-bottom: 50px;
    }
    
    h3.before-after {
        font-size: 24px;
    }
    
    .transformation-left h4 {
        font-size: 22px;
    }
    
    .transformation-left p {
        font-size: 15px;
    }
    
    .author-identity-img img {
        width: 33%;
        height: 162px;
    }
    
    .author-identity-img img.second-book {
        width: 33%;
        margin-left: 0;
        z-index: 4;
        height: 162px;
        margin: 0;
    }
    
    .author-identity-img img.third-book {
        z-index: 9;
        height: 162px;
        margin-left: 0;
        width: 100%;
    }
    
    .makes-left.genre-left {
        width: 100%;
        margin: 0 !important;
        margin-bottom: 40px !important;
    }
    
    .makes-box.genre-box {
        margin: 10px 0px !important;
    }
    
    .makes-box.genre-box p {
        font-size: 18px;
    }
    
    .makes-box.genre-box i {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    
    section.templates {
        padding-top: 50px;
    }
    
    .template-list ul li p {
        font-size: 15px;
        margin-bottom: 4px;
    }
    
    .template-list {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
    .section-heading h2 br {
        display: none;
    }
    
    .author-slider-wrapper .nav.nav-tabs {
        gap: 10px 10px;
    }
    
    .author-slider-wrapper .nav.nav-tabs li {
    }
    
    .author-slider-wrapper .nav.nav-tabs button {
        padding: 3px 15px;
        font-size: 15px;
    }
    
    section.genre-expertise {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .author-identity-img {
        margin-bottom: 50px;
    }
    
    p.series-box {
        margin-top: 0;
    }
    
    section.author-identity {
        padding-bottom: 20px;
    }
    
    section.understand {
        padding: 50px 0px;
        margin-bottom: 50px;
    }
    
    
}



/* ─────────────────────────────────────────────
   ABOUT — SM: max-width: 575.98px
───────────────────────────────────────────── */
@media (max-width: 575.98px) {

    /* === ABOUT BANNER === */
    .about-banner {
        padding-top: 150px;
    }

    .banner-content h2 {
        font-size: 24px;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }

    .about-banner h5 {
        font-size: 17px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .about-banner p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .about-banner .expertise-img {
        margin-top: 15px;
    }

    /* === STORIES === */
    section.stories {
        padding-top: 25px;
        margin-bottom: 10px;
    }

    section.stories:before {
        height: 300px;
        top: 0;
    }

    .stories-img {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .stories-img img {
        border-radius: 12px;
    }

    /* === MAKES === */
    .makes-left {
        margin-bottom: 20px;
    }

    .makes-left .section-heading h2 {
        font-size: 20px !important;
        letter-spacing: -0.5px;
    }

    .makes-left .section-heading p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .makes-left .btn-purple-light {
        width: 100%;
        text-align: center;
        display: block;
        font-size: 13px;
        padding: 10px 18px;
    }

    .makes-box {
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid #f0eeff;
    }

    .makes-box:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .makes-box h6 {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 6px;
        gap: 8px;
    }

    .makes-box h6 img {
        width: 22px;
        flex: 0 0 22px;
    }

    .makes-box p {
        font-size: 15px;
        line-height: 24px;
        color: #5E5959;
    }

    /* === ART CTA === */
    section.art-cta {
        padding: 25px 0;
    }

    .section-heading h4 {
        font-size: 20px;
        letter-spacing: -0.3px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .section-heading h4 span {
        display: inline;
    }

    .section-heading h6 {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    ul.image-wrapper {
        gap: 10px;
        justify-content: space-between;
    }

    ul.image-wrapper li {
        flex: 0 0 30%;
        width: 30%;
    }

    ul.image-wrapper li img {
        width: 100%;
        object-fit: contain;
    }

    section.art-cta .col-md-6:first-child {
        margin-bottom: 20px;
    }

    /* === TEAM === */
    section.team {
        padding: 25px 0 35px;
    }

    .team-box {
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0eeff;
    }

    .team-box:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .team-img {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .team-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100%;
    }

    .team-box h5 {
        font-size: 17px;
        margin-top: 12px;
        letter-spacing: -0.3px;
    }

    .team-box p {
        font-size: 13px;
    }
}