/* ============================================================================
   piku-bridge.css — minimal glue between the Laravel shell and ported Piku CSS.
   The public DOM is rebuilt to Piku component markup, so Piku's own style.css
   does the heavy lifting. This file ONLY:
     1. neutralises CreatVolt main.css body/dark-theme rules on public pages,
     2. ensures the Piku main wrapper sits on the correct light background,
     3. keeps Bootstrap 5.3 data-bs-theme=dark from darkening Piku components.
   No layout values live here. Dashboard/auth are untouched (they don't load it).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Design tokens — the Piku Home 5 palette in one place so the public pages use
   consistent, maintainable colours instead of scattered hardcoded hexes.
   ---------------------------------------------------------------------------- */
:root {
    --pk-dark: #171417;        /* hero / footer / dark stage */
    --pk-yellow: #FFD542;      /* primary accent (CTA, chips) */
    --pk-yellow-soft: #FFEB80; /* soft yellow section bg */
    --pk-green: #76FFCE;
    --pk-pink: #FF90ED;
    --pk-purple: #8A42FF;
    --pk-blue-soft: #eaf5fc;   /* workflow card bg */
    --pk-text: #171417;
    --pk-text-muted: rgba(0, 0, 0, 0.65);
    --pk-border: rgba(0, 0, 0, 0.08);
    --pk-card: #ffffff;
    --pk-surface: #F3F5F6;
}

/* Bootstrap 5.3 dark theme is set on <html data-bs-theme="dark"> globally.
   Piku is a light design, so scope light surfaces to the public shell. */
html:has(.pk-main) {
    --bs-body-bg: #ffffff;
    --bs-body-color: rgba(0, 0, 0, 0.7);
    --bs-emphasis-color: #000;
    --bs-border-color: rgba(0, 0, 0, 0.1);
}

body:has(.pk-main) {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.7);
    font-family: "Gordita", sans-serif;
    font-size: 18px;
}

/* CreatVolt main.css forces white text / dark bg on some generic tags; reset
   inside the Piku wrapper so Piku's own rules win without !important. */
.pk-main .container,
.pk-main .row,
.pk-main section,
.pk-main div { color: inherit; }

/* The global preloader/scroll-top from app.blade keep working; just make sure
   the scroll-top uses a neutral chip on the light pages. */
body:has(.pk-main) .scroll-top {
    background: #000;
    color: #fff;
}

/* Bootstrap dark theme restyles form controls; Piku forms define their own. */
.pk-main .form-control,
.pk-main input,
.pk-main textarea { --bs-body-bg: transparent; }

/* ----------------------------------------------------------------------------
   Icon-chip adaptations: Piku's card icons are <img>; CreatVolt stores font
   icons (Bootstrap/Line Awesome) in the DB. These rules render those font
   icons inside the Piku card icon slots at the right size. Not a ViserShort
   override — it adapts DB icon content to the ported Piku components.
   ---------------------------------------------------------------------------- */
/* Feature icons are now Piku's colourful SVG images — show at native size,
   no grey chip (matches Piku card-style-seven .icon { height:75px }). */
.pk-main .card-style-seven .icon {
    height: 75px; width: auto; margin-bottom: 0;
}
/* How-It-Works step icon: CreatVolt stores a monochrome font icon, so give each
   card a Piku accent-tinted chip (coloured per position via nth-child below). */
.pk-main .card-style-nine .pk-step-icon {
    width: 56px; height: 56px; border-radius: 14px;
    font-size: 26px; color: #171417; margin-top: 40px;
    background: #FFEB80;
}
.pk-main .card-style-nine:nth-child(1) .pk-step-icon,
.pk-main .col-lg-3:nth-child(1) .card-style-nine .pk-step-icon { background: var(--pk-green); }
.pk-main .col-lg-3:nth-child(2) .card-style-nine .pk-step-icon { background: var(--pk-yellow-soft); }
.pk-main .col-lg-3:nth-child(3) .card-style-nine .pk-step-icon { background: var(--pk-pink); }
.pk-main .col-lg-3:nth-child(4) .card-style-nine .pk-step-icon { background: var(--pk-purple); color: #fff; }
.pk-main .card-style-eleven .pk-feat-icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: #ECF8F6; font-size: 28px; color: #000;
}
.pk-main .card-style-nine .pk-step-icon i,
.pk-main .card-style-eleven .pk-feat-icon i { line-height: 1; }
.pk-main .card-style-eleven .pk-feat-icon svg { width: 32px; height: 32px; }

