/* =====================================================
   Inkflow Publishing - Global responsive and polish layer
   Load this file after each page stylesheet.
===================================================== */

:root{
    --navy:#07111f;
    --navy-2:#0b1628;
    --ash:#dfe3ea;
    --ash-2:#e8ecf1;
    --pink:#ff4f6d;
    --blue:#1f7dd1;
    --muted:#334155;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* ---------- Professional global transitions ---------- */
a, button, .primary-btn, .secondary-btn, .header-btn,
.feature-box, .type-card, .process-card, .book-card,
.genre-card, .solution-tab, .review-card, .contact-card,
.faq-item, .contact-faq-item{
    transition:all .3s ease;
}

.primary-btn:hover,
.secondary-btn:hover,
.header-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 35px rgba(255,79,109,.22);
}

.feature-box:hover,
.type-card:hover,
.process-card:hover,
.book-card:hover,
.genre-card:hover,
.solution-tab:hover,
.review-card:hover,
.contact-card:hover{
    transform:translateY(-8px);
}

/* ---------- Reveal animations ---------- */
.reveal{
    opacity:0;
    transform:translateY(34px);
    transition:opacity .75s ease, transform .75s ease;
}

.reveal.reveal-visible{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
    *, *::before, *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

    .reveal{
        opacity:1 !important;
        transform:none !important;
    }
}

/* =====================================================
   GLOBAL HEADER / NAVBAR
===================================================== */
.header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    z-index:99999 !important;
    padding:18px 45px !important;
    display:flex !important;
    justify-content:center !important;
    pointer-events:none !important;
}

.header-container{
    width:100% !important;
    max-width:1800px !important;
    height:105px !important;
    background:rgba(255,255,255,.9) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    border-radius:28px !important;
    padding:0 38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    box-shadow:0 10px 35px rgba(0,0,0,.18) !important;
    pointer-events:auto !important;
}

.logo img{
    width:220px !important;
    display:block !important;
}

.navbar{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:42px !important;
}

.navbar > a,
.dropdown-toggle{
    color:#111827 !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-align:center !important;
}

.navbar > a:hover,
.dropdown-toggle:hover{
    color:var(--pink) !important;
}

.nav-dropdown{
    position:relative !important;
    padding:38px 0 !important;
}

.dropdown-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
}

.dropdown-menu{
    position:absolute !important;
    top:100% !important;
    left:50% !important;
    transform:translateX(-50%) translateY(12px) !important;
    width:290px !important;
    padding:18px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    border-radius:22px !important;
    box-shadow:0 20px 45px rgba(0,0,0,.25) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:all .3s ease !important;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

.dropdown-menu a{
    display:block !important;
    padding:13px 16px !important;
    color:var(--navy) !important;
    font-size:15px !important;
    font-weight:600 !important;
    border-radius:14px !important;
    white-space:nowrap !important;
    text-align:left !important;
}

.dropdown-menu a:hover{
    background:linear-gradient(135deg,var(--pink),var(--blue)) !important;
    color:#fff !important;
}

.header-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:150px !important;
    height:58px !important;
    padding:0 28px !important;
    border-radius:50px !important;
    background:linear-gradient(135deg,#ff5c7a,#ff3d68) !important;
    color:#fff !important;
    font-weight:700 !important;
    white-space:nowrap !important;
}

.menu-toggle{
    width:45px !important;
    height:45px !important;
    display:none !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    border:none !important;
    background:transparent !important;
    cursor:pointer !important;
    z-index:100000 !important;
}

.menu-toggle span{
    width:28px !important;
    height:3px !important;
    border-radius:20px !important;
    background:linear-gradient(90deg,var(--pink),var(--blue)) !important;
    transition:.35s ease !important;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg) !important;
}

.menu-toggle.active span:nth-child(2){
    opacity:0 !important;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg) !important;
}

/* =====================================================
   GLOBAL FOOTER
===================================================== */
.premium-footer{
    padding-left:8% !important;
    padding-right:8% !important;
}

.footer-container{
    width:100% !important;
    max-width:1500px !important;
    margin:0 auto !important;
    display:grid;
}

.footer-about p{
    max-width:390px !important;
    line-height:1.8 !important;
}

