/* ===== Responsive Styles ===== */

/* Container max-width on large viewports */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}
@media (max-width: 1400px) {
    .hero-float-left,.hero-float-right {
        max-width: 540px;
    }
    
    .main-navbar .nav-link {
        padding: 8px;
    }
    
    .portfolio-tabs .nav-link {
        font-size: 18px;
    }
    
    .portfolio-tabs {
        max-height: 400px;
    }
    
    .portfolio-item img {
        height: 400px;
    }
    
    .offer_bx {
        padding: 40px;
    }
    
    .faq-cta-card h3 {
        font-size: 25px;
    }
    
    .faq-cta-card p {
        font-size: 18px;
    }
    
    .faq-support-text span {
        font-size: 14px;
    }
    
    .faq-support-text small {
        font-size: 14px;
    }
    .subscribe-input button {
        margin-left: -50px;
    }
    
    .subscribe-input input {
        font-size: 12px;
        padding: 10px;
    }
}

@media (max-width: 1199px) {
    .main-navbar .nav-link {
        font-size: 12px;
    }
    
    .main-navbar a.btn-quote {
        font-size: 12px;
        padding: 10px 15px;
    }
    
    .main-navbar .offcanvas-body{padding: 0;}
    
    .main-navbar .offcanvas {
        width: 65%;
    }
    
    .topbar-info {
        font-size: 12px;
    }
    
    .hero-line {
        font-size: 50px;
    }
    
    .hero-subline {font-size: 30px;}
    
    .transform-heading {
        font-size: 35px;
    }
    
    .transform-heading .script-blue, .transform-heading .script-red {
        font-size: 40px;
    }
    
    .transform-stats {gap: 20px;}
    
    .exclusive-heading {
        font-size: 30px;
    }
    
    .exclusive-heading .script-red {
        font-size: 40px;
    }
    
    .services-heading {
        font-size: 35px;
    }
    
    .services-heading .script-blue {
        font-size: 45px;
    }
    
    .cta-heading .script {
        font-size: 45px;
    }
    
    .cta-heading .cta-line {
        font-size: 35px;
    }
    
    .portfolio-tabs .nav-link {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .portfolio-tabs {
        height: 300px;
    }
    
    .portfolio-item img {
        height: 300px;
    }
    
    .iproc-title-script {
        font-size: 45px;
    }
    
    .iproc-title-bold {
        font-size: 35px;
    }
    
    .iproc-section {
        padding: 60px 0;
    }
    
    .recog-cta .btn-gradient {
        font-size: 12px;
        padding: 14px 20px;
    }
    
    .recog-cta-text strong {
        font-size: 25px;
    }
    
    .bestseller-heading {
        font-size: 35px;
    }
    
    .bestseller-heading .script-red {
        font-size: 45px;
    }
    
    .offer_bx {
        padding: 20px;
    }
    
    .what_offer h2 {
        font-size: 35px;
    }
    
    .what_offer h2 .script {
        font-size: 45px;
    }
    
    .offer_bx h4 {
        font-size: 20px;
    }
    
    .offer_bx .title_txt .img_bx strong {
        font-size: 30px;
    }
    
    .quote-section .services-heading {
        font-size: 35px;
    }
    
    .quote-img-wrap {
        width: 100%;
    }
    
    .quote-form textarea.form-control {
        height: 200px;
    }
    
    .marquee__content {
        font-size: 30px;
    }
    
    .faq-support-text strong {
        font-size: 20px;
    }
    
    .faq-support-icon {
        width: 60px;
        height: 60px;
        padding: 15px;
    }
    
    .faq-support-card {
        gap: 10px;
        padding: 15px;
    }
    
    .footer-title {
        font-size: 20px;
    }
}


/* Desktop: show inline nav, hide toggler */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }

    /* Reset offcanvas to inline on large screens */
    .main-navbar .offcanvas {
        position: static;
        transform: none;
        visibility: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        max-width: none;
        flex-grow: 1;
        flex-basis: auto;
        z-index: auto;
        width: auto;
        height: auto;
    }

    .main-navbar .offcanvas-header {
        display: none;
    }

    .main-navbar .offcanvas-body {
        display: flex;
        flex-basis: auto;
    }

    .main-navbar .navbar-nav {
        flex-direction: row;
    }
}