/* pricing pr-column CTA icon chip (btn-eleven .icon) — white circle + dark arrow,
   matching Piku's pricing-section-four. The CreatVolt button uses a <i> glyph
   instead of Piku's <img>, so style the glyph to sit in the white chip. */
.pk-main .pr-column .btn-eleven .icon {
    width: 42px; height: 42px; flex: 0 0 42px;
    background: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; color: #171417; line-height: 1;
}
.pk-main .pr-column .btn-eleven .icon i { color: #171417; line-height: 1; }
.pk-main .pr-column .package-feature li .pricing-card-badge {
    display: inline-block; font-size: 14px; line-height: 24px;
    padding: 0 10px; margin: 3px 3px 0 0; border-radius: 20px;
    background: #F3F5F6; color: #000;
}

/* feedback-block testimonial author block */
.pk-main .feedback-section-five .feedback-block .rating strong { font-size: 18px; }
.pk-main .feedback-section-five .feedback-block .logo { width: 50px; height: 50px; object-fit: cover; }

/* Inner-page banner (breadcrumb) — Home 5 dark stage */
.pk-main .pk-inner-banner {
    background: #171417;
    padding: 180px 0 70px;
}
.pk-main .pk-inner-banner__title {
    color: #fff; font-weight: 700; font-size: 64px;
    letter-spacing: -1px; margin: 0;
}
@media (max-width: 991px) { .pk-main .pk-inner-banner { padding: 140px 0 50px; } .pk-main .pk-inner-banner__title { font-size: 44px; } }
@media (max-width: 575px) { .pk-main .pk-inner-banner__title { font-size: 34px; } }

/* subscribe form inside fancy-banner-five */
.pk-main .pk-subscribe .email {
    height: 60px; min-width: 320px; max-width: 100%; border: none;
    border-radius: 30px; padding: 0 24px; font-size: 18px; color: #000;
}
@media (max-width: 575px) { .pk-main .pk-subscribe .email { min-width: 100%; } .pk-main .pk-subscribe { width: 100%; } }

/* contact address icon chip */
.pk-main .contact-section-three .address-wrapper li .pk-addr-icon {
    position: absolute; left: 0; top: 2px; width: 48px; height: 48px;
    border-radius: 50%; background: #F3F5F6; display: inline-flex;
    align-items: center; justify-content: center; font-size: 22px; color: #000;
}

/* blog-meta-two figure needs a min-height since bg-image has no intrinsic size */
.pk-main .blog-meta-two figure.media { display: block; }

/* ----------------------------------------------------------------------------
   Display-type fit: Piku's hero-heading is 180px (sized for the 2-3 word demo
   headline "work project share"). CreatVolt's headline is longer, so scale it
   down to keep the Home 5 hierarchy without mid-word breaks. Mirrors the intent
   of Piku's own responsive.css hero step-downs.
   ---------------------------------------------------------------------------- */
.pk-main .hero-banner-five .hero-heading {
    font-size: 72px;
    line-height: 1.02em;
    letter-spacing: -2px;
    word-break: normal;
    overflow-wrap: break-word;
}
@media (min-width: 1200px) { .pk-main .hero-banner-five .hero-heading { font-size: 88px; } }
@media (max-width: 767px)  { .pk-main .hero-banner-five .hero-heading { font-size: 52px; } }
@media (max-width: 480px)  { .pk-main .hero-banner-five .hero-heading { font-size: 40px; } }

/* hero paragraph + CTA spacing on the dark stage */
.pk-main .hero-banner-five .fs-28 { font-size: 20px; }
.pk-main .hero-banner-five .illustration { max-width: 46%; top: 8%; }
@media (max-width: 991px) { .pk-main .hero-banner-five .illustration { position: static; max-width: 100%; margin-top: 40px; } }

/* Pricing price: Piku markup puts price + /mon inline; keep the amount on one
   line and the period as a small suffix (CreatVolt shows e.g. $9.00/mon). */
.pk-main .pricing-section-four .pr-column .price {
    font-size: 56px;
    white-space: nowrap;
}
.pk-main .pricing-section-four .pr-column .info1 {
    width: auto;
    font-size: 16px;
    color: rgba(0,0,0,0.55);
    align-self: flex-end;
    padding-bottom: 12px;
    margin-left: 6px;
}
@media (max-width: 1199px){ .pk-main .pricing-section-four .pr-column .price { font-size: 46px; } }

/* Header: give the sticky menu real padding so it isn't cramped at the top */
.pk-main-header-pad { }
.theme-main-menu.menu-style-six .inner-content.gap-one { padding-top: 22px; padding-bottom: 22px; }
.theme-main-menu .logo img { max-height: 72px; width: auto; }

/* ----------------------------------------------------------------------------
   Shared global widgets (cookie card, scroll-top) adapted to the Piku Home 5
   palette on public pages only. These are app.blade globals; the dashboard
   keeps its own styling because it never loads this stylesheet.
   ---------------------------------------------------------------------------- */
body:has(.pk-main) .cookies-card {
    background: #171417;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}
body:has(.pk-main) .cookies-card .cookies-card__icon {
    background: #FFD542 !important;
    color: #171417;
}
body:has(.pk-main) .cookies-card .cookies-card__content { color: rgba(255,255,255,0.75); }
body:has(.pk-main) .cookies-card .cookies-card__content a { color: #FFD542; }
body:has(.pk-main) .cookies-card .btn,
body:has(.pk-main) .cookies-card .policy {
    background: #FFD542 !important;
    border: none !important;
    color: #171417 !important;
    border-radius: 30px;
    font-weight: 500;
}
body:has(.pk-main) .scroll-top {
    background: #FFD542;
    color: #171417;
    border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   Hero illustration — keep the CreatVolt banner image inside the hero stage so
   it never bleeds up into the fixed header. Piku's card_09.png is a tall UI
   mock positioned at top:13%; the CreatVolt banner is a wide 1440x700 image, so
   it needs to sit lower and be width-constrained on the right.
   ---------------------------------------------------------------------------- */
.pk-main .hero-banner-five .illustration {
    /* Start roughly level with the "AI-Powered Video Creation" badge (which sits
       below the ~200px top padding) and never bleed up into the fixed header. */
    top: 190px;
    bottom: auto;
    right: 0;
    max-width: 50%;
    height: auto;
    border-radius: 16px;
}
@media (max-width: 1199px) {
    .pk-main .hero-banner-five .illustration { max-width: 46%; top: 170px; }
}
@media (max-width: 991px) {
    /* On tablet/mobile Piku drops the illustration below the copy; do the same
       so it never overlaps the header or the headline. */
    .pk-main .hero-banner-five .illustration {
        position: static;
        max-width: 100%;
        margin: 40px auto 0;
        display: block;
    }
}

/* ----------------------------------------------------------------------------
   Testimonials (feedback-section-five) — Piku fans the cards with a -240px
   overlap. CreatVolt quotes are longer than Piku's one-liners, so give every
   card a consistent visible band and clamp the quote to avoid mid-word
   clipping. The last card is shown in full.
   ---------------------------------------------------------------------------- */
.pk-main .feedback-section-five .feedback-wrapper .feedback-block {
    padding: 32px 36px 36px;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block .pk-fb-head .logo {
    width: 54px; height: 54px; object-fit: cover; margin: 0;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block .pk-fb-author strong {
    font-size: 20px; color: #000; line-height: 1.2;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block .pk-fb-author span {
    color: rgba(0,0,0,0.6);
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block blockquote {
    font-size: 22px;
    line-height: 1.5em;
    margin: 22px 0 24px;
    /* clamp so stacked cards show a clean snippet, full card shows all */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block .rating {
    font-size: 20px;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block li {
    color: #171417;
}
/* Stacked overlap tuned for the taller CreatVolt cards */
.pk-main .feedback-section-five .feedback-wrapper .feedback-block:not(.pk-feedback-last) {
    margin-bottom: -210px;
}
/* The last card is fully visible and shows the complete quote */
.pk-main .feedback-section-five .feedback-wrapper .feedback-block.pk-feedback-last {
    margin-bottom: 0;
    z-index: 5;
}
.pk-main .feedback-section-five .feedback-wrapper .feedback-block.pk-feedback-last blockquote {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
/* Hover brings any card to full view */
.pk-main .feedback-section-five .feedback-wrapper .feedback-block:hover blockquote {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* FancyBanner CTA — give the accent count a little breathing room before the
   heading text (Piku's span sits inline; CreatVolt's count is wider). */
.pk-main .fancy-banner-five .title-eight h2 span { margin-right: 14px; }

/* ----------------------------------------------------------------------------
   Why Choose Us — Piku yellow section background (#FFEB80 = rgb(255,235,128)).
   Dark text on yellow keeps strong contrast; white cards sit on top.
   ---------------------------------------------------------------------------- */
.pk-main .pk-whychoose {
    background: var(--pk-yellow-soft);
    padding-bottom: 150px;
    border-radius: 40px;
    margin: 150px 12px 0;
}
@media (max-width: 991px) {
    .pk-main .pk-whychoose { padding-bottom: 80px; margin-top: 80px; border-radius: 24px; }
}
.pk-main .pk-whychoose .title-four .text-uppercase { color: #171417; opacity: 0.75; }
.pk-main .pk-whychoose .title-four h2 { color: #171417; }
.pk-main .pk-whychoose .card-style-eleven {
    background: #fff;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    height: 100%;
}
.pk-main .pk-whychoose .card-style-eleven h4 { color: #171417; }
.pk-main .pk-whychoose .card-style-eleven p { color: rgba(0,0,0,0.65); }
.pk-main .pk-whychoose .card-style-eleven .pk-feat-icon {
    background: #FFEB80;
    color: #171417;
}

/* ----------------------------------------------------------------------------
   Header language switcher — rebuilt for the dark Home 5 header. Resets the
   theme's base dropdown styling so the flag icon never overlaps the label, the
   selected text is light on the dark bar, and the open panel is light with
   dark, high-contrast items.
   ---------------------------------------------------------------------------- */
.theme-main-menu.menu-style-six .custom--dropdown { position: relative; display: inline-block; }

/* Kill the base theme's Font Awesome caret (the duplicate chevron) completely. */
.theme-main-menu.menu-style-six .custom--dropdown > .custom--dropdown__selected::before {
    content: none !important; display: none !important;
}
/* Base theme hides the selected flag thumb; keep it hidden so only the label shows. */
.theme-main-menu.menu-style-six .custom--dropdown__selected.dropdown-list__item .thumb { display: none !important; }

/* Selected (closed) state — label + single caret in a clean pill */
.theme-main-menu.menu-style-six .custom--dropdown > .custom--dropdown__selected {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 9px 16px !important; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px; cursor: pointer; line-height: 1;
    background: transparent !important; position: relative; min-height: 0;
}
.theme-main-menu.menu-style-six .custom--dropdown__selected .text { color: #fff; font-weight: 500; }
.theme-main-menu.menu-style-six .custom--dropdown__selected::after {
    content: "\F282"; font-family: "bootstrap-icons"; font-size: 12px;
    color: #fff; margin-left: 2px; line-height: 1; transition: transform .2s ease;
}
.theme-main-menu.menu-style-six .custom--dropdown.open > .custom--dropdown__selected::after { transform: rotate(180deg); }

/* Open panel — light surface, dark items, proper spacing (no overlap) */
.theme-main-menu.menu-style-six .custom--dropdown > .dropdown-list {
    position: absolute; top: calc(100% + 10px); right: 0; left: auto; min-width: 190px;
    background: #ffffff !important; background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 8px; margin: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18); list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(6px) scale(1);
    transition: all 0.2s ease; z-index: 1001; display: block;
}
.theme-main-menu.menu-style-six .custom--dropdown:hover .dropdown-list,
.theme-main-menu.menu-style-six .custom--dropdown.open .dropdown-list {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.theme-main-menu.menu-style-six .dropdown-list > .dropdown-list__item {
    display: flex !important; align-items: center; gap: 10px;
    padding: 9px 14px !important; border-radius: 8px; color: #171417 !important; cursor: pointer;
    position: static; white-space: nowrap; background: transparent;
}
.theme-main-menu.menu-style-six .dropdown-list > .dropdown-list__item:hover { background: #F3F5F6; }
.theme-main-menu.menu-style-six .dropdown-list > .dropdown-list__item .thumb {
    flex: 0 0 auto; display: inline-flex !important; width: 22px; height: 15px;
}
.theme-main-menu.menu-style-six .dropdown-list > .dropdown-list__item .thumb img {
    width: 22px !important; height: 15px !important; min-width: 22px !important; min-height: 15px !important;
    object-fit: cover; border-radius: 3px;
}
.theme-main-menu.menu-style-six .dropdown-list > .dropdown-list__item .text { color: #171417 !important; font-weight: 500; }

/* Mobile: switcher sits in the collapsed menu panel (light) */
@media (max-width: 991px) {
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected {
        border-color: rgba(0,0,0,0.12);
    }
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected .text,
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected::after { color: #171417; }
}

/* ----------------------------------------------------------------------------
   FAQ accordion — ensure high contrast on the white page: dark question text,
   readable answer text, and styled category group headings.
   ---------------------------------------------------------------------------- */
.pk-main .faq-section-three .pk-faq-category {
    font-size: 22px; font-weight: 700; color: #171417;
    margin: 10px 0 18px; letter-spacing: -0.5px;
}
.pk-main .faq-section-three .accordion-button {
    color: #171417; font-weight: 500; background: transparent;
}
.pk-main .faq-section-three .accordion-button:not(.collapsed) { color: #171417; box-shadow: none; }
.pk-main .faq-section-three .accordion-button:focus { box-shadow: none; }
.pk-main .faq-section-three .accordion-body,
.pk-main .faq-section-three .accordion-body p { color: rgba(0,0,0,0.7); }
.pk-main .faq-section-three .accordion-item { border-color: rgba(0,0,0,0.08); background: transparent; }

/* ----------------------------------------------------------------------------
   Help Center page — search band, topic cards, support CTA (Piku palette).
   ---------------------------------------------------------------------------- */
.pk-main .pk-help .pk-help-search { max-width: 560px; margin-left: auto; margin-right: auto; }
.pk-main .pk-help .pk-help-search input {
    height: 64px; border-radius: 40px; border: 1px solid rgba(0,0,0,0.1);
    padding: 0 60px 0 26px; font-size: 18px; width: 100%; color: #171417; background: #fff;
}
.pk-main .pk-help .pk-help-search__btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; background: #FFD542; color: #171417;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.pk-main .pk-help .pk-help-card {
    background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 20px;
    padding: 35px 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.04); height: 100%;
}
.pk-main .pk-help .pk-help-card h4 { color: #171417; margin: 22px 0 10px; }
.pk-main .pk-help .pk-help-card p { color: rgba(0,0,0,0.65); }
.pk-main .pk-help .pk-help-card .pk-feat-icon {
    width: 60px; height: 60px; border-radius: 16px; background: #ECF8F6; color: #171417; font-size: 28px;
}
.pk-main .pk-help .pk-help-link { color: #171417; font-weight: 500; margin-top: 14px; }
.pk-main .pk-help .pk-help-link i { transition: transform .2s ease; }
.pk-main .pk-help .pk-help-link:hover i { transform: translateX(4px); }
.pk-main .pk-help .pk-help-support {
    background: #171417; border-radius: 30px; padding: 60px 40px; color: #fff;
}
.pk-main .pk-help .pk-help-support h3 { color: #fff; font-size: 40px; }
.pk-main .pk-help .pk-help-support p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 16px auto 0; }

/* ----------------------------------------------------------------------------
   Pricing — Monthly/Yearly toggle, recommended badge, and comparison table.
   ---------------------------------------------------------------------------- */
.pk-main .pk-billing-toggle {
    display: inline-flex; background: var(--pk-surface); border-radius: 40px;
    padding: 6px; gap: 4px; border: none;
}
.pk-main .pk-billing-toggle .pk-billing-btn {
    border: none; border-radius: 30px; padding: 10px 28px; font-weight: 500;
    color: var(--pk-text); background: transparent; display: inline-flex;
    align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.pk-main .pk-billing-toggle .pk-billing-btn.active { background: var(--pk-dark); color: #fff; }
.pk-main .pk-save-badge {
    font-size: 12px; font-weight: 600; background: var(--pk-green); color: var(--pk-dark);
    padding: 2px 8px; border-radius: 20px;
}
.pk-main .pk-billing-toggle .pk-billing-btn.active .pk-save-badge { background: var(--pk-yellow); }

/* Recommended plan highlight */
.pk-main .pr-column.pk-recommended { box-shadow: 0 40px 80px rgba(0,0,0,0.1); transform: translateY(-10px); }
.pk-main .pr-column .pk-popular-badge {
    position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 600;
    color: #171417; padding: 4px 12px; border-radius: 20px;
}

/* Comparison table */
.pk-main .pk-compare-wrap { overflow-x: auto; }
.pk-main .pk-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.pk-main .pk-compare-table th, .pk-main .pk-compare-table td {
    padding: 18px 24px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.08); color: #171417;
}
.pk-main .pk-compare-table thead th { font-size: 20px; font-weight: 700; border-bottom: 2px solid #171417; position: relative; }
.pk-main .pk-compare-table th:first-child, .pk-main .pk-compare-table td:first-child { text-align: left; font-weight: 500; }
.pk-main .pk-compare-table .pk-col-rec { background: #FFF6D6; border-radius: 12px 12px 0 0; }
.pk-main .pk-compare-table .pk-th-badge {
    display: block; font-size: 11px; font-weight: 600; color: #171417; background: #FFD542;
    border-radius: 12px; padding: 1px 8px; margin-top: 6px;
}
.pk-main .pk-compare-table .pk-yes { color: #12B76A; font-size: 22px; }

/* ----------------------------------------------------------------------------
   Feature cards — remove the little black dot under each icon card.
   ---------------------------------------------------------------------------- */
.pk-main .card-style-seven:before { display: none !important; content: none !important; }

/* ----------------------------------------------------------------------------
   How It Works ("From Upload to Viral") — each numbered card gets a soft blue
   background (#eaf5fc) instead of plain white. Keeps the Piku card-style-nine
   border/shadow but softens the fill.
   ---------------------------------------------------------------------------- */
.pk-main .pk-workflow .card-style-nine {
    background: var(--pk-blue-soft);
}

/* ----------------------------------------------------------------------------
   "Learn more" links (pricing cards, FAQ teaser) — consistent accent link.
   ---------------------------------------------------------------------------- */
.pk-main .pk-learn-more {
    color: var(--pk-text); font-weight: 600; font-size: 16px;
    border-bottom: 2px solid var(--pk-yellow); padding-bottom: 2px; line-height: 1;
}
.pk-main .pk-learn-more i { transition: transform .2s ease; }
.pk-main .pk-learn-more:hover { color: var(--pk-text); }
.pk-main .pk-learn-more:hover i { transform: translateX(4px); }

/* ----------------------------------------------------------------------------
   Header nav — prevent menu items from wrapping to two lines in the sticky bar,
   and keep the language switcher from collapsing into a cramped circle.
   ---------------------------------------------------------------------------- */
.theme-main-menu.menu-style-six .navbar-nav .nav-item .nav-link { white-space: nowrap; }
.theme-main-menu.menu-style-six .navbar-nav { gap: 2px; }
.theme-main-menu.menu-style-six .right-widget .custom--dropdown__selected { white-space: nowrap; }
.theme-main-menu.menu-style-six .right-widget .login-btn-four span,
.theme-main-menu.menu-style-six .right-widget .btn-thirteen { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399px) {
    .theme-main-menu.menu-style-six .navbar-nav .nav-item .nav-link { padding-left: 10px; padding-right: 10px; font-size: 15px; }
}

/* ----------------------------------------------------------------------------
   FAQ page — category groups in columns.
   ---------------------------------------------------------------------------- */
.pk-main .pk-faq-columns .pk-faq-col {
    background: var(--pk-card); border: 1px solid var(--pk-border);
    border-radius: 20px; padding: 10px 28px 18px; height: 100%;
}
.pk-main .pk-faq-columns .pk-faq-category {
    font-size: 22px; font-weight: 700; color: var(--pk-text);
    letter-spacing: -0.5px; margin: 20px 0 10px;
}
.pk-main .pk-faq-columns .accordion-item { border-color: var(--pk-border); }

/* ----------------------------------------------------------------------------
   How It Works cards — text must be dark/readable on the soft-blue (#eaf5fc)
   cards (the theme/base can render card text white).
   ---------------------------------------------------------------------------- */
.pk-main .pk-workflow .card-style-nine .num,
.pk-main .pk-workflow .card-style-nine .service-heading,
.pk-main .pk-workflow .card-style-nine h4 { color: var(--pk-text) !important; }
.pk-main .pk-workflow .card-style-nine p { color: var(--pk-text-muted) !important; }

/* ----------------------------------------------------------------------------
   Pricing feature list — "Supported Platforms:" label should be neutral dark,
   not the CreatVolt teal (text--base). Platform badges are soft chips.
   ---------------------------------------------------------------------------- */
.pk-main .pr-column .package-feature .pk-feature-label {
    color: var(--pk-text); font-weight: 600; display: inline-block; margin-bottom: 4px;
}
.pk-main .pr-column .package-feature li .pricing-card-badge {
    display: inline-block; font-size: 13px; line-height: 22px;
    padding: 0 10px; margin: 3px 4px 0 0; border-radius: 20px;
    background: var(--pk-surface); color: var(--pk-text);
}

/* Support CTA band shared by FAQ + Help pages */
.pk-main .pk-support-cta .pk-help-support {
    background: var(--pk-dark); border-radius: 30px; padding: 60px 40px; color: #fff;
}
.pk-main .pk-support-cta .pk-help-support h3 { color: #fff; font-size: 40px; }
.pk-main .pk-support-cta .pk-help-support p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 16px auto 0; }

/* ----------------------------------------------------------------------------
   About intro — Piku two-column text/image block (replaces ViserShort
   about-section). Tokenised colours, Gordita heading, rounded image.
   ---------------------------------------------------------------------------- */
.pk-main .pk-about .title-four .text-uppercase {
    color: var(--pk-purple); font-weight: 600; letter-spacing: 1px;
}
.pk-main .pk-about .title-four h2 { color: var(--pk-text); }
.pk-main .pk-about .pk-about-item { gap: 16px; margin-bottom: 26px; }
.pk-main .pk-about .pk-about-item:last-child { margin-bottom: 0; }
.pk-main .pk-about .pk-about-item__dot {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
    background: var(--pk-yellow); margin-top: 8px;
}
.pk-main .pk-about .pk-about-item__title { color: var(--pk-text); font-size: 22px; margin: 0 0 6px; }
.pk-main .pk-about .pk-about-item__desc { color: var(--pk-text-muted); margin: 0; }
.pk-main .pk-about .pk-about-thumb img {
    width: 100%; height: auto; border-radius: 24px; object-fit: cover;
    box-shadow: 0 40px 80px rgba(0,0,0,0.08);
}

/* ============================================================================
   MOBILE HEADER (<= 991px) — Piku Home 5 menu on small screens.
   Fixes: white strip behind the bar, hero content bleeding through the open
   menu, cramped/ wrapping language switcher, logo sizing.
   ============================================================================ */
@media (max-width: 991px) {
    /* The bar itself: transparent over the hero, dark when sticky/open. */
    .pk-main .theme-main-menu.menu-style-six,
    .theme-main-menu.menu-style-six {
        background: transparent;
    }
    .theme-main-menu.menu-style-six .inner-content.gap-one {
        padding-top: 16px; padding-bottom: 16px;
        background: #171417;              /* solid dark bar so no white strip shows */
    }
    .theme-main-menu.menu-style-six.fixed .inner-content.gap-one { background: #141414; }

    /* Logo size on mobile (larger, clearly legible). */
    .theme-main-menu.menu-style-six .logo img { max-height: 60px; }

    /* Hamburger toggler */
    .theme-main-menu.menu-style-six .navbar-toggler {
        width: 44px; height: 44px; border-radius: 10px; background: #FFD542;
        display: flex; align-items: center; justify-content: center; padding: 0;
    }

    /* --- Open menu as a solid full-width overlay panel (no bleed-through) --- */
    .theme-main-menu.menu-style-six .navbar .navbar-collapse {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw; height: 100vh; max-width: 100vw;
        background: #171417;
        padding: 90px 24px 32px;
        overflow-y: auto;
        z-index: 1000001;             /* above the global cookie card (z-index 999999) */
        display: block;
        margin: 0;
    }
    /* the close (X) toggler must sit above the panel */
    .theme-main-menu.menu-style-six .navbar-toggler { z-index: 1000002; }
    /* Bootstrap toggles .show on the collapse when open; keep it hidden otherwise */
    .theme-main-menu.menu-style-six .navbar .navbar-collapse:not(.show) {
        display: none;
    }
    .theme-main-menu.menu-style-six .navbar-collapse .navbar-nav {
        align-items: stretch;
        gap: 2px;
    }
    .theme-main-menu.menu-style-six .navbar-collapse .nav-item .nav-link {
        color: #fff; font-size: 20px; font-weight: 500;
        padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
        white-space: nowrap;
    }
    .theme-main-menu.menu-style-six .navbar-collapse .nav-item.active .nav-link { color: #FFD542; }
    /* hide the duplicate in-menu logo li (we keep the header logo) */
    .theme-main-menu.menu-style-six .navbar-collapse .navbar-nav > li:first-child .logo { display: none; }

    /* Language switcher inside the mobile panel: full width, no wrap */
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown { display: block; width: 100%; margin-top: 18px; }
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected {
        width: 100%; justify-content: space-between; white-space: nowrap;
        border-color: rgba(255,255,255,0.2) !important;
    }
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected .text,
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown__selected::after { color: #fff !important; }
    .theme-main-menu.menu-style-six .navbar-collapse .custom--dropdown .dropdown-list { position: static; width: 100%; margin-top: 8px; }

    /* Register/Logout CTA full width in the panel */
    .theme-main-menu.menu-style-six .navbar-collapse .btn-thirteen { width: 100%; text-align: center; margin-top: 16px; }

    /* Keep the hamburger above the open panel so it can close */
    .theme-main-menu.menu-style-six .navbar { position: static; }
    .theme-main-menu.menu-style-six .navbar-toggler { position: relative; z-index: 1001; }
}

/* ----------------------------------------------------------------------------
   Hero top spacing on mobile — Piku's md-pt-150 (150px) leaves too much empty
   dark space above the "AI-Powered Video Creation" badge once the ~76px sticky
   header is accounted for. Tighten it so the hero copy sits up near the header.
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .pk-main .hero-banner-five .wrapper.pt-200 { padding-top: 110px !important; }
}
@media (max-width: 575px) {
    .pk-main .hero-banner-five .wrapper.pt-200 { padding-top: 96px !important; }
    .pk-main .hero-banner-five .badge-tag { margin-top: 10px !important; }
}
/* More breathing room between the badge and the headline on mobile/tablet. */
@media (max-width: 991px) {
    .pk-main .hero-banner-five .hero-heading { margin-top: 26px; }
}
@media (max-width: 575px) {
    .pk-main .hero-banner-five .hero-heading { margin-top: 22px; }
}

/* ----------------------------------------------------------------------------
   main.css sets a global `main { padding-top: 60px }`. On the Piku public pages
   the header is an overlay and each first section (hero / inner banner) supplies
   its own top spacing, so that 60px stacks into dead space above the hero badge.
   Zero it on the Piku wrapper; sections own their top padding.
   ---------------------------------------------------------------------------- */
.pk-main { padding-top: 0 !important; }
/* With the 60px removed, retune the hero top padding so the badge clears the
   ~76px overlay header with a small, even gap (not a big void). */
@media (max-width: 991px) {
    .pk-main .hero-banner-five .wrapper.pt-200 { padding-top: 104px !important; }
}
@media (max-width: 575px) {
    .pk-main .hero-banner-five .wrapper.pt-200 { padding-top: 96px !important; }
}