.footer-bottom{
    max-width:1500px !important;
    margin:70px auto 0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Portfolio book centering */
.book-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.book-card img{
    display:block !important;
    margin:0 auto 25px !important;
}

/* =====================================================
   LAPTOP
===================================================== */
@media(max-width:1200px){
    h1{font-size:58px !important;}
    h2{font-size:46px !important;}
    p{font-size:17px !important;}

    .service-about-wrapper,
    .service-benefits,
    .solutions-wrapper,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .editing-impact-section,
    .audio-impact-section,
    .trailer-impact-section,
    .storycraft-section,
    .legacy-section{
        gap:50px !important;
    }
}

/* =====================================================
   TABLET / MOBILE NAVIGATION
===================================================== */
@media(max-width:991px){
    .header{
        padding:14px !important;
    }

    .header-container{
        height:96px !important;
        padding:0 22px !important;
        border-radius:24px !important;
    }

    .logo img{
        width:165px !important;
    }

    .header-btn{
        display:none !important;
    }

    .menu-toggle{
        display:flex !important;
    }

    .navbar{
        position:absolute !important;
        top:112px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-width:none !important;
        display:none !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:20px !important;
        padding:32px 20px !important;
        border-radius:26px !important;
        background:rgba(0,0,0,.95) !important;
        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
        box-shadow:0 18px 45px rgba(0,0,0,.45) !important;
        z-index:99999 !important;
        overflow:hidden !important;
    }

    .navbar.active{
        display:flex !important;
    }

    .navbar > a,
    .dropdown-toggle{
        color:#fff !important;
        font-size:18px !important;
        font-weight:700 !important;
        text-align:center !important;
        width:100% !important;
    }

    .nav-dropdown{
        width:100% !important;
        padding:0 !important;
        text-align:center !important;
        position:relative !important;
    }

    .dropdown-toggle{
        justify-content:center !important;
    }

    .nav-dropdown .dropdown-menu{
        position:static !important;
        display:none !important;
        width:100% !important;
        max-width:360px !important;
        max-height:330px !important;
        overflow-y:auto !important;
        margin:16px auto 0 !important;
        padding:14px !important;
        background:#f4f4f4 !important;
        border-radius:18px !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        box-shadow:none !important;
    }

    .nav-dropdown:hover .dropdown-menu{
        display:none !important;
    }

    .nav-dropdown.active .dropdown-menu{
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    .nav-dropdown .dropdown-menu a{
        color:var(--navy) !important;
        font-size:14px !important;
        padding:10px !important;
        text-align:center !important;
        white-space:normal !important;
        width:100% !important;
    }

    /* Layout collapse */
    .service-about-wrapper,
    .process-grid,
    .types-grid,
    .solutions-wrapper,
    .faq-wrapper,
    .footer-container,
    .benefits-list,
    .stats,
    .premium-stats,
    .genres-grid,
    .contact-wrapper,
    .portfolio-grid,
    .book-showcase,
    .portfolio-intro,
    .portfolio-stats,
    .review-slider,
    .reviews-track,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .edit-impact-section,
    .audio-impact-section,
    .trailer-impact-section,
    .storycraft-section,
    .legacy-section,
    .service-benefits,
    .authority-section{
        grid-template-columns:1fr !important;
    }

    section{
        padding:90px 30px !important;
    }

    .hero,
    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero{
        padding-top:170px !important;
        text-align:center !important;
    }

    .hero-buttons{
        justify-content:center !important;
    }

    h1{font-size:48px !important; line-height:1.18 !important;}
    h2{font-size:40px !important; line-height:1.25 !important;}
    h3{font-size:24px !important;}
    p{font-size:16px !important; line-height:1.8 !important;}

    .feature-box,
    .type-card,
    .process-card,
    .genre-card,
    .review-card,
    .book-card,
    .faq-item,
    .contact-card{
        padding:28px !important;
    }

    .footer-container{
        text-align:center !important;
        gap:40px !important;
    }

    .footer-about p{
        margin:0 auto !important;
    }
}

/* =====================================================
   PHONES
===================================================== */
@media(max-width:600px){
    section{
        padding:80px 20px !important;
    }

    .header{
        padding:14px !important;
    }

    .header-container{
        height:92px !important;
        border-radius:22px !important;
        padding:0 18px !important;
    }

    .logo img{
        width:155px !important;
    }

    .navbar{
        top:106px !important;
        left:14px !important;
        right:14px !important;
        padding:30px 18px !important;
    }

    .hero,
    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero{
        padding-top:165px !important;
        min-height:auto !important;
    }

    h1{font-size:36px !important;}
    h2{font-size:31px !important;}
    h3{font-size:21px !important;}
    p{font-size:15px !important;}

    .primary-btn,
    .secondary-btn{
        width:100% !important;
        justify-content:center !important;
    }

    .hero-buttons{
        flex-direction:column !important;
        width:100% !important;
    }

    .feature-box,
    .type-card,
    .process-card,
    .review-card,
    .faq-item,
    .contact-card,
    .book-card{
        padding:24px !important;
        border-radius:20px !important;
    }

    input,
    textarea,
    select{
        font-size:16px !important;
    }

    .book-card img{
        width:150px !important;
        height:auto !important;
        max-height:230px !important;
        object-fit:contain !important;
    }

    .premium-footer{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .footer-bottom{
        flex-direction:column !important;
        text-align:center !important;
        gap:14px !important;
    }

    .footer-bottom div{
        justify-content:center !important;
        flex-wrap:wrap !important;
    }
}


/* =====================================================
   GLOBAL HERO FORM REUSE
   Used on hero, about FAQ, contact page, and any form area.
===================================================== */

.hero-form{
    width:100% !important;
    max-width:620px !important;
    padding:30px !important;
    border-radius:30px !important;
    background:linear-gradient(145deg,rgba(255,255,255,0.10),rgba(255,255,255,0.045)) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border:1px solid rgba(255,255,255,0.10) !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.35) !important;
    margin:0 auto !important;
}

.hero-form h2{
    text-align:center !important;
    font-size:28px !important;
    line-height:1.25 !important;
    margin-bottom:22px !important;
    color:#fff !important;
    font-weight:800 !important;
}

.input-group{
    margin-bottom:14px !important;
}

.input-group label{
    display:block !important;
    margin-bottom:10px !important;
    color:#fff !important;
    font-weight:600 !important;
}

.input-group input,
.input-group select{
    width:100% !important;
    padding:14px 16px !important;
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    background:rgba(255,255,255,0.10) !important;
    color:#fff !important;
    font-size:16px !important;
    outline:none !important;
    appearance:none !important;
}

.input-group input::placeholder{
    color:#cfcfcf !important;
}

.input-group select option{
    background:#182131 !important;
    color:#fff !important;
}

.input-group input:focus,
.input-group select:focus{
    border-color:var(--blue) !important;
    box-shadow:0 0 16px rgba(31,125,209,0.35) !important;
}

.checkbox-section{
    margin-top:24px !important;
}

.checkbox-section h3{
    margin-bottom:18px !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.35 !important;
}

.checkbox-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px 22px !important;
}

.checkbox-grid label{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#d9d9d9 !important;
    font-size:15px !important;
    font-weight:500 !important;
}

.checkbox-grid input[type="checkbox"]{
    width:16px !important;
    height:16px !important;
    flex:0 0 auto !important;
    accent-color:var(--pink) !important;
}

.hero-form button{
    width:100% !important;
    padding:17px !important;
    margin-top:28px !important;
    border:none !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,var(--pink),var(--blue)) !important;
    color:#fff !important;
    font-size:17px !important;
    font-weight:800 !important;
    cursor:pointer !important;
}