/* Tablet & Mobile */
@media (max-width: 991.98px) {
    .main-navbar .offcanvas-body{
        padding: 20px;
    }
    .topbar {
        display: none;
    }

    .offcanvas-body .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        margin-bottom: 20px !important;
    }

    .offcanvas-body .nav-link::after {
        left: 8px;
        right: auto;
        width: 45%;
        transform-origin: left;
    }

    .offcanvas-body .nav-link.active::after,
    .offcanvas-body .nav-link:hover::after {
        transform: scaleX(1);
    }

    .btn-quote.d-lg-none {
        display: inline-flex;
        width: 100%;
    }

    .hero-banner {
        padding: 100px 0;
    }
    .hero-float {
        opacity: 0.18;
        width: 40%;
    }

    .hero-script {
        font-size: 50px;
    }

    .hero-line {
        font-size: 40px;
    }

    .hero-form-title {
        font-size: 20px;
    }

    .transform-text{
        max-width: 100%;
        text-align: center;
    }

    .transform-heading {
        text-align: center;
    }
    
    .transform-stats {
        justify-content: center;
        gap: 40px;
    }
    
    .stat-item h3 {
        justify-content: center;
    }
    
    
    
    .exclusive-section {
        text-align: center;
    }
    
    .recog-label {
        text-align: center;
    }
    
    
    .recog-label + img {
        margin: 0 auto;
    }
    
    .recog-cta {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .bestseller-section {
        text-align: center;
    }

    /* Portfolio tabs: horizontal scroll instead of tall vertical list */
    .portfolio-tabs {
        flex-direction: row !important;
        flex-wrap: nowrap;
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 8px;
    }

    .portfolio-tabs .nav-link {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .portfolio-tabs::-webkit-scrollbar {
        height: 6px;
    }

}


@media (max-width: 767.98px) {
    .cta-heading .script {
        font-size: 35px;
    }
    
    .cta-heading .cta-line {
        font-size: 30px;
    }

    /* What We Offer: slider mode */
    .offer_group .row.slick-initialized {
        display: block;
        gap: 0 !important;
    }

    .offer_group .slick-slide {
        height: auto;
        padding: 0 6px;
    }

    .offer_group .slick-slide > div {
        height: 100%;
    }

    .offer_group .slick-dots {
        position: static;
        margin-top: 26px;
    }

    .offer_group .slick-dots li button:before {
        font-size: 10px;
        color: #fff;
        opacity: 0.4;
    }

    .offer_group .slick-dots li.slick-active button:before {
        color: #fff;
        opacity: 1;
    }

    .subscribe-input input {
        font-size: 14px;
    }
    .footer-bottom p, .footer-bottom a {
        text-align: center;
    }
    
    .footer-bottom ul {
        justify-content: center !important;
    }
}


/* Small mobile */
@media (max-width: 575.98px) {
    .hero-banner {
        padding: 50px 0 60px;
    }

    .hero-float {
        display: none;
    }

    .hero-script {
        font-size: 38px;
    }

    .hero-line {
        font-size: 24px;
    }
    .gw-hero-form-card {
        padding: 64px 30px 28px;
    }
}


/* =====================================================
   Ghostwriting Page - Responsive
   ===================================================== */
@media (max-width: 991.98px) {
    .gw-hero {
        padding: 55px 0 70px;
    }

    .gw-hero-heading {
        font-size: 38px;
    }

    .gw-hero-heading .gw-script {
        font-size: 46px;
    }

    .gw-section-heading {
        font-size: 34px;
    }

    .gw-section-heading .gw-script {
        font-size: 42px;
    }

    .gw-hero-figure {
        max-width: 480px;
        margin: 20px auto 0;
    }

    .gw-intro,
    .gw-types,
    .gw-why {
        padding: 60px 0;
    }
}

@media (max-width: 767.98px) {
    .gw-hero-heading {
        font-size: 32px;
    }

    .gw-hero-heading .gw-script {
        font-size: 40px;
    }

    .gw-hero-text {
        font-size: 15px;
    }

    .gw-hero-actions {
        gap: 18px;
    }

    .gw-section-heading {
        font-size: 28px;
    }

    .gw-section-heading .gw-script {
        font-size: 36px;
    }

    .gw-check-list {
        grid-template-columns: 1fr;
    }

    .gw-stat h3 {
        font-size: 38px;
    }

    .gw-stat .gw-plus {
        font-size: 24px;
    }
}

@media (max-width: 575.98px) {
    .gw-hero-rating {
        left: 50%;
        transform: translateX(-50%);
    }

    .gw-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Get Started popup modal */
@media (max-width: 767.98px) {
    .gw-modal .modal-dialog {
        margin: 16px auto;
        max-width: calc(100% - 32px);
    }

    .gw-modal-aside {
        display: none !important;
    }

    .gw-modal .row.g-0 > .gw-modal-body {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .gw-modal-body {
        padding: 40px 28px 32px;
    }

    .gw-modal-close {
        top: 14px;
        right: 14px;
        background: #eef0f6;
    }

    .gw-modal-heading {
        font-size: 22px;
        padding-right: 36px;
    }

    .gw-modal-sub {
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .gw-modal .modal-dialog {
        margin: 12px auto;
        max-width: calc(100% - 24px);
    }

    .gw-modal-body {
        padding: 36px 22px 28px;
    }

    .gw-modal-heading {
        font-size: 20px;
    }
}


/* =====================================================
   About Us Page - Responsive
   ===================================================== */
@media (max-width: 991.98px) {
    .about-hero {
        padding: 55px 0 70px;
    }

    .about-hero-heading {
        font-size: 36px;
    }

    .about-hero-heading .about-script {
        font-size: 46px;
    }

    .about-heading {
        font-size: 34px;
    }

    .about-heading .about-script {
        font-size: 42px;
    }

    .about-story,
    .about-values,
    .about-journey,
    .about-services {
        padding: 60px 0;
    }

    .about-mv {
        padding-bottom: 60px;
    }

    .about-hero-visual {
        max-width: 480px;
        margin: 10px auto 0;
    }

    .about-story-img-wrap {
        margin-bottom: 30px;
    }
}

@media (max-width: 767.98px) {
    .about-hero-heading {
        font-size: 30px;
    }

    .about-hero-heading .about-script {
        font-size: 38px;
    }

    .about-heading {
        font-size: 28px;
    }

    .about-heading .about-script {
        font-size: 36px;
    }

    .about-hero-badge {
        left: 50%;
        transform: translateX(-50%);
    }

    .about-story-card {
        right: 50%;
        transform: translateX(50%);
    }

    .about-stat h3 {
        font-size: 38px;
    }

    .about-stat .about-plus {
        font-size: 24px;
    }

    .about-value-card {
        flex-direction: column;
        text-align: center;
    }

    .about-value-icon {
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .about-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Reviews Page - Responsive */
@media (max-width: 991.98px) {
    .reviews-bold {
        font-size: 34px;
    }

    .reviews-script {
        font-size: 42px;
    }

    .reviews-cta-box {
        padding: 32px 28px;
        text-align: center;
    }

    .reviews-cta .text-lg-end {
        text-align: center !important;
    }
}

@media (max-width: 767.98px) {
    .reviews-hero {
        padding: 50px 0 28px;
    }

    .reviews-bold {
        font-size: 28px;
    }

    .reviews-script {
        font-size: 36px;
    }

    .reviews-grid-section {
        padding-bottom: 70px;
    }
}


/* Contact Page - Responsive */
@media (max-width: 991.98px) {
    .contact-hero {
        padding: 55px 0 70px;
    }

    .contact-bold {
        font-size: 34px;
    }

    .contact-script {
        font-size: 42px;
    }

    .contact-aside,
    .contact-form-wrap {
        padding: 36px 28px;
    }

    .contact-cta-box {
        padding: 32px 28px;
        text-align: center;
    }

    .contact-cta-actions {
        justify-content: center;
    }

    .contact-cta .text-lg-end {
        text-align: center !important;
    }
}

@media (max-width: 767.98px) {
    .contact-hero {
        padding: 50px 0 60px;
    }

    .contact-bold {
        font-size: 28px;
    }

    .contact-script {
        font-size: 36px;
    }

    .contact-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-hero-actions .btn {
        justify-content: center;
    }

    .contact-main {
        padding-bottom: 70px;
    }

    .contact-aside,
    .contact-form-wrap {
        padding: 32px 22px;
    }

    .contact-aside-bold {
        font-size: 24px;
    }

    .contact-aside-script {
        font-size: 32px;
    }

    .contact-aside .btn-light-cta {
        width: 100%;
        justify-content: center;
    }

    .contact-info-card {
        min-height: auto;
        padding: 24px 18px 20px;
    }
}

@media (max-width: 767.98px) {
    .thankyou-hero {
        padding: 70px 0 90px;
    }

    .thankyou-bold {
        font-size: 28px;
    }

    .thankyou-script {
        font-size: 36px;
    }

    .thankyou-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .thankyou-actions .btn {
        justify-content: center;
    }
}


/* Genres Page - Responsive */
@media (max-width: 991.98px) {
    .genres-bold {
        font-size: 34px;
    }

    .genres-script {
        font-size: 42px;
    }

    .genres-intro,
    .genres-grid-section {
        padding: 50px 0 70px;
    }

    .genres-cta-box {
        padding: 32px 28px;
        text-align: center;
    }

    .genres-cta .text-lg-end {
        text-align: center !important;
    }
}

@media (max-width: 767.98px) {
    .genres-hero {
        padding: 50px 0 40px;
    }

    .genres-bold {
        font-size: 28px;
    }

    .genres-script {
        font-size: 36px;
    }

    .genres-stat h3 {
        font-size: 38px;
    }

    .genres-stat .genres-plus {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .legal-hero {
        padding: 50px 0 40px;
    }

    .legal-bold {
        font-size: 28px;
    }

    .legal-script {
        font-size: 36px;
    }

    .legal-body h2 {
        font-size: 20px;
    }
}