.hero-form button:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 14px 30px rgba(31,125,209,0.28) !important;
}

/* Contact page: keep the reused hero form vertically balanced */
.contact-main .hero-form,
.faq-wrapper .hero-form{
    align-self:start !important;
}

/* =====================================================
   INDEX SERVICE CARDS - EQUAL HEIGHT FIX
===================================================== */

.services .service-container{
    align-items:stretch !important;
}

.services .service-card{
    height:100% !important;
    min-height:360px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
}

.services .service-card:last-child{
    grid-column:auto !important;
    max-width:none !important;
    justify-self:stretch !important;
}

.services .service-card p{
    flex:1 1 auto !important;
}

.services .service-btn{
    margin-top:auto !important;
    width:max-content !important;
}

/* =====================================================
   FAQ ACCORDION SAFETY FIXES
===================================================== */

.contact-faq-answer,
.faq-answer{
    display:block !important;
}

.contact-faq-item:not(.open):not(.active) .contact-faq-answer,
.faq-item:not(.open):not(.active) .faq-answer{
    max-height:0 !important;
    overflow:hidden !important;
}

.contact-faq-item.open .contact-faq-answer,
.contact-faq-item.active .contact-faq-answer,
.faq-item.open .faq-answer,
.faq-item.active .faq-answer{
    max-height:320px !important;
}

.contact-faq-item.open .contact-faq-question i,
.contact-faq-item.active .contact-faq-question i,
.faq-item.open .faq-question i,
.faq-item.active .faq-question i{
    transform:rotate(45deg) !important;
}

@media(max-width:991px){
    .hero-form{
        max-width:620px !important;
    }

    .services .service-card{
        min-height:340px !important;
    }
}

@media(max-width:600px){
    .hero-form{
        padding:26px 20px !important;
        border-radius:24px !important;
    }

    .hero-form h2{
        font-size:27px !important;
    }

    .checkbox-grid{
        grid-template-columns:1fr !important;
    }

    .services .service-card{
        min-height:auto !important;
    }

    .services .service-btn{
        width:100% !important;
        text-align:center !important;
    }
}


/* =========================
GLOBAL LIVE FORM + CLICKABLE FOOTER HELPERS
========================= */
.hp-field,
.website-field{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
}

.footer-contact a{
    color:#ffffff;
    transition:0.3s ease;
}

.footer-contact a:hover{
    color:#ff4f6d;
}

.trustpilot-logo a{
    display:inline-block;
}

.trustpilot-logo img{
    cursor:pointer;
    transition:0.3s ease;
}

.trustpilot-logo img:hover{
    transform:translateY(-3px) scale(1.04);
}


/* =========================
GLOBAL FOOTER CONTACT LINKS
========================= */

.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.footer-contact p i{
    color:#ff4f6d;
    margin-top:4px;
    min-width:18px;
    flex-shrink:0;
    text-align:center;
}

.footer-contact p a{
    color:#ffffff;
    transition:0.3s ease;
    line-height:1.6;
}

.footer-contact p a:hover{
    color:#ff4f6d;
}

@media(max-width:991px){
    .footer-contact p{
        justify-content:center;
    }
}

/* =====================================================
   FINAL RESPONSIVE STABILITY PATCH
   Added after all page CSS to correct laptop/tablet/mobile layout.
===================================================== */

*{ box-sizing:border-box !important; }
html, body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
img, video, iframe{ max-width:100% !important; }

/* Keep all main content comfortably inside the viewport */
section{ width:100% !important; }

/* ---------------- DESKTOP / LAPTOP POLISH ---------------- */
@media (min-width:1201px) and (max-width:1440px){
    .header{ padding:16px 32px !important; }
    .header-container{ height:94px !important; padding:0 30px !important; max-width:1320px !important; }
    .logo img{ width:190px !important; }
    .navbar{ gap:26px !important; }
    .navbar > a, .dropdown-toggle{ font-size:15px !important; }
    .header-btn{ min-width:132px !important; height:50px !important; padding:0 22px !important; font-size:14px !important; }

    section{ padding-left:6% !important; padding-right:6% !important; }

    .premium-hero{
        grid-template-columns:minmax(0,1fr) minmax(390px,0.85fr) !important;
        gap:34px !important;
        padding-top:145px !important;
        padding-bottom:80px !important;
        min-height:auto !important;
    }
    .hero-left{ padding-right:20px !important; }
    .hero-left h1, .premium-hero h1{ font-size:58px !important; line-height:1.08 !important; }
    .hero-left p{ font-size:18px !important; max-width:620px !important; }
    .brand-logo{ width:165px !important; height:76px !important; }
    .hero-form{ max-width:520px !important; padding:28px !important; transform:none !important; }
    .hero-form h2{ font-size:25px !important; }

    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{
        padding-top:155px !important;
        min-height:620px !important;
    }

    .service-hero h1,
    .portfolio-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .policy-hero h1,
    .terms-hero h1,
    .terms-use-hero h1{ font-size:58px !important; line-height:1.12 !important; }

    h2,
    .section-heading h2,
    .portfolio-intro h2,
    .service-about-content h2,
    .benefits-content h2,
    .cta-content h2,
    .faq-heading h2{ font-size:44px !important; line-height:1.18 !important; }

    p{ font-size:16px !important; }

    .service-about-wrapper,
    .service-benefits,
    .solutions-wrapper,
    .faq-wrapper,
    .contact-main,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .edit-impact-section,
    .audio-impact-section,
    .trailer-impact-section,
    .storycraft-section,
    .legacy-section{ gap:38px !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .book-showcase,
    .genres-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:26px !important; }
    .process-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px !important; }

    .service-card,
    .type-card,
    .book-card,
    .genre-card,
    .process-card{ padding:28px !important; }

    .footer-container{ max-width:1200px !important; grid-template-columns:1.25fr .85fr .95fr 1.25fr !important; gap:42px !important; }
    .footer-about img{ width:210px !important; }
}

/* Small laptops and large tablets in landscape */
@media (min-width:992px) and (max-width:1200px){
    .header{ padding:14px 24px !important; }
    .header-container{ height:88px !important; padding:0 24px !important; }
    .logo img{ width:175px !important; }
    .navbar{ gap:20px !important; }
    .navbar > a, .dropdown-toggle{ font-size:14px !important; }
    .header-btn{ min-width:120px !important; height:48px !important; padding:0 18px !important; font-size:13px !important; }

    section{ padding-left:5% !important; padding-right:5% !important; }

    .premium-hero{
        grid-template-columns:minmax(0,1fr) minmax(360px,.9fr) !important;
        gap:26px !important;
        padding-top:132px !important;
        padding-bottom:70px !important;
        min-height:auto !important;
    }
    .hero-left{ padding-right:0 !important; }
    .hero-left h1, .premium-hero h1{ font-size:50px !important; line-height:1.1 !important; }
    .hero-left p{ font-size:16px !important; line-height:1.7 !important; }
    .brand-logo{ width:145px !important; height:68px !important; }
    .hero-form{ max-width:480px !important; padding:24px !important; transform:none !important; }
    .hero-form h2{ font-size:23px !important; }
    .input-group input, .input-group select{ padding:12px 14px !important; font-size:14px !important; }

    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{ padding-top:135px !important; min-height:560px !important; }

    .service-hero h1,
    .portfolio-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .policy-hero h1,
    .terms-hero h1,
    .terms-use-hero h1{ font-size:50px !important; }

    h2,
    .section-heading h2,
    .portfolio-intro h2,
    .service-about-content h2,
    .benefits-content h2,
    .cta-content h2,
    .faq-heading h2{ font-size:38px !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .book-showcase,
    .genres-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:22px !important; }
    .process-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; }

    .service-card,
    .type-card,
    .book-card,
    .genre-card,
    .process-card{ padding:24px !important; }

    .footer-container{ max-width:1050px !important; grid-template-columns:1.2fr .8fr .9fr 1.2fr !important; gap:30px !important; }
    .footer-about img{ width:190px !important; }
}

/* ---------------- TABLET ---------------- */
@media (min-width:701px) and (max-width:991px){
    .header{ padding:16px 24px !important; }
    .header-container{ height:96px !important; border-radius:24px !important; }
    .navbar{
        top:116px !important;
        left:24px !important;
        right:24px !important;
        width:auto !important;
        max-width:calc(100vw - 48px) !important;
        margin:0 auto !important;
        transform:none !important;
    }

    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{ padding-top:175px !important; }

    .premium-hero{ grid-template-columns:1fr !important; gap:46px !important; }
    .hero-left{ padding-right:0 !important; text-align:center !important; }
    .hero-left p{ margin-left:auto !important; margin-right:auto !important; }
    .hero-brands{ justify-content:center !important; }

    .service-about-wrapper,
    .portfolio-intro,
    .contact-main,
    .faq-wrapper,
    .solutions-wrapper,
    .service-benefits,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .edit-impact-section,
    .audio-impact-section,
    .trailer-impact-section{ grid-template-columns:1fr !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .book-showcase,
    .genres-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .process-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ---------------- MOBILE NAV AND LAYOUT HARD FIX ---------------- */
@media (max-width:700px){
    .header{ padding:14px !important; }
    .header-container{ width:100% !important; max-width:100% !important; height:92px !important; border-radius:22px !important; padding:0 18px !important; }
    .logo img{ width:155px !important; }

    .navbar{
        position:absolute !important;
        top:106px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-width:calc(100vw - 28px) !important;
        transform:none !important;
        margin:0 auto !important;
        padding:28px 18px !important;
        overflow:hidden !important;
    }

    .nav-dropdown{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; }
    .dropdown-toggle{ width:100% !important; justify-content:center !important; text-align:center !important; }

    .nav-dropdown .dropdown-menu{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        transform:none !important;
        width:min(360px, calc(100vw - 72px)) !important;
        max-width:min(360px, calc(100vw - 72px)) !important;
        margin:14px auto 0 !important;
        align-self:center !important;
        padding:14px !important;
        box-sizing:border-box !important;
        overflow-x:hidden !important;
    }

    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{ padding-top:165px !important; text-align:center !important; }

    .premium-hero{ grid-template-columns:1fr !important; gap:38px !important; }
    .hero-left{ padding-right:0 !important; text-align:center !important; }
    .hero-left p{ margin-left:auto !important; margin-right:auto !important; }
    .hero-brands{ justify-content:center !important; gap:14px !important; }
    .brand-logo{ width:145px !important; height:72px !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .book-showcase,
    .genres-grid,
    .process-grid,
    .service-about-wrapper,
    .portfolio-intro,
    .contact-main,
    .faq-wrapper,
    .solutions-wrapper,
    .service-benefits,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .edit-impact-section,
    .audio-impact-section,
    .trailer-impact-section{ grid-template-columns:1fr !important; }

    .hero-form{ transform:none !important; max-width:100% !important; }
    .footer-container{ grid-template-columns:1fr !important; text-align:center !important; }
    .footer-contact p{ justify-content:center !important; }
}

/* Very small phones */
@media (max-width:420px){
    .logo img{ width:138px !important; }
    .navbar{ left:10px !important; right:10px !important; max-width:calc(100vw - 20px) !important; }
    .nav-dropdown .dropdown-menu{ width:calc(100vw - 64px) !important; max-width:calc(100vw - 64px) !important; }
    .hero-left h1, .premium-hero h1,
    .service-hero h1,
    .portfolio-hero h1,
    .about-hero h1,
    .contact-hero h1{ font-size:32px !important; }
    .hero-form{ padding:22px 16px !important; }
    .brand-logo{ width:132px !important; }
}

@media(max-width:991px){ body.nav-open{ overflow:hidden !important; } }


/* =====================================================
   FINAL GLOBAL POLISH: RESPONSIVE ALIGNMENT + FAQ FIXES
   Added to keep cards, forms, images, nav dropdowns and FAQs stable.
===================================================== */

html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

img{
    max-width:100% !important;
    height:auto;
}

section{
    box-sizing:border-box !important;
}

/* Keep card grids visually even */
.services .service-container,
.service-container,
.types-grid,
.process-grid,
.book-showcase,
.genres-grid,
.benefits-list,
.portfolio-stats,
.premium-stats{
    align-items:stretch !important;
}

.service-card,
.type-card,
.process-card,
.book-card,
.genre-card,
.feature-box,
.info-card,
.review-card,
.stat-item,
.solution-tab{
    height:100% !important;
    box-sizing:border-box !important;
}

.service-card,
.type-card,
.process-card,
.genre-card,
.feature-box,
.book-card{
    display:flex !important;
    flex-direction:column !important;
}

.service-card p,
.type-card p,
.process-card p,
.genre-card p,
.feature-box p,
.book-card p{
    flex:1 1 auto !important;
}

.book-card,
.portfolio-card{
    align-items:center !important;
    text-align:center !important;
}

.book-card img,
.portfolio-card img,
.service-about-image img,
.about-image img,
.contact-image img{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* FAQ: force click-open behavior on About, Contact and Home */
.faq-answer,
.contact-faq-answer{
    display:block !important;
    max-height:0 !important;
    overflow:hidden !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    transition:max-height .35s ease, padding .35s ease !important;
}

.faq-item.active .faq-answer,
.faq-item.open .faq-answer,
.contact-faq-item.active .contact-faq-answer,
.contact-faq-item.open .contact-faq-answer{
    max-height:600px !important;
    padding-top:18px !important;
    padding-bottom:22px !important;
}

.faq-question,
.contact-faq-question{
    width:100% !important;
    cursor:pointer !important;
    text-align:left !important;
}

.faq-question i,
.contact-faq-question i{
    transition:transform .3s ease !important;
}

.faq-item.active .faq-question i,
.faq-item.open .faq-question i,
.contact-faq-item.active .contact-faq-question i,
.contact-faq-item.open .contact-faq-question i{
    transform:rotate(45deg) !important;
}

/* Forms: consistent alignment */
.hero-form,
.contact-form-box,
.faq-form-box{
    box-sizing:border-box !important;
    width:100% !important;
}

.input-group,
.hero-form .input-group,
.contact-form-box .input-group,
.faq-form-box .input-group{
    width:100% !important;
    margin-bottom:16px !important;
}

.input-group label,
.hero-form label,
.contact-form-box label,
.faq-form-box label{
    display:block !important;
    text-align:left !important;
}

.hero-form input,
.hero-form select,
.hero-form textarea,
.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea,
.faq-form-box input,
.faq-form-box select,
.faq-form-box textarea{
    width:100% !important;
    box-sizing:border-box !important;
}

.checkbox-grid,
.service-grid,
.faq-service-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px 36px !important;
    align-items:start !important;
}

.checkbox-grid label,
.service-grid label,
.faq-service-grid label,
.checkbox-section label{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 !important;
    line-height:1.25 !important;
}

.checkbox-grid input[type="checkbox"],
.service-grid input[type="checkbox"],
.faq-service-grid input[type="checkbox"],
.checkbox-section input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    margin:0 !important;
}

/* Desktop and laptop polish */
@media (min-width:992px){
    .navbar{
        flex-wrap:nowrap !important;
    }

    .dropdown-menu{
        z-index:100000 !important;
    }

    .footer-container{
        align-items:flex-start !important;
    }

    .footer-contact p{
        display:flex !important;
        align-items:flex-start !important;
        gap:10px !important;
    }

    .footer-contact i{
        margin-top:4px !important;
        flex:0 0 auto !important;
    }
}

@media (min-width:1024px) and (max-width:1440px){
    .header{ padding:16px 28px !important; }
    .header-container{ height:94px !important; padding:0 28px !important; }
    .logo img{ width:185px !important; }
    .navbar{ gap:24px !important; }
    .navbar > a,
    .dropdown-toggle{ font-size:15px !important; }
    .header-btn{ min-width:128px !important; height:50px !important; padding:0 20px !important; font-size:14px !important; }

    section{ padding-left:6% !important; padding-right:6% !important; }

    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{ padding-top:155px !important; }

    h1,
    .premium-hero h1,
    .service-hero h1,
    .portfolio-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .policy-hero h1,
    .terms-hero h1,
    .terms-use-hero h1{ font-size:56px !important; line-height:1.12 !important; }

    h2,
    .section-heading h2,
    .service-about-content h2,
    .benefits-content h2,
    .cta-content h2,
    .portfolio-intro h2,
    .faq-heading h2{ font-size:43px !important; line-height:1.18 !important; }

    .hero-form,
    .contact-form-box,
    .faq-form-box{ padding:34px !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .book-showcase,
    .genres-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:28px !important; }

    .process-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:22px !important; }

    .footer-container{ max-width:1200px !important; gap:40px !important; grid-template-columns:1.25fr .9fr .9fr 1.25fr !important; }
}

/* Tablet */
@media (max-width:991px){
    .header{ padding:14px !important; }
    .header-container{ height:96px !important; padding:0 22px !important; border-radius:24px !important; }
    .logo img{ width:165px !important; }
    .header-btn{ display:none !important; }
    .menu-toggle{ display:flex !important; }

    .navbar{
        position:absolute !important;
        top:112px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-width:calc(100vw - 28px) !important;
        transform:none !important;
        margin:0 auto !important;
        display:none !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:20px !important;
        padding:30px 18px !important;
        border-radius:26px !important;
        background:rgba(0,0,0,.95) !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .navbar.active{ display:flex !important; }
    .navbar > a,
    .dropdown-toggle{ width:100% !important; color:#fff !important; text-align:center !important; justify-content:center !important; }

    .nav-dropdown{
        width:100% !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
    }

    .nav-dropdown .dropdown-menu{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        transform:none !important;
        display:none !important;
        width:min(360px, calc(100vw - 72px)) !important;
        max-width:min(360px, calc(100vw - 72px)) !important;
        margin:14px auto 0 !important;
        padding:14px !important;
        box-sizing:border-box !important;
        align-self:center !important;
        background:#f4f4f4 !important;
        border-radius:18px !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        box-shadow:none !important;
    }

    .nav-dropdown.active .dropdown-menu{
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    .nav-dropdown .dropdown-menu a{
        width:100% !important;
        text-align:center !important;
        white-space:normal !important;
        color:#07111f !important;
        padding:10px !important;
    }

    section{ padding-left:30px !important; padding-right:30px !important; }

    .premium-hero,
    .service-hero,
    .portfolio-hero,
    .about-hero,
    .contact-hero,
    .policy-hero,
    .terms-hero,
    .terms-use-hero{ padding-top:165px !important; text-align:center !important; }

    .premium-hero,
    .hero-wrapper,
    .service-about-wrapper,
    .service-benefits,
    .portfolio-intro,
    .contact-main,
    .faq-wrapper,
    .solutions-wrapper,
    .publishing-impact-section,
    .marketing-impact-section,
    .design-impact-section,
    .edit-impact-section,
    .audio-impact-section,
    .trailer-impact-section{ grid-template-columns:1fr !important; }

    .services .service-container,
    .service-container,
    .types-grid,
    .process-grid,
    .book-showcase,
    .genres-grid,
    .benefits-list,
    .portfolio-stats,
    .premium-stats{ grid-template-columns:1fr !important; }

    .hero-left,
    .service-hero-content,
    .portfolio-hero-content,
    .about-hero-content,
    .contact-hero-content{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }

    .hero-left p,
    .service-hero p,
    .portfolio-hero p,
    .about-hero p,
    .contact-hero p{ margin-left:auto !important; margin-right:auto !important; }

    .hero-buttons{ justify-content:center !important; }
    .hero-form{ max-width:640px !important; margin-left:auto !important; margin-right:auto !important; }
    .footer-container{ grid-template-columns:1fr !important; text-align:center !important; }
    .footer-about p{ margin-left:auto !important; margin-right:auto !important; }
    .footer-contact p{ justify-content:center !important; }
}

/* Mobile */
@media (max-width:600px){
    section{ padding-left:20px !important; padding-right:20px !important; }
    .header-container{ height:92px !important; padding:0 20px !important; }
    .logo img{ width:150px !important; }
    .navbar{ top:106px !important; left:12px !important; right:12px !important; max-width:calc(100vw - 24px) !important; padding:26px 16px !important; }
    .nav-dropdown .dropdown-menu{ width:calc(100vw - 64px) !important; max-width:calc(100vw - 64px) !important; }

    h1,
    .premium-hero h1,
    .service-hero h1,
    .portfolio-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .policy-hero h1,
    .terms-hero h1,
    .terms-use-hero h1{ font-size:36px !important; line-height:1.18 !important; }

    h2,
    .section-heading h2,
    .service-about-content h2,
    .benefits-content h2,
    .cta-content h2,
    .portfolio-intro h2,
    .faq-heading h2{ font-size:32px !important; line-height:1.2 !important; }

    .hero-form,
    .contact-form-box,
    .faq-form-box{ padding:26px 18px !important; }

    .checkbox-grid,
    .service-grid,
    .faq-service-grid{ grid-template-columns:1fr !important; gap:15px !important; }

    .primary-btn,
    .secondary-btn,
    .hero-buttons a{ width:100% !important; justify-content:center !important; text-align:center !important; }
    .hero-buttons{ flex-direction:column !important; }
    .footer-bottom{ flex-direction:column !important; align-items:center !important; text-align:center !important; }
    .footer-bottom div{ justify-content:center !important; flex-wrap:wrap !important; }
}


/* =====================================================
   FINAL ALIGNMENT + FAQ + REVIEWS + COUNTER FIXES
===================================================== */

/* universal overflow guard */
html, body{ overflow-x:hidden !important; }
img{ max-width:100%; height:auto; }

/* Same counter section everywhere */
.premium-stats,
.stats.premium-stats{
    padding:80px 8% !important;
    background:#dfe3ea !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:stretch !important;
    gap:0 !important;
    color:#07111f !important;
}
.premium-stats .stat-item{
    padding:10px 42px !important;
    border-right:1px solid rgba(255,255,255,0.45) !important;
    text-align:left !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    min-height:170px !important;
}
.premium-stats .stat-item:last-child{ border-right:none !important; }
.premium-stats .stat-item h2{
    color:#07111f !important;
    font-size:56px !important;
    line-height:1 !important;
    font-weight:800 !important;
    margin:0 0 35px !important;
}
.premium-stats .stat-item h3{
    color:#07111f !important;
    font-size:24px !important;
    line-height:1.25 !important;
    margin:0 0 16px !important;
    font-weight:800 !important;
}
.premium-stats .stat-item p{
    color:#07111f !important;
    font-size:17px !important;
    line-height:1.55 !important;
    margin:0 !important;
    max-width:310px !important;
}

/* Reviews: same size cards + clean slider */
.reviews-section{
    padding:110px 8% !important;
    background:#dfe3ea !important;
    overflow:hidden !important;
}
.reviews-header{
    text-align:center !important;
    margin:0 auto 60px !important;
    max-width:900px !important;
}
.reviews-header span{ color:#ff4f6d !important; font-size:14px !important; font-weight:800 !important; letter-spacing:2px !important; }
.reviews-header h2{ color:#07111f !important; font-size:56px !important; line-height:1.15 !important; margin:16px 0 !important; }
.reviews-header p{ color:#334155 !important; font-size:18px !important; line-height:1.8 !important; margin:0 auto !important; }
.reviews-slider{
    width:100% !important;
    overflow:hidden !important;
    position:relative !important;
}
.reviews-track{
    display:flex !important;
    align-items:stretch !important;
    gap:30px !important;
    width:max-content !important;
    animation:reviewScroll 35s linear infinite !important;
}
.reviews-track:hover{ animation-play-state:paused !important; }
.review-card{
    flex:0 0 360px !important;
    width:360px !important;
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
    padding:34px !important;
    background:#f7f8fb !important;
    border-radius:26px !important;
    border:1px solid rgba(255,79,109,0.12) !important;
    box-shadow:0 18px 45px rgba(0,0,0,0.08) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
}
.review-card .stars,
.stars{ color:#ffc107 !important; font-size:22px !important; letter-spacing:3px !important; margin:0 0 18px !important; }
.review-card h3{ color:#07111f !important; font-size:27px !important; line-height:1.2 !important; margin:0 0 18px !important; font-weight:800 !important; }
.review-card p{ color:#475569 !important; font-size:16px !important; line-height:1.75 !important; margin:0 !important; }
@keyframes reviewScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* FAQ click/open behavior for every page */
.faq-answer,
.contact-faq-answer{
    max-height:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease !important;
}
.faq-item.active .faq-answer,
.faq-item.open .faq-answer,
.contact-faq-item.active .contact-faq-answer,
.contact-faq-item.open .contact-faq-answer{
    max-height:420px !important;
    opacity:1 !important;
    padding-top:18px !important;
    padding-bottom:24px !important;
}
.faq-item.active .faq-question i,
.faq-item.open .faq-question i,
.contact-faq-item.active .contact-faq-question i,
.contact-faq-item.open .contact-faq-question i{
    transform:rotate(45deg) !important;
}
.faq-question,
.contact-faq-question{ cursor:pointer !important; }

/* About FAQ + form alignment */
.faq-wrapper{
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr) !important;
    gap:70px !important;
    align-items:center !important;
    max-width:1500px !important;
    margin:0 auto !important;
}
.faq-left{
    width:100% !important;
    align-self:center !important;
}
.faq-wrapper .hero-form{
    width:100% !important;
    max-width:560px !important;
    align-self:center !important;
    margin:0 auto !important;
}
.faq-heading,
.contact-faq-heading{
    text-align:center !important;
    max-width:900px !important;
    margin:0 auto 65px !important;
}

/* Contact FAQ section */
.contact-faq-wrapper{
    max-width:1050px !important;
    margin:0 auto !important;
}
.contact-faq-item,
.faq-item{
    width:100% !important;
}
.contact-faq-question,
.faq-question{
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
}

/* Consistent form alignment */
.hero-form,
.contact-form-box{
    display:block !important;
}
.hero-form .input-group,
.contact-form-box .input-group{ width:100% !important; }
.checkbox-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px 60px !important;
    align-items:center !important;
}
.checkbox-grid label{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-height:24px !important;
    line-height:1.25 !important;
    margin:0 !important;
}
.checkbox-grid input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    flex:0 0 18px !important;
}

/* Card equalization */
.service-card,
.type-card,
.process-card,
.genre-card,
.book-card,
.feature-box,
.info-card{
    height:100% !important;
}
.services-grid,
.types-grid,
.process-grid,
.book-showcase,
.genres-grid{
    align-items:stretch !important;
}
.book-card img{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

@media(min-width:1024px) and (max-width:1440px){
    .premium-stats{ padding:70px 6% !important; }
    .premium-stats .stat-item{ padding:10px 28px !important; }
    .premium-stats .stat-item h2{ font-size:48px !important; }
    .premium-stats .stat-item h3{ font-size:22px !important; }
    .premium-stats .stat-item p{ font-size:15px !important; }
    .reviews-header h2{ font-size:46px !important; }
    .review-card{ flex-basis:330px !important; width:330px !important; height:290px !important; min-height:290px !important; max-height:290px !important; padding:30px !important; }
    .review-card h3{ font-size:24px !important; }
    .review-card p{ font-size:15px !important; }
    .faq-wrapper{ gap:45px !important; grid-template-columns:1.1fr .9fr !important; }
    .faq-wrapper .hero-form{ max-width:520px !important; }
}

@media(max-width:991px){
    .premium-stats{ grid-template-columns:repeat(2,1fr) !important; gap:25px !important; padding:80px 30px !important; }
    .premium-stats .stat-item{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,.45) !important; padding:20px !important; text-align:center !important; align-items:center !important; }
    .premium-stats .stat-item h2{ font-size:46px !important; margin-bottom:18px !important; }
    .premium-stats .stat-item h3{ font-size:22px !important; }
    .premium-stats .stat-item p{ font-size:15px !important; margin:0 auto !important; }
    .reviews-section{ padding:90px 30px !important; }
    .reviews-header h2{ font-size:40px !important; }
    .review-card{ flex-basis:320px !important; width:320px !important; height:285px !important; min-height:285px !important; max-height:285px !important; padding:28px !important; }
    .faq-wrapper{ grid-template-columns:1fr !important; gap:40px !important; align-items:start !important; }
    .faq-wrapper .hero-form{ max-width:640px !important; }
}

@media(max-width:600px){
    .premium-stats{ grid-template-columns:1fr !important; gap:18px !important; padding:70px 20px !important; }
    .premium-stats .stat-item{ min-height:auto !important; padding:24px 10px !important; }
    .premium-stats .stat-item h2{ font-size:42px !important; }
    .premium-stats .stat-item h3{ font-size:21px !important; }
    .reviews-section{ padding:80px 20px !important; }
    .reviews-header h2{ font-size:32px !important; }
    .reviews-header p{ font-size:15px !important; }
    .reviews-track{ gap:18px !important; }
    .review-card{ flex-basis:285px !important; width:285px !important; height:300px !important; min-height:300px !important; max-height:300px !important; padding:24px !important; }
    .review-card h3{ font-size:22px !important; }
    .review-card p{ font-size:14px !important; line-height:1.65 !important; }
    .faq-question,
    .contact-faq-question{ font-size:16px !important; padding:18px 20px !important; min-height:64px !important; }
    .checkbox-grid{ grid-template-columns:1fr !important; gap:14px !important; }
}

/* FINAL FIX: MOBILE SERVICES DROPDOWN CENTER */
@media (max-width: 991px){

    .navbar{
        overflow-y:auto !important;
        overflow-x:hidden !important;
        max-height:calc(100vh - 130px) !important;
    }

    .navbar .nav-dropdown{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
        padding:0 !important;
        margin:0 !important;
        text-align:center !important;
    }

    .navbar .nav-dropdown .dropdown-toggle{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:8px !important;
        text-align:center !important;
    }

    .navbar .nav-dropdown .dropdown-menu{
        position:static !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;

        width:92% !important;
        max-width:330px !important;
        min-width:0 !important;

        margin:16px auto 0 !important;
        padding:14px 12px !important;

        display:none !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        background:#f4f4f4 !important;
        border-radius:18px !important;
        box-shadow:none !important;

        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;

        max-height:280px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
    }

    .navbar .nav-dropdown.active .dropdown-menu{
        display:flex !important;
    }

    .navbar .nav-dropdown:not(.active) .dropdown-menu{
        display:none !important;
    }

    .navbar .dropdown-menu a{
        width:100% !important;
        display:block !important;
        padding:11px 8px !important;
        margin:0 !important;

        text-align:center !important;
        white-space:normal !important;

        color:#07111f !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
        box-sizing:border-box !important;
    }
}


/* ===============================
HOME CTA SECTION RESPONSIVE FIX
Actual classes: premium-cta, cta-image, cta-content
=============================== */

@media(max-width:991px){

    .premium-cta{
        grid-template-columns:1fr !important;
        min-height:auto !important;
        padding:0 !important;
        text-align:center !important;
    }

    .premium-cta .cta-image{
        height:380px !important;
        width:100% !important;
    }

    .premium-cta .cta-image img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    .premium-cta .cta-image::after{
        background:linear-gradient(
            180deg,
            rgba(7,17,31,0.25),
            rgba(7,17,31,0.85)
        ) !important;
    }

    .premium-cta .cta-content{
        padding:70px 30px !important;
        max-width:720px !important;
        margin:0 auto !important;
        text-align:center !important;
    }

    .premium-cta .cta-tag{
        display:inline-flex !important;
        margin:0 auto 25px !important;
    }

    .premium-cta .cta-content h2{
        font-size:46px !important;
        line-height:1.15 !important;
        max-width:620px !important;
        margin:0 auto 25px !important;
    }

    .premium-cta .cta-content p{
        font-size:18px !important;
        line-height:1.8 !important;
        max-width:620px !important;
        margin:0 auto 35px !important;
    }
}

@media(max-width:600px){

    .premium-cta .cta-image{
        height:300px !important;
    }

    .premium-cta .cta-content{
        padding:60px 22px !important;
    }

    .premium-cta .cta-content h2{
        font-size:34px !important;
        line-height:1.2 !important;
        max-width:330px !important;
    }

    .premium-cta .cta-content p{
        font-size:16px !important;
        line-height:1.75 !important;
        max-width:330px !important;
    }

    .premium-cta .cta-btn{
        width:100% !important;
        max-width:280px !important;
        text-align:center !important;
    }
}


/* FORCE FIX COUNTER SECTION ON MOBILE */

@media (max-width: 767px){

    section.stats.premium-stats{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        padding:60px 20px !important;
        margin:0 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    section.stats.premium-stats > .stat-item{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:100% !important;

        padding:35px 0 !important;
        margin:0 auto !important;

        text-align:center !important;

        border-right:0 !important;
        border-left:0 !important;
        border-bottom:1px solid rgba(7,17,31,0.15) !important;

        float:none !important;
        clear:both !important;
        box-sizing:border-box !important;
    }

    section.stats.premium-stats > .stat-item:last-child{
        border-bottom:0 !important;
    }

    section.stats.premium-stats > .stat-item h2{
        display:block !important;
        width:100% !important;

        font-size:46px !important;
        line-height:1.1 !important;

        margin:0 0 15px !important;
        padding:0 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    section.stats.premium-stats > .stat-item h3{
        display:block !important;
        width:100% !important;

        font-size:24px !important;
        line-height:1.25 !important;

        margin:0 0 12px !important;
        padding:0 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    section.stats.premium-stats > .stat-item p{
        display:block !important;
        width:100% !important;
        max-width:300px !important;

        font-size:16px !important;
        line-height:1.65 !important;

        margin:0 auto !important;
        padding:0 !important;

        text-align:center !important;
        white-space:normal !important;
    }
}