/* =====================================================================
   VIJAYCO - COMPLETE ZOHO COMMERCE CUSTOM CSS
   Updated after live element-usage checks | 28 September 2026
   =====================================================================

   INSTALLATION
   Back up current Custom CSS, then replace its ENTIRE contents with this
   file. Do not append it to the old stylesheet. Do not add <style> tags.
   Preview the storefront before publishing. JavaScript is unchanged.

   CLEANUP SUMMARY
   The earlier conservative pass removed 194 exact redundant declarations.
   This pass removes only selector branches that require custom classes
   absent from the checked live page sources and retrieved scripts.
   Mixed selector lists retain their active branches and unchanged values.

   Verified public sources: 22 pages (homepage, 9 category pages,
   2 collections, 9 product pages, privacy policy). Retrieved 56 script
   resources, including cache-version variants, plus inline page scripts.
   Browser observations: homepage after scripts, category sorting/filtering,
   and product detail after a colour variant change (1363px viewport).
   Published Custom CSS matched the original supplied file after normalizing
   line endings. This file builds on the previous duplicate cleanup.

   REMOVED CUSTOM COMPONENTS
   - PP/PET solution-card implementation
   - Separate promotional-carousel implementation (.vc-promo-*)
   - Unused custom header/nav/top-strip implementation
   - Old customer-title class (current heading: .vc-valued-heading-final)
   - Unused product-description, benefit-row and statistic-label classes
   Exact removed selector branches are documented at the end of this file.

   KEEP / VERIFICATION LIMITS
   Dynamic product eyes, customer ticker and announcement classes remain.
   Generic Zoho classes, the legacy hero, image zoom utilities, variables,
   filters, sorting, gallery, cart, and uncertain selectors remain.
   No claim of exhaustive account-page, mobile-menu or multi-viewport
   coverage is made. Three script cache-version downloads timed out;
   other versions of those store/language scripts were retrieved.
   No before/after screenshot or computed-style regression test was run.
   Font/theme CSS was not rewritten. Styles for absent components will
   need restoring if those components are reintroduced in the future.

   READING GUIDE - RULE ORDER IS INTENTIONAL
   01  Image zoom and main background
   02  Legacy hero (retained pending wider verification)
   03  Catalogue and currency defaults
   04  Shop by Width cards and responsive layouts
   05  Current homepage hero (.banner)
   06  Product heading, cart and eye controls
   07  Customer logos, ticker and keyframes
   08  Why VIJAYCO benefit cards
   09  Statistics and footer
   10  Existing spacing/responsive correction layers
   11  Current customer heading (.vc-valued-heading-final)
   12  Category header, sorting and filtering layout
   13  Product gallery and thumbnail layouts
   14  Navigation icons and final width-section backgrounds
   15  Removal record (comments only)

   MAINTENANCE
   Search every occurrence before changing a selector. Some components
   intentionally appear in multiple correction layers. Source order,
   selector specificity, !important and media conditions all matter.
   Keep current class names, image URLs, breakpoints and script hooks.
   Do not merge all media queries or move later corrections to the top.
   All surviving declaration values and relative rule order were checked
   against the input to this pass; no redesign was performed.
   ===================================================================== */

.img-container {
  width: 100%;
  max-width: 650px;
  aspect-ratio: 13 / 8;
  overflow: hidden;
  border-radius: 8px;
}

.img-container .zoom-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

/* Zoom remains clipped inside the container */
.img-container:hover .zoom-img {
  transform: scale(1.2);
  cursor: pointer;
}

/* ================================================================
   02. GLOBAL STOREFRONT SURFACES
   ================================================================ */

/* Use a white background across the storefront content area. */
.theme-content-container {
  background-color: #ffffff !important;
}

/* ================================================================
   03. LEGACY CUSTOM HERO — STYLE 06
   ================================================================

   These rules support older pages using .zscustom-hero-slider and
   .zshero-banner-style-06. The current homepage hero is maintained
   separately in Section 10 under the custom class .banner.
   ================================================================ */

/* Hero background */
.zphero.zscustom-hero-slider {
  background-color: #ffffff !important;
}

/* Remove the beige gradient */
.zphero.zscustom-hero-slider::after {
  background-image: none !important;
  background-color: transparent !important;
}

/* Full-width homepage hero */
.zphero-slider-container.zshero-banner-style-06 {
  width: 100%;
  max-width: none;
  height: clamp(420px, 40vw, 620px);
  margin-inline: 0;
  overflow: hidden;
  background-color: #ffffff;
}

/* HTML hero images */
.zphero-slider-container.zshero-banner-style-06 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero elements using inline background images */
.zphero-slider-container.zshero-banner-style-06 > [style*="background-image"] {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tablet and small laptops */
@media screen and (max-width: 991px) {
  .zphero-slider-container.zshero-banner-style-06 {
    height: 460px;
  }}

/* Mobile */
@media screen and (max-width: 767px) {
  .zphero-slider-container.zshero-banner-style-06 {
    height: 420px;
  }

  .zphero-slider-container.zshero-banner-style-06 img {
    object-position: 65% center;
  }}

/* Small mobile */
@media screen and (max-width: 480px) {
  .zphero-slider-container.zshero-banner-style-06 {
    height: 340px;
  }

  .img-container .zoom-img {
    transition-duration: 0.25s;
  }

  .img-container:hover .zoom-img {
    transform: scale(1.1);
  }}

/* ================================================================
   04. CATALOGUE LAYOUT ADJUSTMENTS
   ================================================================ */

/* Hide the default category image description. */
.theme-category-image-desc-container {
  display: none;
}

/* Add compact horizontal spacing to product rows. */
.theme-product-ratio.zprow {
  margin-inline-start: 5px !important;
  margin-inline-end: 5px !important;
}

/* ================================================================
   05. CURRENCY SELECTOR
   ================================================================ */

/* Make the INR currency selector permanently visible */
.theme-currency-option-container,
.theme-currency-option-container .theme-currency-label,
.theme-currency-option-container ul li,
.theme-currency-option-container ul li a,
.theme-currency-option-container ul li span {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

/* Currency dropdown background */
.theme-currency-option-container ul,
.theme-currency-option-container ul.theme-currency-open {
    background-color: #ffffff !important;
}

/* Dropdown options */
.theme-currency-option-container ul.theme-currency-open li,
.theme-currency-option-container ul.theme-currency-open li a,
.theme-currency-option-container ul.theme-currency-open li span {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Hover effect */
.theme-currency-option-container ul.theme-currency-open li:hover,
.theme-currency-option-container ul.theme-currency-open li:hover a,
.theme-currency-option-container ul.theme-currency-open li:hover span {
    color: #000000 !important;
    background-color: #f2f2f2 !important;
}

/* Make the dropdown arrow visible */
.theme-currency-option-container ul li:first-child::after {
    border-color: #1a1a1a transparent transparent transparent !important;
}

/* Desktop dropdown styling */
@media screen and (min-width: 992px) {
    .theme-currency-option-container ul.theme-currency-open {
        border: 1px solid #dddddd !important;
        border-radius: 5px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
    }}

/* ================================================================
   06. CAROUSEL CONTROLS
   ================================================================ */

/* ================================================================
   08. SHOP BY WIDTH
   ================================================================ */

/* ==========================================================
   VIJAYCO — SHOP BY WIDTH
   Complete Redesigned Responsive CSS
   Desktop | Tablet | Mobile
   ========================================================== */

/* ==========================================================
   1. SECTION FOUNDATION
   Class: vc-width-section
   ========================================================== */

.vc-width-section {
    width: 100% !important;

    padding: 46px 0 54px !important;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(255, 193, 33, 0.09) 0%,
            rgba(255, 193, 33, 0) 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    box-sizing: border-box !important;
}

.vc-width-section *,
.vc-width-section *::before,
.vc-width-section *::after {
    box-sizing: border-box !important;
}

/* ==========================================================
   2. ALIGN SECTION WITH HERO
   Hero content uses approximately 5% spacing on both sides
   ========================================================== */

.vc-width-section > .zpcontainer-fluid {
    width: 90% !important;
    max-width: none !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Remove Zoho row negative spacing */

.vc-width-section .zs-custom-category {

    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Outer Zoho column containing heading, subtitle and grid */

.vc-width-section
.zs-custom-category > .zpelem-col {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   3. SECTION HEADING
   Class: vc-section-title
   ========================================================== */

.vc-width-section .vc-section-title {
    position: relative !important;

    width: 100% !important;

    margin: 0 0 10px !important;
    padding: 0 0 13px !important;
}

.vc-width-section .vc-section-title .zpheading,
.vc-width-section .vc-section-title.zpheading,
.vc-width-section .vc-section-title h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #0f172a !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
}

/* Yellow brand line */

.vc-width-section .vc-section-title::after {
    content: "";

    display: block;

    width: 48px;
    height: 3px;

    margin-top: 10px;

    border-radius: 10px;
    background-color: #ffc121;
}

/* ==========================================================
   4. SECTION SUBTITLE
   Class: vc-width-subtitle
   ========================================================== */

.vc-width-section .vc-width-subtitle {
    width: 100% !important;
    max-width: 680px !important;

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

    color: #475569 !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-align: left !important;
}

.vc-width-section .vc-width-subtitle p {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font: inherit !important;
}

/* ==========================================================
   5. DESKTOP GRID
   Class: vc-width-grid
   Seven cards in one row
   ========================================================== */

.vc-width-section .vc-width-grid {
    display: grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;

    gap: 16px !important;
    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Remove Zoho column sizing */

.vc-width-section
.vc-width-grid > .vc-width-card {
    grid-column: auto;

    flex: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}

/* ==========================================================
   6. INDIVIDUAL CATEGORY CARD
   Class: vc-width-card
   ========================================================== */

.vc-width-section .vc-width-card {
    position: relative !important;
    isolation: isolate !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 222px !important;

    padding: 20px 12px 17px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.07) !important;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}

/* Decorative yellow line at bottom */

.vc-width-section .vc-width-card::after {
    content: "";

    position: absolute;
    right: 24%;
    bottom: 0;
    left: 24%;

    height: 3px;

    border-radius: 5px 5px 0 0;
    background-color: #ffc121;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

/* Make internal Zoho image-text element full width */

.vc-width-section
.vc-width-card > .zpelem-imagetext {
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.vc-width-section
.vc-width-card
.zpimagetext-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   7. CIRCULAR PRODUCT GRAPHIC
   Creates a more premium, aesthetic appearance
   ========================================================== */

/* ==========================================================
   8. CARD TITLE
   ========================================================== */

.vc-width-section
.vc-width-card
.zpimage-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 42px !important;

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

    text-align: center !important;
}

.vc-width-section
.vc-width-card
.zpimage-text p,
.vc-width-section
.vc-width-card
.zpheading,
.vc-width-section
.vc-width-card h3,
.vc-width-section
.vc-width-card h4 {
    margin: 0 !important;
    padding: 0 !important;

    color: #0f172a !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-align: center !important;
    text-transform: none !important;
}

/* ==========================================================
   9. ACCESSIBLE LINKS AND KEYBOARD FOCUS
   ========================================================== */

.vc-width-section .vc-width-card a {
    color: #0f172a !important;
    text-decoration: none !important;
}

.vc-width-section .vc-width-card a:focus-visible {
    border-radius: 50% !important;

    outline: 3px solid rgba(255, 193, 33, 0.55) !important;
    outline-offset: 4px !important;
}

/* ==========================================================
   10. DESKTOP HOVER EFFECT
   Applied only on devices with a real mouse pointer
   ========================================================== */

@media screen and
(min-width: 1200px) and
(hover: hover) and
(pointer: fine) {

    .vc-width-section .vc-width-card:hover {
        transform: translateY(-5px) !important;

        border-color: rgba(255, 193, 33, 0.9) !important;

        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.13),
            0 0 0 1px rgba(255, 193, 33, 0.08) !important;
    }

    .vc-width-section .vc-width-card:hover::after {
        transform: scaleX(1);
    }

    .vc-width-section
    .vc-width-card:hover
    .zpimage-data-ref
    img.zpimage {
        transform: scale(1.07) !important;
    }}

/* ==========================================================
   11. TABLET
   768px–1199px
   Four cards first row and three centred second row
   ========================================================== */

@media screen and
(min-width: 768px) and
(max-width: 1199px) {

    .vc-width-section {
        padding: 40px 0 48px !important;
    }

    .vc-width-section > .zpcontainer-fluid {
        width: calc(100% - 48px) !important;
    }

    .vc-width-section .vc-section-title .zpheading,
    .vc-width-section .vc-section-title.zpheading,
    .vc-width-section .vc-section-title h2 {
        font-size: 28px !important;
    }

    .vc-width-section .vc-width-subtitle {
        margin-bottom: 22px !important;
        font-size: 14px !important;
    }

    /*
     * Eight grid tracks:
     * Every card occupies two tracks.
     * This centres three cards in the second row.
     */

    .vc-width-section .vc-width-grid {
        grid-template-columns:
            repeat(8, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

    .vc-width-section
    .vc-width-grid > .vc-width-card {
        grid-column: span 2;

        min-height: 210px !important;
        padding: 18px 10px 15px !important;
    }

    .vc-width-section
    .vc-width-grid > .vc-width-card:nth-child(5) {
        grid-column: 2 / span 2;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-data-ref {
        width: 120px !important;
        height: 120px !important;

        margin-bottom: 11px !important;
        padding: 10px !important;
    }

    .vc-width-section
    .vc-width-grid
    .vc-width-card
    .zpimage-data-ref
    img.zpimage {
        width: 96px !important;
        height: 96px !important;
        max-width: 96px !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-text {
        min-height: 40px !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-text p {
        font-size: 14px !important;
    }}

/* ==========================================================
   12. MOBILE
   Up to 767px
   Two cards per row; final card centred
   ========================================================== */

@media screen and (max-width: 767px) {

    .vc-width-section {
        padding: 32px 0 40px !important;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f8fafc 100%
            ) !important;
    }

    .vc-width-section > .zpcontainer-fluid {
        width: calc(100% - 32px) !important;
    }

    .vc-width-section .vc-section-title {
        margin-bottom: 8px !important;
        padding-bottom: 11px !important;
    }

    .vc-width-section .vc-section-title .zpheading,
    .vc-width-section .vc-section-title.zpheading,
    .vc-width-section .vc-section-title h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .vc-width-section .vc-section-title::after {
        width: 42px;
        height: 3px;
        margin-top: 8px;
    }

    .vc-width-section .vc-width-subtitle {
        margin-bottom: 20px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .vc-width-section .vc-width-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .vc-width-section
    .vc-width-grid > .vc-width-card {
        grid-column: auto;

        min-height: 178px !important;

        padding: 15px 7px 12px !important;

        border-radius: 15px !important;
    }

    /*
     * Centre the seventh card because there is
     * an uneven total number of categories.
     */

    .vc-width-section
    .vc-width-grid > .vc-width-card:last-child {
        grid-column: 1 / -1;

        width: calc((100% - 12px) / 2) !important;

        justify-self: center !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-data-ref {
        width: 102px !important;
        height: 102px !important;

        margin-bottom: 9px !important;
        padding: 8px !important;
    }

    .vc-width-section
    .vc-width-grid
    .vc-width-card
    .zpimage-data-ref
    img.zpimage {
        width: 84px !important;
        height: 84px !important;
        max-width: 84px !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-text {
        min-height: 38px !important;
        padding: 0 2px !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-text p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* No hover movement on touchscreen layouts */

    .vc-width-section .vc-width-card:hover {
        transform: none !important;
    }

    .vc-width-section
    .vc-width-card:hover
    .zpimage-data-ref
    img.zpimage {
        transform: none !important;
    }}

/* ==========================================================
   13. VERY SMALL MOBILE DEVICES
   ========================================================== */

@media screen and (max-width: 380px) {

    .vc-width-section > .zpcontainer-fluid {
        width: calc(100% - 24px) !important;
    }

    .vc-width-section .vc-width-grid {
        gap: 10px !important;
    }

    .vc-width-section
    .vc-width-grid > .vc-width-card {
        min-height: 168px !important;
        padding: 13px 5px 10px !important;
    }

    .vc-width-section
    .vc-width-card
    .zpimage-data-ref {
        width: 94px !important;
        height: 94px !important;
    }

    .vc-width-section
    .vc-width-grid
    .vc-width-card
    .zpimage-data-ref
    img.zpimage {
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
    }

    .vc-width-section
    .vc-width-grid > .vc-width-card:last-child {
        width: calc((100% - 10px) / 2) !important;
    }}

/* ==========================================================
   14. REDUCED-MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vc-width-section .vc-width-card,
    .vc-width-section .vc-width-card::after,
    .vc-width-section .vc-width-card img {
        transition: none !important;
    }

    .vc-width-section .vc-width-card:hover,
    .vc-width-section .vc-width-card:hover img {
        transform: none !important;
    }}

/* ================================================================
   10. CURRENT RESPONSIVE HOMEPAGE HERO
   Custom class: banner
   Desktop + Tablet + Mobile
   ================================================================ */

/* --------------------------------------------------
   COMMON HERO STRUCTURE
   -------------------------------------------------- */

.banner,
.banner.zpapply-height {
    position: relative !important;
    isolation: isolate;

    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;

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

    overflow: hidden !important;
    background-color: #f7f8fa !important;
}

/* Remove default slider list spacing */
.banner .zphero-slides {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

/* Main slide */
.banner .zphero-slide {
    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------
   HERO IMAGE
   Higher specificity overrides Zoho mobile image
   -------------------------------------------------- */

.banner .zphero-slide .zpslider-img,
.banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"] .zpslider-img {
    position: relative !important;
    z-index: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;

    background-image: url("https://cdn2.zohoecommerce.com/hero%20slide%20imge.png?v=1789553523&storefront_domain=www.vijayco.co.in") !important;
    background-color: #f7f8fa !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* White readability gradient */
.banner .zpslider-img::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.93) 30%,
        rgba(255, 255, 255, 0.52) 48%,
        rgba(255, 255, 255, 0) 65%
    );
}

/* --------------------------------------------------
   HERO CONTENT CONTAINER
   -------------------------------------------------- */

.banner .zphero-slider-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;

    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;
}

/* Zoho inner container */
.banner .zphero-slider-container > .zpcontainer {
    width: 100% !important;
    max-width: none !important;

    height: 560px !important;
    min-height: 560px !important;

    margin: 0 !important;
    padding: 0 5% !important;
}

/* Hero row */
.banner .zprow {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;

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

    background: transparent !important;
}

/* Hero content column */
.banner .zprow > .zpelem-col:first-of-type {
    display: flex !important;
    flex: 0 0 47% !important;

    width: 47% !important;
    max-width: 47% !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

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

    background: transparent !important;
}

/* Hide all empty Zoho columns */
.banner .zprow > .zpelem-col:not(:first-of-type) {
    display: none !important;
}

/* Remove unwanted element margins */
.banner .zpelement {
    margin-inline: 0 !important;
}

/* --------------------------------------------------
   SMALL HEADING
   -------------------------------------------------- */

.banner .zpelem-heading:first-of-type {
    margin: 0 0 12px !important;
}

.banner .zpelem-heading:first-of-type h1,
.banner .zpelem-heading:first-of-type h2,
.banner .zpelem-heading:first-of-type h3,
.banner .zpelem-heading:first-of-type span {
    margin: 0 !important;

    color: #a66f00 !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* --------------------------------------------------
   MAIN HEADING
   -------------------------------------------------- */

.banner .zpelem-heading:nth-of-type(2) {
    width: 100% !important;
    max-width: 560px !important;

    margin: 0 !important;
}

.banner .zpelem-heading:nth-of-type(2) h1,
.banner .zpelem-heading:nth-of-type(2) h2,
.banner .zpelem-heading:nth-of-type(2) h3,
.banner .zpelem-heading:nth-of-type(2) span {
    width: 100% !important;
    max-width: 560px !important;

    margin: 0 !important;

    color: #0f172a !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;

    letter-spacing: -1.2px !important;
}

/* --------------------------------------------------
   DESCRIPTION
   -------------------------------------------------- */

.banner .zpelem-text {
    width: 100% !important;
    max-width: 510px !important;

    margin: 20px 0 0 !important;
}

.banner .zpelem-text p,
.banner .zpelem-text span {
    margin: 0 !important;

    color: #334155 !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

/* --------------------------------------------------
   BUTTON
   -------------------------------------------------- */

.banner .zpelem-button {
    margin: 27px 0 0 !important;
}

.banner .zpbutton,
.banner .zpbutton-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 225px !important;
    min-height: 50px !important;

    padding: 12px 24px !important;

    border: 1px solid #f4b400 !important;
    border-radius: 5px !important;

    background-color: #f4b400 !important;
    color: #111111 !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: center !important;
    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease !important;
}

.banner .zpbutton:hover,
.banner .zpbutton-wrapper:hover {
    border-color: #d99f00 !important;
    background-color: #d99f00 !important;
    color: #111111 !important;

    transform: translateY(-1px);
}

/* Hide slider arrows and dots for one slide */
.banner .zsslider-arrows-container,
.banner .zsslider-controller-container {
    display: none !important;
}

/* ==================================================
   TABLET
   768px–1023px
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .banner,
    .banner.zpapply-height,
    .banner .zphero-slide,
    .banner .zphero-slider-container,
    .banner .zphero-slider-container > .zpcontainer {
        height: 480px !important;
        min-height: 480px !important;
    }

    .banner .zphero-slide .zpslider-img,
    .banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"] .zpslider-img {
        height: 480px !important;
        min-height: 480px !important;

        background-image: url("https://cdn2.zohoecommerce.com/hero%20slide%20imge.png?v=1789553523&storefront_domain=www.vijayco.co.in") !important;
        background-size: cover !important;
        background-position: 58% center !important;
        background-repeat: no-repeat !important;
    }

    .banner .zpslider-img::after {
        display: block !important;

        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.93) 37%,
            rgba(255, 255, 255, 0.57) 54%,
            rgba(255, 255, 255, 0) 72%
        ) !important;
    }

    .banner .zphero-slider-container > .zpcontainer {
        padding: 0 4.5% !important;
    }

    .banner .zprow {
        height: 480px !important;
        min-height: 480px !important;
    }

    .banner .zprow > .zpelem-col:first-of-type {
        flex: 0 0 53% !important;

        width: 53% !important;
        max-width: 53% !important;

        padding: 30px 0 !important;
    }

    .banner .zpelem-heading:first-of-type h1,
    .banner .zpelem-heading:first-of-type h2,
    .banner .zpelem-heading:first-of-type h3,
    .banner .zpelem-heading:first-of-type span {
        font-size: 12px !important;
        letter-spacing: 1.3px !important;
    }

    .banner .zpelem-heading:nth-of-type(2),
    .banner .zpelem-heading:nth-of-type(2) h1,
    .banner .zpelem-heading:nth-of-type(2) h2,
    .banner .zpelem-heading:nth-of-type(2) h3,
    .banner .zpelem-heading:nth-of-type(2) span {
        max-width: 430px !important;

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

        letter-spacing: -0.7px !important;
    }

    .banner .zpelem-text {
        max-width: 390px !important;

        margin-top: 17px !important;
    }

    .banner .zpelem-text p,
    .banner .zpelem-text span {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .banner .zpelem-button {
        margin-top: 22px !important;
    }

    .banner .zpbutton,
    .banner .zpbutton-wrapper {
        min-width: 210px !important;
        min-height: 48px !important;
    }}

/* ==================================================
   MOBILE
   Up to 767px
   Product image above; content below
   ================================================== */

@media screen and (max-width: 767px) {

    .banner,
    .banner.zpapply-height {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

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

        overflow: hidden !important;
        background-color: #ffffff !important;
    }

    .banner::before {
        display: none !important;
    }

    .banner .zphero-slides {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner .zphero-slide {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * IMPORTANT:
     * This selector is intentionally more specific
     * than Zoho’s old mobile image selector.
     */

    .banner .zphero-slide .zpslider-img,
    .banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"] .zpslider-img {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        height: 250px !important;
        min-height: 250px !important;

        background-image: url("https://cdn2.zohoecommerce.com/hero%20slide%20imge.png?v=1789553523&storefront_domain=www.vijayco.co.in") !important;
        background-color: #f7f8fa !important;
        background-size: auto 250px !important;
        background-position: 66% center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }

    .banner .zpslider-img::after {
        display: none !important;
    }

    /* Content becomes a separate white area */
    .banner .zphero-slider-container {
        position: relative !important;
        inset: auto !important;
        z-index: 2 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        background-color: #ffffff !important;
    }

    .banner .zphero-slider-container > .zpcontainer {
        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

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

        background-color: #ffffff !important;
    }

    .banner .zprow {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        background-color: #ffffff !important;
    }

    .banner .zprow > .zpelem-col:first-of-type {
        display: flex !important;
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        margin: 0 !important;
        padding: 28px 20px 32px !important;

        background-color: #ffffff !important;
    }

    .banner .zprow > .zpelem-col:not(:first-of-type) {
        display: none !important;
    }

    .banner .zpelem-heading:first-of-type {
        margin-bottom: 9px !important;
    }

    .banner .zpelem-heading:first-of-type h1,
    .banner .zpelem-heading:first-of-type h2,
    .banner .zpelem-heading:first-of-type h3,
    .banner .zpelem-heading:first-of-type span {
        font-size: 12px !important;
        line-height: 1.4 !important;

        letter-spacing: 1.2px !important;
    }

    .banner .zpelem-heading:nth-of-type(2) {
        width: 100% !important;
        max-width: 100% !important;
    }

    .banner .zpelem-heading:nth-of-type(2) h1,
    .banner .zpelem-heading:nth-of-type(2) h2,
    .banner .zpelem-heading:nth-of-type(2) h3,
    .banner .zpelem-heading:nth-of-type(2) span {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 35px !important;
        line-height: 1.08 !important;

        letter-spacing: -0.5px !important;
    }

    .banner .zpelem-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 16px !important;
    }

    .banner .zpelem-text p,
    .banner .zpelem-text span {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .banner .zpelem-button {
        width: 100% !important;

        margin-top: 22px !important;
    }

    .banner .zpbutton,
    .banner .zpbutton-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;

        padding: 13px 18px !important;
    }}

/* ==================================================
   SMALL MOBILE
   Up to 380px
   ================================================== */

@media screen and (max-width: 380px) {

    .banner .zphero-slide .zpslider-img,
    .banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"] .zpslider-img {
        height: 225px !important;
        min-height: 225px !important;

        background-image: url("https://cdn2.zohoecommerce.com/hero%20slide%20imge.png?v=1789553523&storefront_domain=www.vijayco.co.in") !important;
        background-size: auto 225px !important;
        background-position: 65% center !important;
    }

    .banner .zpelem-heading:nth-of-type(2) h1,
    .banner .zpelem-heading:nth-of-type(2) h2,
    .banner .zpelem-heading:nth-of-type(2) h3,
    .banner .zpelem-heading:nth-of-type(2) span {
        font-size: 31px !important;
    }}

/* ======================================================
   VIJAYCO — PRODUCT BUTTON AND NAVIGATION CORRECTIONS
   Add after the existing product-section CSS.
   ====================================================== */

/* Black purchase buttons, including hover */
.vc-products-section .theme-cart-button,
.vc-products-section .theme-cart-button:hover,
.vc-products-section .theme-product-details,
.vc-products-section .theme-product-details:hover {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

/* Hide this product carousel's arrows only */
.vc-products-section .vc-products-grid
.zpcarousel-arrows-container {
    display: none !important;
}

/* Header row created by the script below */
.vc-products-section .vc-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.vc-products-section .vc-products-header .vc-products-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* View All beside the heading */
.vc-products-section .vc-products-header
.zpfilmstrip-viewall-button {

    flex: 0 0 auto;

    transform: none !important;
}

.vc-products-section .vc-products-header
.zpfilmstrip-viewall-button a {
    
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 18px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

/* Remove the old, now-unused carousel heading strip */
.vc-products-section .vc-products-grid.vc-header-moved
.zpfilmstrip-title-container {
    display: none !important;
}

/* Native Quick View — only affects an existing control */
.vc-products-section .theme-view-details-quick-view {
    display: flex !important;
    align-items: stretch;
    gap: 10px !important;
}

.vc-products-section .theme-view-details-quick-view
.theme-product-details {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.vc-products-section .theme-product-quick-view {
    display: flex !important;
    flex: 0 0 44px;
    width: 44px !important;
    min-height: 44px;

    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 6px !important;
}

.vc-products-section .theme-product-quick-view button {
    width: 100%;
    min-height: 44px;
}

/* Extend the theme's eye animation to keyboard focus */
.vc-products-section .theme-product-quick-view:focus-within
.theme-icon-open {
    display: block !important;
}

.vc-products-section .theme-product-quick-view:focus-within
.theme-icon-close {
    display: none !important;
}

/* Mobile: place View All beneath the heading */
@media (max-width: 767px) {
    .vc-products-section .vc-products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .vc-products-section .vc-products-header
    .zpfilmstrip-viewall-button a {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }}

/* VIJAYCO — heading colour */
.vc-products-section .vc-products-title,
.vc-products-section .vc-products-title :is(h2, .zpheading, span) {
    color: #0f172a !important;
}

.vc-products-section .vc-products-subtitle,
.vc-products-section .vc-products-subtitle :is(p, span) {
    color: #526174 !important;
}

/* Purchase button and eye share one row */

/* Product-page eye link */
.vc-products-section .vc-product-eye {
    
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;

    padding: 0 !important;

    border: 1px solid #111111;
    border-radius: 6px;

    text-decoration: none !important;
}

.vc-products-section .vc-product-eye svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vc-products-section .vc-product-eye .vc-eye-open {
    display: none;
}

/* Open on keyboard focus */
.vc-products-section .vc-product-eye:focus-visible {
    outline: 3px solid #ffc121;
    outline-offset: 3px;
}

.vc-products-section .vc-product-eye:focus-visible .vc-eye-open {
    display: block;
}

.vc-products-section .vc-product-eye:focus-visible .vc-eye-closed {
    display: none;
}

/* Open on mouse hover */
@media (hover: hover) and (pointer: fine) {
    .vc-products-section .vc-product-eye:hover .vc-eye-open {
        display: block;
    }

    .vc-products-section .vc-product-eye:hover .vc-eye-closed {
        display: none;
    }}

/* Touchscreens: always show the recognisable open eye */
@media (hover: none) {
    .vc-products-section .vc-product-eye .vc-eye-open {
        display: block;
    }

    .vc-products-section .vc-product-eye .vc-eye-closed {
        display: none;
    }}

/* ======================================================
   VIJAYCO — HEADER AND EYE VISIBILITY CORRECTION
   Overrides earlier mobile header and icon rules.
   ====================================================== */

/* 1. Heading left, View All right — every screen size */

.vc-products-section .vc-products-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;

    gap: 16px !important;
    
}

.vc-products-section .vc-products-header .vc-products-title {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.vc-products-section .vc-products-header
.zpfilmstrip-viewall-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;
    justify-self: end !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vc-products-section .vc-products-header
.zpfilmstrip-viewall-button a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;

    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;

    white-space: nowrap !important;
}

.vc-products-section .vc-products-header .theme-viewall-text {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #111111 !important;
}

/* 2. Keep the eye beside Add to Cart */

.vc-products-section .theme-product-button-area.vc-eye-row {

    width: 100% !important;
    min-width: 0 !important;
}

.vc-products-section .vc-eye-row .theme-cart-button {
    flex: 1 1 0 !important;
    width: auto !important;
    
    min-height: 44px !important;

    border-color: #111111 !important;
}

.vc-products-section .vc-eye-row a.vc-product-eye {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;
    flex: 0 0 44px !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

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

    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 6px !important;
}

/* 3. Explicit SVG styling prevents blank icon boxes */

.vc-products-section a.vc-product-eye svg {
    position: static !important;
    flex: none !important;

    width: 24px !important;
    height: 24px !important;

    visibility: visible !important;
    opacity: 1 !important;

    fill: none !important;
    stroke: #111111 !important;
    stroke-width: 1.7 !important;

    transform: none !important;
}

.vc-products-section a.vc-product-eye svg path,
.vc-products-section a.vc-product-eye svg circle {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;

    fill: none !important;
    stroke: #111111 !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* 4. Default: open eye, suitable for touchscreens */

.vc-products-section a.vc-product-eye svg.vc-eye-open {
    display: block !important;
}

.vc-products-section a.vc-product-eye svg.vc-eye-closed {
    display: none !important;
}

/* 5. Mouse devices: closed normally, open on hover/focus */

@media (hover: hover) and (pointer: fine) {

    .vc-products-section a.vc-product-eye svg.vc-eye-open {
        display: none !important;
    }

    .vc-products-section a.vc-product-eye svg.vc-eye-closed {
        display: block !important;
    }

    .vc-products-section a.vc-product-eye:hover svg.vc-eye-open,
    .vc-products-section a.vc-product-eye:focus-visible svg.vc-eye-open {
        display: block !important;
    }

    .vc-products-section a.vc-product-eye:hover svg.vc-eye-closed,
    .vc-products-section a.vc-product-eye:focus-visible svg.vc-eye-closed {
        display: none !important;
    }}

/* 6. Mobile: heading wraps, View All stays on its right */

@media (max-width: 767px) {

    .vc-products-section .vc-products-header {
        column-gap: 12px !important;
    }

    .vc-products-section .vc-products-title :is(h2, .zpheading) {
        font-size: clamp(21px, 5.5vw, 24px) !important;
        line-height: 1.25 !important;
    }

    .vc-products-section .vc-products-header
    .zpfilmstrip-viewall-button a {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .vc-products-section .vc-eye-row .theme-cart-button {
        padding-inline: 8px !important;
        font-size: 12px !important;
    }}

/* Align Add to Cart and the eye button on all screen sizes */

.vc-products-section .theme-product-button-area.vc-eye-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}

/* Shared dimensions and alignment */
.vc-products-section .vc-eye-row > .theme-cart-button,
.vc-products-section .vc-eye-row > a.vc-product-eye {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;

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

    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 6px !important;

    line-height: 1.2 !important;
}

/* Black purchase button */
.vc-products-section .vc-eye-row > .theme-cart-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;

    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

/* Square eye button */
.vc-products-section .vc-eye-row > a.vc-product-eye {
    flex: 0 0 44px !important;
    width: 44px !important;
    padding: 0 !important;

    background: #ffffff !important;
    border-color: #111111 !important;
}

/* ======================================================
   VIJAYCO — OPTION D: OFFSET FRAME
   ====================================================== */

/* Normal card */
.vc-products-section .theme-product-box-content {
    
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    transform: none !important;

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease !important;
}

/* Keep the surface white */
.vc-products-section .theme-product-box-content:hover,
.vc-products-section .theme-product-box-content:focus-within {
    background: #ffffff !important;
    transform: none !important;
}

/* Mouse hover: crisp border and offset shadow */
@media (hover: hover) and (pointer: fine) {
    .vc-products-section .theme-product-box-content:hover {
        border-color: #a3adb9 !important;
        box-shadow: 6px 6px 0 #e9edf1 !important;
    }}

/* Matching keyboard-focus treatment */
.vc-products-section .theme-product-box-content:focus-within {
    border-color: #a3adb9 !important;
    box-shadow: 6px 6px 0 #e9edf1 !important;
}

/* Keep Add to Cart black */
.vc-products-section .theme-cart-button,
.vc-products-section .theme-cart-button:hover {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

/* No animated transition when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
    .vc-products-section .theme-product-box-content {
        transition: none !important;
    }}

/* ==========================================================
   VIJAYCO — VALUED CUSTOMERS
   Continuous logo track with equal spacing
   ========================================================== */

/* ----------------------------------------------------------
   1. SECTION
   ---------------------------------------------------------- */

.vc-customers-section {
    width: 100% !important;
    padding: 42px 0 !important;

    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.vc-customers-section *,
.vc-customers-section *::before,
.vc-customers-section *::after {
    box-sizing: border-box !important;
}

.vc-customers-section > .zpcontainer {
    width: calc(100% - 200px) !important;
    max-width: 1248px !important;

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

.vc-customers-section > .zpcontainer > .zprow,
.vc-customers-section .carousel-auto-slide {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------
   3. RESET CAROUSEL HEIGHT
   ---------------------------------------------------------- */

.vc-customers-section
.vc-customers-carousel.vc-ticker-ready {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.vc-customers-section
.vc-customers-carousel.vc-ticker-ready
.zpcarousel-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

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

    overflow: hidden !important;
}

/* Hide the original full-width Zoho slides */

.vc-customers-section
.vc-customers-carousel.vc-ticker-ready
.zpcarousel-content-container,
.vc-customers-section
.vc-customers-carousel.vc-ticker-ready
.zpcarousel-arrows-container,
.vc-customers-section
.vc-customers-carousel.vc-ticker-ready
.zpcarousel-controller-container {
    display: none !important;
}

/* ----------------------------------------------------------
   4. CONTINUOUS LOGO TICKER
   ---------------------------------------------------------- */

.vc-customers-section .vc-logo-ticker {
    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    overflow: hidden !important;
}

/* Soft fade on both sides */

.vc-customers-section .vc-logo-ticker::before,
.vc-customers-section .vc-logo-ticker::after {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 32px !important;

    z-index: 2 !important;
    pointer-events: none !important;
}

.vc-customers-section .vc-logo-ticker::before {
    left: 0 !important;

    background: linear-gradient(
        to right,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

.vc-customers-section .vc-logo-ticker::after {
    right: 0 !important;

    background: linear-gradient(
        to left,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

/* Moving track */

.vc-customers-section .vc-logo-track {
    display: flex !important;
    align-items: center !important;

    width: max-content !important;

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

    animation: vcCustomerLogoScroll 58s linear infinite !important;
    will-change: transform !important;
}

/* Two identical groups create a seamless loop */

.vc-customers-section .vc-logo-group {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;

    gap: 10px !important;

    margin: 0 !important;

    /* This creates the same gap between both groups. */
    padding: 0 10px 0 0 !important;
}

/* ----------------------------------------------------------
   5. INDIVIDUAL LOGO BOX
   ---------------------------------------------------------- */

.vc-customers-section .vc-logo-item {

    flex: 0 0 132px !important;

    width: 132px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 10px 9px !important;

    background-color: #ffffff !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}

/* Small customer logos */

.vc-customers-section .vc-customer-logo {
    display: block !important;

    width: 108px !important;
    height: 38px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 108px !important;
    max-height: 38px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    filter: none !important;
    transform: none !important;
}

/* Pause while viewing a logo */

.vc-customers-section .vc-logo-ticker:hover .vc-logo-track,
.vc-customers-section .vc-logo-ticker:focus-within .vc-logo-track {
    animation-play-state: paused !important;
}

/* Subtle hover */

@media (hover: hover) and (pointer: fine) {

    .vc-customers-section .vc-logo-item:hover {
        background-color: #fafbfc !important;
        border-color: #cbd5e1 !important;
    }}

/* Continuous movement */

@keyframes vcCustomerLogoScroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }}

/* ----------------------------------------------------------
   6. TABLET
   ---------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-customers-section {
        padding: 36px 0 !important;
    }

    .vc-customers-section > .zpcontainer {
        width: calc(100% - 64px) !important;
    }

    .vc-customers-section .vc-logo-track {
        animation-duration: 52s !important;
    }

    .vc-customers-section .vc-logo-group {
        gap: 8px !important;
        padding-right: 8px !important;
    }

    .vc-customers-section .vc-logo-item {
        flex-basis: 120px !important;

        width: 120px !important;
        height: 68px !important;

        padding: 9px 8px !important;
    }

    .vc-customers-section .vc-customer-logo {
        width: 98px !important;
        height: 35px !important;

        max-width: 98px !important;
        max-height: 35px !important;
    }}

/* ----------------------------------------------------------
   7. MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 767px) {

    .vc-customers-section {
        padding: 30px 0 !important;
    }

    .vc-customers-section > .zpcontainer {
        width: calc(100% - 40px) !important;
    }

    .vc-customers-section .vc-logo-ticker::before,
    .vc-customers-section .vc-logo-ticker::after {
        width: 18px !important;
    }

    .vc-customers-section .vc-logo-track {
        animation-duration: 46s !important;
    }

    .vc-customers-section .vc-logo-group {
        gap: 7px !important;
        padding-right: 7px !important;
    }

    .vc-customers-section .vc-logo-item {
        flex-basis: 112px !important;

        width: 112px !important;
        height: 64px !important;

        padding: 8px !important;
    }

    .vc-customers-section .vc-customer-logo {
        width: 92px !important;
        height: 32px !important;

        max-width: 92px !important;
        max-height: 32px !important;
    }}

/* ----------------------------------------------------------
   8. ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .vc-customers-section .vc-logo-ticker {
        overflow-x: auto !important;
    }

    .vc-customers-section .vc-logo-track {
        animation: none !important;
    }}

/* ----------------------------------------------------------
   2. DESKTOP LOGO SIZE
   Rectangle remains 132 × 72px.
   ---------------------------------------------------------- */

@media screen and (min-width: 1024px) {

    .vc-customers-section .vc-logo-item {
        padding: 6px !important;
        overflow: hidden !important;
    }

    .vc-customers-section .vc-customer-logo {
        width: 120px !important;
        height: 48px !important;

        max-width: 120px !important;
        max-height: 48px !important;

        object-fit: contain !important;
        object-position: center !important;
    }}

/* ----------------------------------------------------------
   3. TABLET LOGO SIZE
   ---------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-customers-section .vc-logo-item {
        padding: 6px !important;
        overflow: hidden !important;
    }

    .vc-customers-section .vc-customer-logo {
        width: 110px !important;
        height: 44px !important;

        max-width: 110px !important;
        max-height: 44px !important;

        object-fit: contain !important;
        object-position: center !important;
    }}

/* ----------------------------------------------------------
   4. MOBILE LOGO SIZE
   ---------------------------------------------------------- */

@media screen and (max-width: 767px) {

    .vc-customers-section .vc-logo-item {
        padding: 5px !important;
        overflow: hidden !important;
    }

    .vc-customers-section .vc-customer-logo {
        width: 102px !important;
        height: 40px !important;

        max-width: 102px !important;
        max-height: 40px !important;

        object-fit: contain !important;
        object-position: center !important;
    }}

/* ==========================================================
   VIJAYCO — WHY VIJAYCO SECTION
   Uses Zoho Image Heading Text elements
   Desktop | Tablet | Mobile
   ========================================================== */

/* ----------------------------------------------------------
   1. COMPLETE SECTION
   ---------------------------------------------------------- */

.vc-why-section {
    width: 100% !important;
    padding: 48px 0 !important;

    background-color: #f8fafc !important;
    box-sizing: border-box !important;
}

.vc-why-section *,
.vc-why-section *::before,
.vc-why-section *::after {
    box-sizing: border-box !important;
}

/* Match the main homepage content alignment */

.vc-why-section > .zpcontainer {
    width: calc(100% - 200px) !important;
    max-width: 1248px !important;

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

/* ----------------------------------------------------------
   2. SECTION HEADING
   ---------------------------------------------------------- */

.vc-why-section .vc-why-title {
    position: relative !important;

    width: 100% !important;

    margin: 0 0 28px !important;
    padding: 0 0 13px !important;
}

.vc-why-section .vc-why-title .zpheading,
.vc-why-section .vc-why-title h2,
.vc-why-section .vc-why-title h2 *,
.vc-why-section .vc-why-title p,
.vc-why-section .vc-why-title strong {
    margin: 0 !important;
    padding: 0 !important;

    color: #0f172a !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;

    text-align: left !important;
}

/* Remove Zoho’s heading decoration */

.vc-why-section .vc-why-title .zpheading::before,
.vc-why-section .vc-why-title .zpheading::after,
.vc-why-section .vc-why-title h2::before,
.vc-why-section .vc-why-title h2::after {
    content: none !important;
    display: none !important;
}

/* Yellow VIJAYCO heading line */

.vc-why-section .vc-why-title::after {
    content: "" !important;
    display: block !important;

    width: 48px !important;
    height: 3px !important;

    margin-top: 10px !important;

    background-color: #ffc121 !important;
    border-radius: 3px !important;
}

/* ----------------------------------------------------------
   8. REMOVE THE EXISTING ZOHO SPACER
   The cards now receive spacing from the grid.
   ---------------------------------------------------------- */

.vc-why-section .zpelem-spacer,
.vc-why-section .zpspacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   10. TABLET
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-why-section {
        padding: 40px 0 !important;
    }

    .vc-why-section > .zpcontainer {
        width: calc(100% - 64px) !important;
    }

    .vc-why-section .vc-why-title .zpheading,
    .vc-why-section .vc-why-title h2,
    .vc-why-section .vc-why-title h2 *,
    .vc-why-section .vc-why-title p,
    .vc-why-section .vc-why-title strong {
        font-size: 28px !important;
    }}

/* ==========================================================
   11. MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    .vc-why-section {
        padding: 32px 0 !important;
    }

    .vc-why-section > .zpcontainer {
        width: calc(100% - 40px) !important;
    }

    .vc-why-section .vc-why-title {
        margin-bottom: 20px !important;
        padding-bottom: 11px !important;
    }

    .vc-why-section .vc-why-title .zpheading,
    .vc-why-section .vc-why-title h2,
    .vc-why-section .vc-why-title h2 *,
    .vc-why-section .vc-why-title p,
    .vc-why-section .vc-why-title strong {
        font-size: 24px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.3px !important;
    }

    .vc-why-section .vc-why-title::after {
        width: 42px !important;
        margin-top: 8px !important;
    }}
/* ==========================================================
   VIJAYCO — PERFORMANCE STATISTICS
   Compatible with the current Zoho class placement.

   vc-stats-section = Complete section
   vc-stats-row     = Each of the three columns
   ========================================================== */

/* ----------------------------------------------------------
   1. COMPLETE SECTION
   ---------------------------------------------------------- */

.vc-stats-section {
    position: relative !important;

    background-color: #f6f8fb !important;

    border-top: 1px solid #e8edf2 !important;
    border-bottom: 1px solid #e8edf2 !important;

    overflow: hidden !important;
    
}

/* Consistent website alignment */

/* ----------------------------------------------------------
   2. ACTUAL ZOHO PARENT ROW
   The custom class is on the columns, so target the Zoho row.
   ---------------------------------------------------------- */

.vc-stats-section
> .zpcontainer
> .zprow {
    position: relative !important;

    gap: 0 !important;

    overflow: hidden !important;

    background-color: #ffffff !important;

    border: 1px solid #e0e6ed !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

/* Yellow brand accent */

.vc-stats-section
> .zpcontainer
> .zprow::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    display: block !important;

    width: 96px !important;
    height: 4px !important;

    z-index: 2 !important;

    background-color: #ffc121 !important;
    border-radius: 0 0 4px 4px !important;

    transform: translateX(-50%) !important;
}

.vc-stats-section
> .zpcontainer
> .zprow::after {
    content: none !important;
    display: none !important;
}

/* ----------------------------------------------------------
   3. THREE STATISTIC COLUMNS
   vc-stats-row is currently on each column.
   ---------------------------------------------------------- */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row {
    position: relative !important;

    align-items: stretch !important;

    border-left: 1px solid #e5eaf0 !important;
}

/* First column does not need a separator */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:first-of-type {
    border-left: 0 !important;
}

/* ----------------------------------------------------------
   4. REMOVE THE OLD INDIVIDUAL CARD APPEARANCE
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpbox-container {

    height: 100% !important;
    min-height: 148px !important;

    padding: 31px 24px 26px !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transition: background-color 0.2s ease !important;
}

/* ----------------------------------------------------------
   5. HEADING CONTAINER
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpelem-heading,
.vc-stats-section
.vc-stats-row
.zpheading {
    width: 100% !important;

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

    text-align: center !important;
}

.vc-stats-section
.vc-stats-row
.zpheading::before,
.vc-stats-section
.vc-stats-row
.zpheading::after {
    content: none !important;
    display: none !important;
}

/* ----------------------------------------------------------
   8. SUBTLE HOVER
   ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .vc-stats-section
    .vc-stats-row
    .zpbox-container:hover {
        background-color: #fffaf0 !important;
    }}

/* ==========================================================
   9. TABLET
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-stats-section
    .vc-stats-row
    .zpbox-container {
        min-height: 138px !important;
        padding: 28px 14px 23px !important;
    }}

/* ==========================================================
   10. MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    .vc-stats-section
    > .zpcontainer
    > .zprow {
        
        border-radius: 12px !important;
    }

    .vc-stats-section
    > .zpcontainer
    > .zprow::before {
        width: 70px !important;
    }

    .vc-stats-section
    > .zpcontainer
    > .zprow
    > .vc-stats-row {
        border-left: 0 !important;
        border-top: 1px solid #e5eaf0 !important;
    }

    .vc-stats-section
    > .zpcontainer
    > .zprow
    > .vc-stats-row:first-of-type {
        border-top: 0 !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpbox-container {
        min-height: 112px !important;
        
    }}

/* ==========================================================
   VIJAYCO — STATISTICS SECTION
   CSS-only version for current Zoho structure
   ========================================================== */

/* ----------------------------------------------------------
   1. SECTION
   ---------------------------------------------------------- */

.vc-stats-section {
    width: 100% !important;
    padding: 42px 0 !important;

    background: #f6f8fb !important;
    background-image: none !important;

    border-top: 1px solid #e6ebf1 !important;
    border-bottom: 1px solid #e6ebf1 !important;

    box-sizing: border-box !important;
}

.vc-stats-section *,
.vc-stats-section *::before,
.vc-stats-section *::after {
    box-sizing: border-box !important;
}

/* Website content alignment */

.vc-stats-section > .zpcontainer {
    width: calc(100% - 200px) !important;
    max-width: 1248px !important;

    margin: 0 auto !important;
    
}

/* ----------------------------------------------------------
   2. ZOHO PARENT ROW
   Creates three equal columns with proper spacing.
   ---------------------------------------------------------- */

.vc-stats-section
> .zpcontainer
> .zprow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;
    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.vc-stats-section
> .zpcontainer
> .zprow::before,
.vc-stats-section
> .zpcontainer
> .zprow::after {
    content: none !important;
    display: none !important;
}

/* ----------------------------------------------------------
   3. STATISTIC COLUMNS
   vc-stats-row is applied to every column.
   ---------------------------------------------------------- */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row {
    float: none !important;
    flex: none !important;

    display: flex !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

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

    color: #0f172a !important;
    background: transparent !important;
}

/* Statistic values used by the visual layout */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-child(1) {
    --vc-stat-number: "100%";
    --vc-stat-label: "Guaranteed Roll Length";
}

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-child(2) {
    --vc-stat-number: "Up to 55";
    --vc-stat-label: "Straps per Minute";
}

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-child(3) {
    --vc-stat-number: "7,000+";
    --vc-stat-label: "Customers Served";
}

/* ----------------------------------------------------------
   4. INDIVIDUAL STATISTIC BOX
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpbox-container {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 138px !important;

    margin: 0 !important;
    padding: 28px 20px 22px !important;

    overflow: hidden !important;

    color: #0f172a !important;
    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #e0e6ed !important;
    border-radius: 12px !important;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.055) !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

/* Yellow accent on every card */

.vc-stats-section
.vc-stats-row
.zpbox-container::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: 48px !important;
    height: 3px !important;

    background-color: #ffc121 !important;
    border-radius: 0 0 3px 3px !important;

    transform: translateX(-50%) !important;
}

/* ----------------------------------------------------------
   5. CLEAN THE ORIGINAL ZOHO HEADING
   Original text remains available in the page structure.
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpelem-heading {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.vc-stats-section
.vc-stats-row
.zpheading {
    display: block !important;

    width: 100% !important;

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

    color: #0f172a !important;
    text-align: center !important;
}

/* Visually hide Zoho's complicated nested formatting */

.vc-stats-section
.vc-stats-row
.zpheading
> * {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ----------------------------------------------------------
   6. LARGE NUMBER
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpheading::before {
    content: var(--vc-stat-number) !important;

    width: 100% !important;

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

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;

    text-align: center !important;

    background: transparent !important;
}

/* ----------------------------------------------------------
   7. DESCRIPTION
   ---------------------------------------------------------- */

.vc-stats-section
.vc-stats-row
.zpheading::after {
    content: var(--vc-stat-label) !important;

    width: 100% !important;

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

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;

    text-align: center !important;

    background: transparent !important;
}

/* ----------------------------------------------------------
   8. DESKTOP HOVER
   ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .vc-stats-section
    .vc-stats-row
    .zpbox-container:hover {
        transform: translateY(-3px) !important;

        border-color: rgba(255, 193, 33, 0.8) !important;

        box-shadow:
            0 10px 24px rgba(15, 23, 42, 0.09) !important;
    }}

/* ==========================================================
   9. TABLET
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-stats-section {
        padding: 36px 0 !important;
    }

    .vc-stats-section > .zpcontainer {
        width: calc(100% - 64px) !important;
    }

    .vc-stats-section
    > .zpcontainer
    > .zprow {
        gap: 12px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpbox-container {
        min-height: 128px !important;
        padding: 26px 12px 20px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpheading::before {
        font-size: 30px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpheading::after {
        margin-top: 8px !important;
        font-size: 13px !important;
    }}

/* ==========================================================
   10. MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    .vc-stats-section {
        padding: 28px 0 !important;
    }

    .vc-stats-section > .zpcontainer {
        width: calc(100% - 40px) !important;
    }

    .vc-stats-section
    > .zpcontainer
    > .zprow {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpbox-container {
        min-height: 108px !important;
        padding: 22px 16px 18px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpheading::before {
        font-size: 29px !important;
        letter-spacing: -0.4px !important;
    }

    .vc-stats-section
    .vc-stats-row
    .zpheading::after {
        margin-top: 6px !important;
        font-size: 14px !important;
    }}

/* ==========================================================
   STATISTICS — FINAL INDEX AND BORDER CORRECTION
   Add at the bottom of the statistics CSS
   ========================================================== */

/* Remove old vertical column borders */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/*
 * Use nth-of-type instead of nth-child.
 * Zoho places a <style> element before the columns.
 */

/* First card */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-of-type(1) {
    --vc-stat-number: "100%";
    --vc-stat-label: "Guaranteed Roll Length";
}

/* Second card */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-of-type(2) {
    --vc-stat-number: "Up to 55";
    --vc-stat-label: "Straps per Minute";
}

/* Third card */

.vc-stats-section
> .zpcontainer
> .zprow
> .vc-stats-row:nth-of-type(3) {
    --vc-stat-number: "7,000+";
    --vc-stat-label: "Customers Served";
}

/* Ensure all generated text is visible */

.vc-stats-section
.vc-stats-row
.zpheading::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    color: #0f172a !important;
}

.vc-stats-section
.vc-stats-row
.zpheading::after {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    color: #526174 !important;
}

/* Preserve a clean gap without separator lines */

.vc-stats-section
> .zpcontainer
> .zprow {
    column-gap: 16px !important;
    row-gap: 16px !important;
}

/* Tablet spacing */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .vc-stats-section
    > .zpcontainer
    > .zprow {
        column-gap: 12px !important;
        row-gap: 12px !important;
    }}

/* Mobile spacing */

@media screen and (max-width: 767px) {

    .vc-stats-section
    > .zpcontainer
    > .zprow {
        column-gap: 0 !important;
        row-gap: 10px !important;
    }}

/* =====================================================
   VIJAYCO FOOTER — COMPLETE REDESIGN
   Main section class: footer
   Desktop row class: vc-footer-desktop
===================================================== */

/* ---------- Main footer ---------- */

.footer {
    background: #171a20 !important;
    color: #ffffff !important;
    padding: 48px clamp(28px, 7vw, 96px) 24px !important;
    font-family: "Poppins", sans-serif !important;
}

.footer > .zpcontainer-fluid {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.footer .zpdefault-section-bg {
    background: transparent !important;
}

/* Remove all unwanted Zoho lines */
.footer .zpelem-col,
.footer .zprow,
.footer .zpheading,
.footer .zpelem-text,
.footer .zpaccordion,
.footer .zpaccordion-content,
.footer .zs-social-profile > .zpelem-col {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Remove text underlines */
.footer .zpheading,
.footer .zpheading *,
.footer .zpelem-text,
.footer .zpelem-text *,
.footer a {
    text-decoration: none !important;
}

/* Remove heading decorative lines */
.footer .zpheading::before,
.footer .zpheading::after,
.footer .zpelem-text::before,
.footer .zpelem-text::after {
    content: none !important;
    display: none !important;
}

/* =====================================================
   DESKTOP FOOTER
===================================================== */

@media (min-width: 768px) {

    .footer .vc-footer-desktop {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 240px !important;
        align-items: start !important;
        gap: 70px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset direct desktop columns */
    .footer .vc-footer-desktop > .zpelem-col {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Hide unused third Zoho column */
    .footer .vc-footer-desktop >
    .zpelem-col:nth-of-type(3) {
        display: none !important;
    }

    /* Follow Us row */
    .footer .vc-footer-desktop .zs-social-profile {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Zoho nested social columns */
    .footer .vc-footer-desktop
    .zs-social-profile > .zpelem-col {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }}

/* =====================================================
   FOOTER HEADINGS
===================================================== */

.footer .zpheading,
.footer h2.zpheading,
.footer .zs-social-profile .zpelem-text p {
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

/* Follow Us spacing */
.footer .zs-social-profile .zpelem-text {
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

/* Legal heading */
.footer .vc-footer-desktop h2.zpheading {
    margin: 0 0 14px !important;
}

/* =====================================================
   SOCIAL ICONS
===================================================== */

.footer .zpsocialprofile-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;

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

    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9px !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease !important;
}

.footer .zpsocialprofile-wrapper:hover {
    background: #ffc121 !important;
    border-color: #ffc121 !important;
    transform: translateY(-3px) !important;
}

.footer .zpsocialprofile-wrapper svg {
    width: 17px !important;
    height: 17px !important;
}

.footer .zpsocialprofile-wrapper svg,
.footer .zpsocialprofile-wrapper svg path {
    fill: #ffffff !important;
    transition: fill 0.25s ease !important;
}

.footer .zpsocialprofile-wrapper:hover svg,
.footer .zpsocialprofile-wrapper:hover svg path {
    fill: #111827 !important;
}

/* =====================================================
   LEGAL LINK
===================================================== */

.footer a[href*="privacy"] {
    display: inline-block !important;
    color: #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.footer a[href*="privacy"]:hover {
    color: #ffc121 !important;
}

/* =====================================================
   COPYRIGHT ROW
===================================================== */

.footer > .zpcontainer-fluid > .zprow:last-of-type {
    width: 100% !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.footer > .zpcontainer-fluid >
.zprow:last-of-type .zpelem-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.footer > .zpcontainer-fluid >
.zprow:last-of-type .zpelem-text,
.footer > .zpcontainer-fluid >
.zprow:last-of-type p {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =====================================================
   TABLET
===================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .footer {
        padding: 42px 36px 24px !important;
    }

    .footer .vc-footer-desktop {
        grid-template-columns: minmax(0, 1fr) 200px !important;
        gap: 40px !important;
    }

    .footer .zpsocialprofile-wrapper {
        width: 36px !important;
        height: 36px !important;
    }}

/* =====================================================
   MOBILE FOOTER
===================================================== */

@media (max-width: 767px) {

    .footer {
        padding: 34px 22px 22px !important;
    }

    /* Do not override Zoho's responsive visibility */
    .footer .zp-hidden-md {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .footer .zp-hidden-md > .zpelem-col {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Legal accordion */
    .footer .zpaccordion,
    .footer .zpaccordion-container,
    .footer .zpaccordion-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .footer .zpaccordion {
        padding: 12px 0 !important;
    }

    .footer .zpaccordion-name {
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .footer .zpaccordionicon svg,
    .footer .zpaccordionicon svg path {
        fill: #ffc121 !important;
    }

    /* Mobile social row */
    .footer .zp-hidden-md .zs-social-profile {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 22px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .footer .zp-hidden-md
    .zs-social-profile > .zpelem-col {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .footer .zpsocialprofile-wrapper {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }

    /* Copyright centered on mobile */
    .footer > .zpcontainer-fluid >
    .zprow:last-of-type {
        margin-top: 26px !important;
        text-align: center !important;
    }

    .footer > .zpcontainer-fluid >
    .zprow:last-of-type .zptext,
    .footer > .zpcontainer-fluid >
    .zprow:last-of-type p {
        text-align: center !important;
        font-size: 12px !important;
    }}

/* =====================================================
   VIJAYCO HOMEPAGE — SPACING CORRECTION
===================================================== */

/* Consistent content width across all sections */
.vc-width-section > .zpcontainer-fluid,
.vc-products-section > .zpcontainer-fluid,
.vc-why-section > .zpcontainer,
.vc-customers-section > .zpcontainer,
.vc-stats-section > .zpcontainer {

    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================
   SHOP BY WIDTH
===================================================== */

.vc-width-section {
    
    margin: 0 !important;
}

/* Remove unnecessary internal bottom spacing */
.vc-width-section .zs-custom-category {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =====================================================
   PRODUCT SECTION
===================================================== */

.vc-products-section {
    padding: 40px 0 50px !important;
    margin: 0 !important;
}

/* Stop the product row creating additional space */
.vc-products-section > .zpcontainer-fluid > .zprow {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Product cards should not add bottom margins */
.vc-products-section .zpelem-product,
.vc-products-section .zpstoreproduct-container,
.vc-products-section .theme-product-box-container {
    margin-bottom: 0 !important;
}

/* =====================================================
   WHY VIJAYCO SECTION
===================================================== */

.vc-why-section {
    
    margin: 0 !important;
}

/* Keep the two benefit rows closer together */
.vc-why-section .vc-why-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.vc-why-section .vc-why-grid + .vc-why-grid {
    margin-top: 12px !important;
}

/* =====================================================
   VALUED CUSTOMERS
===================================================== */

.vc-customers-section {
    
    margin: 0 !important;
}

.vc-customers-section .vc-customers-carousel,
.vc-customers-section .vc-logo-ticker {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/*
   Hides only the empty Zoho section located between
   Valued Customers and the statistics section.
*/
.vc-customers-section +
.zpsection:not(.vc-stats-section) {

    overflow: hidden !important;
}

/* =====================================================
   STATISTICS SECTION
===================================================== */

.vc-stats-section {
    
    margin: 0 !important;
}

.vc-stats-section > .zpcontainer {
    padding: 0 !important;
}

/* Maintain proper card spacing */
.vc-stats-section > .zpcontainer > .zprow {
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Compact the cards slightly */
.vc-stats-section .vc-stats-row {
    min-height: 132px !important;
    padding-top: 30px !important;
    padding-bottom: 28px !important;
    margin: 0 !important;
}

/* =====================================================
   FOOTER CONNECTION
===================================================== */

.vc-stats-section + .footer {
    margin-top: 0 !important;
}

.footer {
    margin-top: 0 !important;
}

/* =====================================================
   TABLET
===================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .vc-width-section {
        padding: 34px 0 38px !important;
    }

    .vc-products-section {
        padding: 36px 0 44px !important;
    }

    .vc-why-section {
        padding: 36px 0 38px !important;
    }

    .vc-customers-section {
        padding: 32px 0 22px !important;
    }

    .vc-stats-section {
        padding: 30px 0 !important;
    }}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .vc-width-section > .zpcontainer-fluid,
    .vc-products-section > .zpcontainer-fluid,
    .vc-why-section > .zpcontainer,
    .vc-customers-section > .zpcontainer,
    .vc-stats-section > .zpcontainer {
        
        max-width: none !important;
    }

    .vc-products-section {
        padding: 30px 0 36px !important;
    }

    .vc-stats-section .vc-stats-row {
        min-height: 112px !important;
        padding: 24px 16px !important;
    }}
/* =====================================================
   STATISTIC CARDS — REMOVE COLUMN LINES
===================================================== */

/* Remove the large border surrounding the complete row */
.vc-stats-section > .zpcontainer > .zprow {

    outline: 0 !important;
    
    overflow: visible !important;

}

/* Remove Zoho column borders */
.vc-stats-section .vc-stats-row {

    outline: 0 !important;
    box-shadow: none !important;
}

/* Individual white statistic card */
.vc-stats-section .vc-stats-row > .zpbox-container,
.vc-stats-section .vc-stats-row .zpelem-box {
    background: #ffffff !important;

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    border-radius: 14px !important;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.07) !important;

    overflow: hidden !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

/* Clean hover without yellow border */
.vc-stats-section .vc-stats-row > .zpbox-container:hover,
.vc-stats-section .vc-stats-row .zpelem-box:hover {
    background: #ffffff !important;
    border: 0 !important;
    transform: translateY(-3px) !important;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.11) !important;
}

/* Keep the small yellow accent */
.vc-stats-section .vc-stats-row > .zpbox-container::before,
.vc-stats-section .vc-stats-row .zpelem-box::before {
    border: 0 !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .vc-stats-section > .zpcontainer > .zprow {
        gap: 14px !important;
    }}

/* Mobile */
@media (max-width: 767px) {
    .vc-stats-section > .zpcontainer > .zprow {
        gap: 12px !important;
    }

    .vc-stats-section .vc-stats-row > .zpbox-container,
    .vc-stats-section .vc-stats-row .zpelem-box {
        border-radius: 12px !important;
    }}

/* =====================================================
   VIJAYCO FINAL RESPONSIVE CORRECTIONS
   Desktop + Tablet + Mobile
===================================================== */

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

/* ---------- Common content width ---------- */

.vc-width-section > .zpcontainer-fluid,
.vc-products-section > .zpcontainer-fluid,
.vc-why-section > .zpcontainer,
.vc-customers-section > .zpcontainer,
.vc-stats-section > .zpcontainer {
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

/* =====================================================
   UNIFORM SECTION HEADINGS
===================================================== */

.vc-width-section .vc-section-title .zpheading,
.vc-products-section .vc-products-header .zpheading,
.vc-why-section > .zpcontainer .zpheading {
    color: #0f172a !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-decoration: none !important;

    position: relative !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
}

/* Single yellow underline */
.vc-width-section .vc-section-title .zpheading::after,
.vc-products-section .vc-products-header .zpheading::after,
.vc-why-section > .zpcontainer .zpheading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 48px !important;
    height: 3px !important;

    border: 0 !important;
    border-radius: 3px !important;
    background: #ffc121 !important;
}

/* =====================================================
   HERO
===================================================== */

.banner,
.banner .zphero-slide,
.banner .zpslider-img,
.banner .zphero-slider-container {
    min-height: 560px !important;
}

.banner .curslide .zprow > .zpelem-col:first-of-type {
    width: 48% !important;
    max-width: 560px !important;
}

.banner .zpelem-heading .zpheading {
    color: #0f172a !important;
}

.banner .zpelem-text {
    max-width: 540px !important;
}

.banner .zpelem-button {
    margin-top: 22px !important;
}

/* =====================================================
   SECTION SPACING
===================================================== */

.vc-width-section {
    padding: 38px 0 42px !important;
}

.vc-products-section {
    padding: 40px 0 38px !important;
}

.vc-why-section {
    padding: 40px 0 42px !important;
}

.vc-customers-section {
    padding: 36px 0 24px !important;
}

.vc-stats-section {
    padding: 34px 0 !important;
}

/* Hide the empty section after customer logos */
.vc-customers-section +
.zpsection:not(.vc-stats-section) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =====================================================
   SHOP BY WIDTH
===================================================== */

/* Heading/intro column spans full width */

/* Width cards */
.vc-width-section .vc-width-card {
    width: auto !important;

    padding: 14px 12px 16px !important;

    border: 1px solid #e6ebf1 !important;
    border-radius: 14px !important;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

.vc-width-section .vc-width-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 193, 33, 0.65) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10) !important;
}

/* =====================================================
   PRODUCT SECTION
===================================================== */

.vc-products-section .vc-products-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
}

.vc-products-section .zpfilmstrip-viewall-button {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.vc-products-section
.zpfilmstrip-viewall-button .zpbutton {
    min-height: 42px !important;
    padding: 10px 20px !important;

    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}

.vc-products-section
.zpfilmstrip-viewall-button .zpbutton:hover {
    color: #0f172a !important;
    background: #ffc121 !important;
    border-color: #ffc121 !important;
}

/* Product cards */
.vc-products-section .theme-product-box-content {
    height: 100% !important;
    padding: 14px !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

.vc-products-section .theme-product-box-content:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 193, 33, 0.55) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
}

/* Product names */
.vc-products-section .theme-product-name a {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    min-height: 44px !important;

    color: #1f2937 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* Add to Cart + eye */
.vc-products-section .vc-eye-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.vc-products-section .vc-eye-row .theme-cart-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    color: #ffffff !important;
    background: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 8px !important;
}

.vc-products-section .vc-product-eye {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;

    opacity: 1 !important;
    visibility: visible !important;

    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 8px !important;
}

.vc-products-section .vc-product-eye svg {
    width: 20px !important;
    height: 20px !important;
}

/* =====================================================
   WHY VIJAYCO
===================================================== */

.vc-why-section .vc-why-grid {
    margin: 0 !important;
}

.vc-why-section .vc-why-grid +
.vc-why-grid {
    margin-top: 14px !important;
}

.vc-why-section .zpelem-imagetext {
    height: 100% !important;
}

/* =====================================================
   CUSTOMER LOGOS
===================================================== */

.vc-customers-section .vc-logo-item {
    height: 74px !important;
    padding: 12px 18px !important;

    border: 1px solid #e6ebf1 !important;
    
}

.vc-customers-section .vc-customer-logo,
.vc-customers-section .vc-logo-item img {
    
    max-width: 118px !important;
    
    max-height: 44px !important;
    
}

/* =====================================================
   STATISTIC CARDS
===================================================== */

.vc-stats-section > .zpcontainer > .zprow {
    gap: 18px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.vc-stats-section .vc-stats-row {
    background: transparent !important;
    border: 0 !important;
}

.vc-stats-section .vc-stats-row .zpelem-box {
    min-height: 132px !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 14px !important;

    box-shadow: 0 7px 22px rgba(15, 23, 42, 0.07) !important;
}

/* =====================================================
   FIXED COUPON MESSAGE
===================================================== */

#zsmsg-policy > .zplight-section {
    left: auto !important;
    right: 24px !important;
    bottom: 20px !important;

    width: auto !important;
    max-width: 520px !important;
    min-height: 0 !important;

    padding: 11px 12px 11px 18px !important;

    color: #ffffff !important;
    background: #171a20 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.20) !important;

    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

#zsmsg-policy > .zplight-section .zpbutton {
    min-height: 32px !important;
    margin-left: 12px !important;
    padding: 5px 12px !important;

    color: #111827 !important;
    background: #ffc121 !important;
    border-radius: 6px !important;
}

/* =====================================================
   TABLET — 768px TO 991px
===================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .vc-width-section > .zpcontainer-fluid,
    .vc-products-section > .zpcontainer-fluid,
    .vc-why-section > .zpcontainer,
    .vc-customers-section > .zpcontainer,
    .vc-stats-section > .zpcontainer {
        width: calc(100% - 40px) !important;
    }

    /* Headings */
    .vc-width-section .vc-section-title .zpheading,
.vc-products-section .vc-products-header .zpheading,
.vc-why-section > .zpcontainer .zpheading {
        font-size: 28px !important;
    }

    /* Hero */
    .banner,
    .banner .zphero-slide,
    .banner .zpslider-img,
    .banner .zphero-slider-container {
        min-height: 510px !important;
    }

    .banner .zphero-slider-container {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.78) 50%,
                rgba(255, 255, 255, 0.08) 78%
            ) !important;
    }

    .banner .curslide .zprow >
    .zpelem-col:first-of-type {
        width: 54% !important;
        max-width: 500px !important;
    }

    .banner .zpelem-heading .zpheading {
        font-size: 44px !important;
        line-height: 1.12 !important;
    }

    /* Width cards: four + three */
    .vc-width-section .zs-custom-category {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        
    }

    .vc-width-section .vc-width-card img {
        height: 135px !important;
    }

    /* Statistics */
    .vc-stats-section > .zpcontainer > .zprow {
        gap: 12px !important;
    }

    .vc-stats-section .vc-stats-row .zpelem-box {
        min-height: 122px !important;
    }}

/* =====================================================
   MOBILE — 767px AND BELOW
===================================================== */

@media (max-width: 767px) {

    .vc-width-section > .zpcontainer-fluid,
    .vc-products-section > .zpcontainer-fluid,
    .vc-why-section > .zpcontainer,
    .vc-customers-section > .zpcontainer,
    .vc-stats-section > .zpcontainer {
        width: calc(100% - 32px) !important;
    }

    /* Headings */
    .vc-width-section .vc-section-title .zpheading,
.vc-products-section .vc-products-header .zpheading,
.vc-why-section > .zpcontainer .zpheading {
        font-size: 24px !important;
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
    }

    /* Section spacing */
    .vc-width-section {
        padding: 28px 0 32px !important;
    }

    .vc-products-section {
        padding: 30px 0 34px !important;
    }

    .vc-why-section {
        padding: 30px 0 32px !important;
    }

    .vc-customers-section {
        padding: 28px 0 20px !important;
    }

    .vc-stats-section {
        padding: 24px 0 !important;
    }

    /* Hero */
    .banner,
    .banner .zphero-slide,
    .banner .zpslider-img,
    .banner .zphero-slider-container {
        min-height: 520px !important;
    }

    .banner .zpslider-img {
        background-position: 64% center !important;
    }

    .banner .zphero-slider-container {
        display: flex !important;
        align-items: flex-end !important;

        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.90) 60%,
                rgba(255, 255, 255, 0.24) 100%
            ) !important;
    }

    .banner .curslide .zprow >
    .zpelem-col:first-of-type {
        width: 100% !important;
        max-width: 100% !important;
        padding: 26px 20px 32px !important;
    }

    .banner .zpelem-heading .zpheading {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .banner .zpelem-text {
        max-width: 94% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Width cards: two columns */

    .vc-width-section .vc-width-card {
        padding: 12px 8px 14px !important;
    }

    /* Products heading + View All */
    .vc-products-section .vc-products-header {
        align-items: center !important;
        gap: 10px !important;
    }

    .vc-products-section
    .zpfilmstrip-viewall-button .zpbutton {
        min-height: 38px !important;
        padding: 8px 13px !important;
        font-size: 12px !important;
    }

    /* Mobile product controls */
    .vc-products-section .vc-product-eye {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .vc-products-section .theme-cart-button {
        min-height: 42px !important;
        font-size: 13px !important;
    }

    /* No hover movement on touchscreen */
    .vc-products-section .theme-product-box-content:hover,
    .vc-width-section .vc-width-card:hover {
        transform: none !important;
    }

    /* Why VIJAYCO cards */
    .vc-why-section .vc-why-grid +
    .vc-why-grid {
        margin-top: 10px !important;
    }

    /* Customers */
    .vc-customers-section .vc-logo-item {
        height: 66px !important;
        padding: 10px 14px !important;
    }

    .vc-customers-section .vc-customer-logo,
    .vc-customers-section .vc-logo-item img {
        max-width: 100px !important;
        max-height: 38px !important;
    }

    /* Statistics: one card per row */
    .vc-stats-section > .zpcontainer > .zprow {
        gap: 10px !important;
    }

    .vc-stats-section .vc-stats-row {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .vc-stats-section .vc-stats-row .zpelem-box {
        min-height: 108px !important;
        border-radius: 12px !important;
    }

    /* Coupon notification */
    #zsmsg-policy > .zplight-section {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;

        width: auto !important;
        max-width: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;

        padding: 9px 9px 9px 13px !important;

        font-size: 11px !important;
        text-align: left !important;
    }

    #zsmsg-policy > .zplight-section .zpbutton {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        margin: 0 !important;
    }}

/* Remove duplicate Shop by Width underline */
.vc-section-title::before,
.vc-section-title::after,
.vc-section-title .zpheading::before {
    content: none !important;
    display: none !important;
}

/* Keep only one underline */
.vc-section-title .zpheading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 48px !important;
    height: 3px !important;

    background: #ffc121 !important;
    border: 0 !important;
    border-radius: 3px !important;
}

/* =====================================================
   HEADING + CUSTOMER LOGO + WIDTH ALIGNMENT FIX
===================================================== */

/* =====================================================
   1. KEEP ONE LINE UNDER WHY AND VALUED CUSTOMERS
===================================================== */

.vc-why-section .zpelem-heading::before,
.vc-why-section .zpelem-heading::after,
.vc-why-section .zpheading::before {
    content: none !important;
    display: none !important;
}

/* One consistent yellow underline */
.vc-why-section > .zpcontainer >
.zprow:first-of-type .zpheading {
    position: relative !important;
    padding-bottom: 14px !important;
}

.vc-why-section > .zpcontainer >
.zprow:first-of-type .zpheading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 48px !important;
    height: 3px !important;

    background: #ffc121 !important;
    border: 0 !important;
    border-radius: 3px !important;
}

/* =====================================================
   2. INCREASE CUSTOMER LOGO SIZE
===================================================== */

.vc-customers-section .vc-logo-item {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    height: 82px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 14px !important;

    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/*
   The uploaded logo files contain large white margins.
   Scaling makes the visible brand logo larger without
   increasing the rectangle excessively.
*/
.vc-customers-section .vc-customer-logo,
.vc-customers-section .vc-logo-item img {
    display: block !important;

    width: auto !important;
    max-width: 122px !important;
    height: auto !important;
    max-height: 56px !important;

    object-fit: contain !important;
    transform: scale(1.35) !important;
    transform-origin: center !important;
}

/* =====================================================
   3. SHOP BY WIDTH — DESKTOP ALIGNMENT
===================================================== */

.vc-width-section .zs-custom-category {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Heading and introduction use full row */
.vc-width-section .zs-custom-category >
.zpelem-col:not(.vc-width-card) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* All seven cards remain equal */
.vc-width-section .vc-width-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}

.vc-width-section .vc-width-card img {
    display: block !important;
    width: 100% !important;
    height: 145px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* =====================================================
   TABLET — FOUR CARDS + CENTRED THREE CARDS
===================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .vc-width-section .zs-custom-category {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .vc-width-section .zs-custom-category >
    .zpelem-col:not(.vc-width-card) {
        grid-column: 1 / -1 !important;
    }

    /* First four cards */
    .vc-width-section .vc-width-card {
        grid-column: span 3 !important;
    }

    /* Centre the final three cards */
    .vc-width-section .vc-width-card:nth-last-of-type(3) {
        grid-column: 2 / span 3 !important;
    }

    .vc-width-section .vc-width-card:nth-last-of-type(2) {
        grid-column: 5 / span 3 !important;
    }

    .vc-width-section .vc-width-card:last-of-type {
        grid-column: 8 / span 3 !important;
    }

    .vc-width-section .vc-width-card img {
        height: 132px !important;
    }

    /* Tablet customer logos */
    .vc-customers-section .vc-logo-item {
        flex-basis: 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        height: 78px !important;
    }

    .vc-customers-section .vc-customer-logo,
    .vc-customers-section .vc-logo-item img {
        max-width: 114px !important;
        max-height: 52px !important;
        transform: scale(1.32) !important;
    }}

/* =====================================================
   MOBILE — TWO CARDS + CENTRED FINAL CARD
===================================================== */

@media (max-width: 767px) {

    .vc-width-section .zs-custom-category {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .vc-width-section .zs-custom-category >
    .zpelem-col:not(.vc-width-card) {
        grid-column: 1 / -1 !important;
    }

    .vc-width-section .vc-width-card {
        grid-column: auto !important;
        width: 100% !important;
    }

    /* Centre the seventh card */
    .vc-width-section .vc-width-card:last-of-type {
        grid-column: 1 / -1 !important;
        justify-self: center !important;

        width: calc(50% - 6px) !important;
        max-width: 190px !important;
    }

    .vc-width-section .vc-width-card img {
        height: 112px !important;
    }

    /* Mobile customer logos */
    .vc-customers-section .vc-logo-item {
        flex-basis: 126px !important;
        width: 126px !important;
        min-width: 126px !important;
        height: 72px !important;
        padding: 9px 12px !important;
    }

    .vc-customers-section .vc-customer-logo,
    .vc-customers-section .vc-logo-item img {
        max-width: 102px !important;
        max-height: 48px !important;
        transform: scale(1.28) !important;
    }}
/* =====================================================
   VIJAYCO TABLET LAYOUT CORRECTION
   768px–1023px
===================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Consistent tablet section width */
    .vc-width-section > .zpcontainer-fluid,
    .vc-products-section > .zpcontainer-fluid,
    .vc-why-section > .zpcontainer,
    .vc-customers-section > .zpcontainer,
    .vc-stats-section > .zpcontainer {
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        margin-inline: auto !important;
    }

    /* =================================================
       SHOP BY WIDTH — 3 + 3 + 1
    ================================================= */

    .vc-width-section .zs-custom-category {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Heading and description span complete row */
    .vc-width-section .zs-custom-category >
    .zpelem-col:not(.vc-width-card) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cancel all previous custom card positions */
    .vc-width-section .vc-width-card,
    .vc-width-section
    .vc-width-card:nth-last-of-type(3),
    .vc-width-section
    .vc-width-card:nth-last-of-type(2) {
        grid-column: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    /* Centre only the seventh card */
    .vc-width-section .vc-width-card:last-of-type {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    .vc-width-section .vc-width-card img {
        width: 100% !important;
        height: 130px !important;
        object-fit: contain !important;
    }

    /* =================================================
       PRODUCTS — 2 × 2 TABLET GRID
    ================================================= */

    .vc-products-section
    .zpfilmstrip-overflow-hidden {
        overflow: visible !important;
    }

    .vc-products-section
    .theme-store-style-collection-row-17 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;

        width: 100% !important;
        transform: none !important;
        margin: 0 !important;
    }

    .vc-products-section .theme-prod-box {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;

        margin: 0 !important;
    }

    /* Homepage displays only four products */
    .vc-products-section
    .theme-prod-box:nth-of-type(n + 5) {
        display: none !important;
    }

    .vc-products-section
    .theme-product-box-content {
        height: 100% !important;
        padding: 16px !important;
    }

    .vc-products-section
    .theme-product-image-area {
        width: 100% !important;
        height: 260px !important;
    }

    .vc-products-section
    .theme-product-image-area img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Product name gets two clean lines */
    .vc-products-section
    .theme-product-name a {
        min-height: 44px !important;

        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    /* Add to Cart stays on one line */
    .vc-products-section
    .vc-eye-row {
        display: flex !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .vc-products-section
    .theme-cart-button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 44px !important;

        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .vc-products-section
    .vc-product-eye {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* =================================================
       WHY VIJAYCO
    ================================================= */

    .vc-why-section .vc-why-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        margin: 0 !important;
    }

    .vc-why-section
    .vc-why-grid + .vc-why-grid {
        margin-top: 18px !important;
    }

    .vc-why-section .vc-why-grid >
    .zpelem-col {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }}

/* =====================================================
   VIJAYCO — HEADER ABOVE HERO
   Desktop + Tablet + Mobile
   ===================================================== */

:root {

    --vc-border: #e5e7eb;
    --vc-muted: #64748b;
    --vc-white: #ffffff;
}

/* =====================================================
   1. TOP ANNOUNCEMENT STRIP
   ===================================================== */

.theme-header-topbar.vc-has-announcement {
    min-height: 38px !important;
    background: var(--vc-black) !important;
    color: var(--vc-white) !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Control the overall content width */
.theme-header-topbar.vc-has-announcement .zpcontainer {
    max-width: 1220px !important;
    min-height: 38px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Remove existing vertical separators */
.theme-header-topbar.vc-has-announcement * {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* Announcement typography */
.theme-header-topbar.vc-has-announcement p,
.theme-header-topbar.vc-has-announcement span,
.theme-header-topbar.vc-has-announcement a {
    color: rgba(255,255,255,.92) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
}

/* Keep currency visible and clean */
.theme-header-topbar .theme-currency-option,
.theme-header-topbar select {
    min-width: 62px !important;
    height: 28px !important;
    padding: 0 7px !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-size: 11px !important;
}

/* Social icons are unnecessary in this strip */
.theme-header-topbar .theme-socialicon-parent {
    display: none !important;
}

/* =====================================================
   TABLET: 768px–1024px
   ===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .theme-header-topbar.vc-has-announcement .zpcontainer {
        padding: 0 18px !important;
    }}

/* =====================================================
   VIJAYCO — TARGETED HEADER/HERO CORRECTIONS
   Order-dependent correction: keep this block in its current position
   ===================================================== */

:root {
    --vc-navy: #0f172a;
    --vc-blue: #294b76;
    --vc-soft-blue: #eef3f8;
    --vc-border: #e2e8f0;
}

/* =====================================================
   2. REMOVE DOUBLE LINE FROM VALUED CUSTOMERS
   All devices
   ===================================================== */

/* Remove separate Zoho divider */
.vc-customers-section hr,
.vc-customers-section .zpdivider,
.vc-customers-section .zp-divider,
.vc-customers-section [class*="divider"] {
    display: none !important;
}

/* =====================================================
   3. MOBILE LOGO AND HEADER ICONS
   ===================================================== */

@media (max-width: 767px) {

    /* =================================================
       4. MOBILE HERO IMAGE/TEXT GAP
       ================================================= */

    .banner {
        min-height: auto !important;
        
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        
        background-position: center center !important;
    }

    .banner .zprow {
        
        flex-direction: column !important;

    }

    /* Remove spacing created by Zoho columns */
    .banner .zpelem-col {
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Text area */
    .banner .zpelem-col:first-child {
        padding: 28px 20px 24px !important;
    }

    /* Image/media area */
    .banner .zpelem-col:last-child {
        padding: 0 !important;
        margin: 0 !important;
    }

    .banner img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
    }

    /* Remove element-level gaps */
    .banner .zpimage,
    .banner .zpimage-container,
    .banner [class*="image-container"] {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .banner h1,
    .banner h2 {
        margin-top: 6px !important;
        margin-bottom: 13px !important;
        font-size: clamp(34px, 10vw, 45px) !important;
        line-height: 1.05 !important;
        
    }

    .banner p {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        
        line-height: 1.6 !important;
    }}

/* Very small phones */
@media (max-width: 390px) {

    .banner .zpelem-col:first-child {
        padding: 24px 17px 20px !important;
    }}

/* Remove manually added Zoho dividers */
.vc-customers-section hr,
.vc-customers-section .zpdivider,
.vc-customers-section .zp-divider,
.vc-customers-section .zpelem-divider,
.vc-customers-section [class*="divider"] {
    display: none !important;
}

/* =====================================================
   2. MOBILE HERO — REMOVE EMPTY COLUMN AND GAP
   ===================================================== */

@media (max-width: 767px) {

    .banner {
        
        display: block !important;

        min-height: 510px !important;
        height: auto !important;

        background-position: 64% center !important;
    }

    .banner .zpcontainer {
        display: block !important;

        min-height: 510px !important;

    }

    /*
     * Important correction:
     * Do not vertically stack both Zoho columns.
     */
    .banner .zprow {

        min-height: 510px !important;

        row-gap: 0 !important;
        column-gap: 0 !important;
    }

    /* Text column */
    .banner .zprow > .zpelem-col:first-child {
        display: block !important;

        padding: 32px 20px 30px !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.98) 0%,
                rgba(255,255,255,.94) 58%,
                rgba(255,255,255,.40) 82%,
                rgba(255,255,255,0) 100%
            ) !important;
    }

    /*
     * The image is already applied to .banner.
     * Hide the empty right-hand desktop column on mobile.
     */
    .banner .zprow > .zpelem-col:last-child:not(:first-child) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Remove spacing from internal elements */
    .banner .zpelement,
    .banner .zpheading,
    .banner .zptext,
    .banner .zpbutton,
    .banner [class*="heading"],
    .banner [class*="text"] {
        margin-top: 0 !important;
    }

    /* Small upper label */
    .banner h4,
    .banner h5,
    .banner h6 {
        margin: 0 0 9px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        letter-spacing: .11em !important;
    }

    /* Main hero title */
    .banner h1,
    .banner h2 {
        max-width: 335px !important;
        margin: 0 0 14px !important;

        color: #0f172a !important;
        font-size: clamp(35px, 10vw, 44px) !important;

    }

    /* Description */
    .banner p {
        max-width: 330px !important;
        margin: 0 0 19px !important;

        color: #334155 !important;
        font-size: 13px !important;
        
    }}

/* Smaller mobile screens */
@media (max-width: 390px) {

    .banner,
    .banner .zpcontainer,
    .banner .zprow {
        min-height: 475px !important;
    }

    .banner {
        background-position: 61% center !important;
    }

    .banner .zprow > .zpelem-col:first-child {
        padding: 27px 17px 25px !important;
    }

    .banner h1,
    .banner h2 {
        max-width: 295px !important;
        font-size: 35px !important;
    }

    .banner p {
        max-width: 285px !important;
        font-size: 12px !important;
    }}

/* =====================================================
   VIJAYCO — FINAL TARGETED MOBILE CORRECTIONS
   Paste at the END of all existing CSS
   ===================================================== */

:root {
    --vc-heading: #0f172a;
    --vc-yellow: #f4b400;
    --vc-black: #101010;
    --vc-border: #dbe2ea;
}

/* =====================================================
   1. REMOVE ALL OLD HEADING LINES
   Product + Valued Customers
   ===================================================== */

.vc-products-header,
.vc-products-header h1,
.vc-products-header h2,
.vc-products-header h3,
.vc-products-header .zpheading {
    border: 0 !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Remove all old pseudo-element lines */
.vc-products-header::before,
.vc-products-header::after,
.vc-products-header h1::before,
.vc-products-header h1::after,
.vc-products-header h2::before,
.vc-products-header h2::after,
.vc-products-header h3::before,
.vc-products-header h3::after,
.vc-products-header .zpheading::before,
.vc-products-header .zpheading::after {
    content: none !important;
    display: none !important;
}

/* Remove manually inserted divider elements */
.vc-products-section hr,
.vc-products-section .zpdivider,
.vc-products-section .zp-divider,
.vc-products-section [class*="divider"],

.vc-customers-section hr,
.vc-customers-section .zpdivider,
.vc-customers-section .zp-divider,
.vc-customers-section [class*="divider"] {
    display: none !important;
}

/* =====================================================
   2. ONE YELLOW LINE — PRODUCT HEADING
   ===================================================== */

.vc-products-header h1,
.vc-products-header h2,
.vc-products-header h3,
.vc-products-header .zpheading {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 12px !important;

    color: var(--vc-heading) !important;
    text-align: left !important;
}

/* Create exactly one yellow line */
.vc-products-header h1::after,
.vc-products-header h2::after,
.vc-products-header h3::after,
.vc-products-header .zpheading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 47px !important;
    height: 3px !important;

    border: 0 !important;
    border-radius: 10px !important;
    background: var(--vc-yellow) !important;
    transform: none !important;
}

/* =====================================================
   4. MOBILE PRODUCT HEADING ALIGNMENT
   ===================================================== */

@media (max-width: 767px) {

    .vc-products-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .vc-products-header {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;

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

        text-align: left !important;
    }

    .vc-products-header h1,
    .vc-products-header h2,
    .vc-products-header h3,
    .vc-products-header .zpheading {
        flex: 1 1 auto !important;
        max-width: calc(100% - 85px) !important;

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

        font-size: 23px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.025em !important;
        text-align: left !important;
    }

    /* Keep View All on the right */
    .vc-products-header a,
    .vc-products-header button {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 9px 12px !important;

        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        color: var(--vc-heading) !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* Remove excess description spacing */
    .vc-products-section .subtext,
.vc-products-section p:first-of-type {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }}

/* =====================================================
   5. MOBILE HERO — CORRECT LAYOUT AND REMOVE GAP
   ===================================================== */

@media (max-width: 767px) {

    /*
     * Reset the previous 510px fixed-height rules.
     * The section will now use a more natural mobile height.
     */
    .banner,
    .banner .zpcontainer,
    .banner .zprow {
        height: auto !important;
        min-height: 430px !important;
        max-height: none !important;
    }

    .banner {
        position: relative !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: 65% center !important;
    }

    .banner .zpcontainer {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner .zprow {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Hero text column */
    .banner .zprow > .zpelem-col:first-child {
        position: relative !important;
        z-index: 2 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 430px !important;
        flex: 0 0 100% !important;

        margin: 0 !important;
        padding: 30px 19px 28px !important;

        background: linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.93) 56%,
            rgba(255,255,255,.50) 76%,
            rgba(255,255,255,.05) 100%
        ) !important;
    }

    /*
     * The hero image is the banner background.
     * Therefore, the empty desktop image column must not
     * appear underneath the text on mobile.
     */
    .banner .zprow > .zpelem-col:nth-child(2) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .banner h1,
    .banner h2 {
        max-width: 315px !important;

        margin: 7px 0 13px !important;
        padding: 0 !important;

        font-size: clamp(34px, 9.5vw, 42px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
    }

    .banner p {
        max-width: 310px !important;

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

        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .banner .zpbutton,
    .banner a[class*="button"],
    .banner button {
        margin-top: 0 !important;
    }

    /* Remove spacing after the hero */
    .banner + section,
    .banner + div,
    .banner + .zpsection {
        margin-top: 0 !important;
    }}

/* Smaller phones */
@media (max-width: 390px) {

    .banner,
    .banner .zpcontainer,
    .banner .zprow,
    .banner .zprow > .zpelem-col:first-child {
        min-height: 405px !important;
    }

    .banner {
        background-position: 62% center !important;
    }

    .banner .zprow > .zpelem-col:first-child {
        padding: 26px 16px 24px !important;
    }

    .banner h1,
    .banner h2 {
        max-width: 285px !important;
        font-size: 34px !important;
    }

    .banner p {
        max-width: 275px !important;
        font-size: 11px !important;
    }}

/* =====================================================
   6. MOBILE EYE — SAME BEHAVIOUR AS DESKTOP
   ===================================================== */

/* Closed eye is the normal state on every device */
.vc-product-eye .vc-eye-closed {
    display: block !important;
    opacity: 1 !important;
}

.vc-product-eye .vc-eye-open {
    display: none !important;
    opacity: 0 !important;
}

/* Desktop: open eye when product/eye is hovered */
.theme-prod-box:hover .vc-product-eye .vc-eye-closed,
.vc-product-eye:hover .vc-eye-closed {
    display: none !important;
    opacity: 0 !important;
}

.theme-prod-box:hover .vc-product-eye .vc-eye-open,
.vc-product-eye:hover .vc-eye-open {
    display: block !important;
    opacity: 1 !important;
}

/* Mobile/tablet: open only while tapped or focused */
.vc-product-eye:active .vc-eye-closed,
.vc-product-eye:focus .vc-eye-closed,
.vc-product-eye:focus-visible .vc-eye-closed {
    display: none !important;
    opacity: 0 !important;
}

.vc-product-eye:active .vc-eye-open,
.vc-product-eye:focus .vc-eye-open,
.vc-product-eye:focus-visible .vc-eye-open {
    display: block !important;
    opacity: 1 !important;
}

/* Eye-box appearance stays identical */
.vc-product-eye {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    border: 1px solid var(--vc-black) !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: var(--vc-black) !important;
    cursor: pointer !important;
}

/* =====================================================
   SHOP BY WIDTH — TABLET ONLY
   768px to 1023px
   ===================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* Keep the complete section properly centred */
    .vc-width-section > .zpcontainer-fluid {
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /*
       Apply the grid to the actual card container.
       Layout: 3 cards + 3 cards + centred final card.
    */
    .vc-width-section .vc-width-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset the incorrect narrow column positioning */
    .vc-width-section
        .vc-width-grid
        > .vc-width-card,
    .vc-width-section
        .vc-width-grid
        > .vc-width-card:nth-child(5),
    .vc-width-section
        .vc-width-grid
        > .vc-width-card:nth-last-of-type(3),
    .vc-width-section
        .vc-width-grid
        > .vc-width-card:nth-last-of-type(2) {
        grid-column: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 220px !important;

        margin: 0 !important;
        padding: 18px 12px 16px !important;
    }

    /* Centre the seventh card */
    .vc-width-section
        .vc-width-grid
        > .vc-width-card:last-child {
        grid-column: 2 !important;
        justify-self: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /* Proper product-roll image size */
    .vc-width-section
        .vc-width-card
        .zpimage-data-ref {
        width: 120px !important;
        height: 120px !important;

        margin: 0 auto 12px !important;
        padding: 8px !important;
    }

    .vc-width-section
        .vc-width-card
        .zpimage-data-ref
        img.zpimage,
    .vc-width-section
        .vc-width-card
        img {
        width: 100% !important;
        max-width: 104px !important;
        height: 104px !important;

        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Prevent card names from breaking letter by letter */
    .vc-width-section .vc-width-card .zpimage-text,
    .vc-width-section .vc-width-card .zpimage-text p,
    .vc-width-section .vc-width-card .zpheading,
    .vc-width-section .vc-width-card h3,
    .vc-width-section .vc-width-card h4 {
        width: 100% !important;
        min-width: 0 !important;

        color: #0f172a !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;

        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }}

/* =====================================================
   VALUED CUSTOMERS — FINAL UNIFORM HEADING
   Class: vc-valued-heading-final
   ===================================================== */

/* Heading component */
.vc-customers-section .vc-valued-heading-final {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: auto !important;

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

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    text-align: left !important;
}

/* Remove decorations from the component */
.vc-customers-section .vc-valued-heading-final::before,
.vc-customers-section .vc-valued-heading-final::after {
    content: none !important;
    display: none !important;
}

/* Reset every heading inside the component */
.vc-customers-section .vc-valued-heading-final h1,
.vc-customers-section .vc-valued-heading-final h2,
.vc-customers-section .vc-valued-heading-final h3 {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove lines from every heading first */
.vc-customers-section .vc-valued-heading-final h1::before,
.vc-customers-section .vc-valued-heading-final h1::after,
.vc-customers-section .vc-valued-heading-final h2::before,
.vc-customers-section .vc-valued-heading-final h2::after,
.vc-customers-section .vc-valued-heading-final h3::before,
.vc-customers-section .vc-valued-heading-final h3::after {
    content: none !important;
    display: none !important;
}

/* Style only Zoho's real heading */
.vc-customers-section
    .vc-valued-heading-final
    > h2.zpheading {
    display: inline-block !important;
    position: relative !important;

    width: auto !important;
    height: auto !important;

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

    color: #0f172a !important;
    background: transparent !important;

    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Add one short yellow line only */
.vc-customers-section
    .vc-valued-heading-final
    > h2.zpheading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 48px !important;
    height: 3px !important;

    margin: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #ffc121 !important;
}

/* Defensive reset for accidentally nested headings */
.vc-customers-section
    .vc-valued-heading-final
    > h2.zpheading
    h1,
.vc-customers-section
    .vc-valued-heading-final
    > h2.zpheading
    h2,
.vc-customers-section
    .vc-valued-heading-final
    > h2.zpheading
    h3 {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font: inherit !important;

    border: 0 !important;
    background: transparent !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .vc-customers-section
        .vc-valued-heading-final
        > h2.zpheading {
        font-size: 28px !important;
    }}

/* Mobile */
@media (max-width: 767px) {
    .vc-customers-section .vc-valued-heading-final {
        margin-bottom: 22px !important;
    }

    .vc-customers-section
        .vc-valued-heading-final
        > h2.zpheading {
        padding-bottom: 12px !important;
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .vc-customers-section
        .vc-valued-heading-final
        > h2.zpheading::after {
        width: 42px !important;
    }}

/* =====================================================
   CATEGORY HEADER — ONLY REMOVE HEADING
   Keep the existing Sort By control unchanged
===================================================== */

/* Hide only category heading */

/* Keep sufficient space for Sort By */
#main-content >
.theme-section[data-category-style-02] {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Compact header container */
#main-content >
.theme-section[data-category-style-02] >
.zpcontainer {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px clamp(20px, 7.5vw, 100px) !important;
}

/* Keep Sort By properly aligned on the right */
#main-content
.theme-section[data-category-style-02]
.zprow {
  display: flex !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Hide the empty heading column */
#main-content
.theme-section[data-category-style-02]
.zprow > .zpcol-md-6:first-child {
  display: none !important;
}

/* Sort control column */
#main-content
.theme-section[data-category-style-02]
.theme-filter-sortby-container {
  flex: 0 1 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 44px !important;
  margin-left: auto !important;
  padding: 0 !important;
}

/* Keep the product section close to Sort By */
#main-content > .theme-collection-section {
  padding-top: 12px !important;
}

/* =====================================================
   CATEGORY PAGE — REMOVE HEADING ONLY
===================================================== */

/* Hide only category heading */
#main-content
.theme-section[data-category-style-02]
.theme-category-name-description {
  display: none !important;
}

/* Keep desktop Sort By properly positioned */
@media (min-width: 1024px) {
  #main-content >
  .theme-section[data-category-style-02] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-content >
  .theme-section[data-category-style-02] >
  .zpcontainer {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 100px !important;
  }

  #main-content
  .theme-section[data-category-style-02]
  .zprow {
    display: flex !important;
    height: auto !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  #main-content
  .theme-section[data-category-style-02]
  .zprow > .zpcol-md-6:first-child {
    display: none !important;
  }

  #main-content
  .theme-section[data-category-style-02]
  .theme-filter-sortby-container {
    flex: 0 1 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-height: 44px !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  #main-content > .theme-collection-section {
    padding-top: 12px !important;
  }}

/* Tablet and mobile already use bottom Filters/Sort toolbar */
@media (max-width: 1023px) {
  #main-content >
  .theme-section[data-category-style-02] {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #main-content >
  .theme-section[data-category-style-02] >
  .zpcontainer,
  #main-content
  .theme-section[data-category-style-02]
  .zprow {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #main-content > .theme-collection-section {
    padding-top: 10px !important;
  }}
/* =====================================================
   PRODUCT DETAIL PAGE — TITLE AND IMAGE ALIGNMENT
===================================================== */

/* Correct product-page heading */
.theme-content-container.theme-product-details-style-06
.theme-product-name h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #07152f !important;
  font-family: Poppins, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Correct short description readability */
.theme-content-container.theme-product-details-style-06
.theme-product-short-description {
  margin-top: 12px !important;
  color: #465366 !important;
  font-family: Poppins, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* =====================================================
   PRODUCT PAGE — TABLET
===================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Reduce breadcrumb space */
  .theme-product-details-style-06
  .theme-breadcrumb-container {
    padding-bottom: 18px !important;
  }

  /* Stack gallery above product information */
  .theme-product-details-style-06
  .theme-product-detail-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
  }

  /* Gallery wrapper */
  .theme-product-details-style-06
  .theme-product-detail-image-container {
    position: static !important;
    display: grid !important;
    grid-template-columns: 80px minmax(0, 560px) !important;
    column-gap: 18px !important;
    justify-content: center !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 700px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Thumbnail column */
  .theme-product-details-style-06
  .theme-product-detail-thumbnail-container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 80px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-thumbnail {
    width: 74px !important;
    height: 74px !important;
    margin: 0 0 10px !important;
    border-radius: 8px !important;
  }

  /* Main image */
  .theme-product-details-style-06
  .theme-product-detail-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-image-inner {
    width: 100% !important;
    height: 100% !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-image-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Product information below gallery */
  .theme-product-details-style-06
  .theme-product-detail-varients-container {
    position: static !important;
    width: 100% !important;
    max-width: 658px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .theme-content-container.theme-product-details-style-06
  .theme-product-name h1 {
    font-size: 22px !important;
  }}

/* =====================================================
   PRODUCT PAGE — MOBILE
===================================================== */

@media (max-width: 767px) {
  .theme-product-details-style-06
  .theme-breadcrumb-container {
    display: none !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-image-container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-image-inner,
  .theme-product-details-style-06
  .theme-product-detail-image-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Horizontal thumbnails */
  .theme-product-details-style-06
  .theme-product-detail-thumbnail-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    gap: 8px !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-thumbnail {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
  }

  .theme-product-details-style-06
  .theme-product-detail-varients-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  .theme-content-container.theme-product-details-style-06
  .theme-product-name h1 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }}

/* =====================================================
   VIJAYCO — NAVIGATION MENU ICONS
===================================================== */

/* Icon and text alignment */
.theme-menu-name[data-theme-menu-name="Home"],
.theme-menu-name[data-theme-menu-name="Strapping"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Common icon styling */
.theme-menu-name[data-theme-menu-name="Home"]::before,
.theme-menu-name[data-theme-menu-name="Strapping"]::before {
  content: "";
  display: inline-block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Home icon */
.theme-menu-name[data-theme-menu-name="Home"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11L12 3l9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11L12 3l9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

/* Strapping/package icon */
.theme-menu-name[data-theme-menu-name="Strapping"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M10 5v14'/%3E%3Cpath d='M14 5v14'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M10 5v14'/%3E%3Cpath d='M14 5v14'/%3E%3C/svg%3E");
}

/* Slightly larger icons inside mobile menu */
@media (max-width: 767px) {
  .theme-menu-name[data-theme-menu-name="Home"]::before,
  .theme-menu-name[data-theme-menu-name="Strapping"]::before {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }}

/* =====================================================
   SHOP BY WIDTH — UNIFORM BACKGROUND
===================================================== */

.vc-width-section {
  background-color: #f7f9fc !important;
  background-image: none !important;
}

/* Prevent decorative layers from adding another colour */
.vc-width-section::before,
.vc-width-section::after {
  background-image: none !important;
}

/* Keep cards consistently white */
.vc-width-section .vc-width-card {
  background: #ffffff !important;
  background-image: none !important;
}

/* =====================================================================
   REMOVAL RECORD - NO EXECUTABLE CSS BELOW

   Classification: high-confidence unused on the checked public storefront.
   Reason: required custom class absent from all 22 retrieved page sources,
   retrieved inline/external script references, and sampled browser DOMs.
   This is evidence for the checked scope, not proof about unlinked pages.

   Removed required classes:
   .vc-customers-title
   .vc-main-header
   .vc-main-nav
   .vc-pet-card
   .vc-pp-card
   .vc-products-description
   .vc-promo-button
   .vc-promo-carousel
   .vc-promo-carousel-column
   .vc-promo-content
   .vc-promo-description
   .vc-promo-eyebrow
   .vc-promo-roll
   .vc-promo-row
   .vc-promo-section
   .vc-promo-slide
   .vc-promo-slide-row
   .vc-promo-title
   .vc-solution-row
   .vc-stat-label
   .vc-stat-number
   .vc-top-strip
   .vc-why-row

   Removed selector branches (xN = occurrences across source/media blocks):
   .vc-solution-row [x3]
   .vc-solution-row > *
   .vc-pp-card [x4]
   .vc-pet-card [x4]
   .vc-pp-card img
   .vc-pet-card img
   .vc-pp-card:hover [x2]
   .vc-pet-card:hover [x2]
   .vc-pp-card:hover img
   .vc-pet-card:hover img
   .vc-promo-section [x6]
   .vc-promo-section *
   .vc-promo-section *::before
   .vc-promo-section *::after
   .vc-promo-section > .zpcontainer [x2]
   .vc-promo-section .vc-promo-row [x5]
   .vc-promo-section .vc-promo-row::before
   .vc-promo-section .vc-promo-row::after
   .vc-promo-section .vc-promo-content [x6]
   .vc-promo-section .vc-promo-carousel-column [x6]
   .vc-promo-section .vc-promo-content > *
   .vc-promo-section .vc-promo-eyebrow [x3]
   .vc-promo-section .vc-promo-title [x5]
   .vc-promo-section .vc-promo-description [x4]
   .vc-promo-section .vc-promo-button
   .vc-promo-section .vc-promo-eyebrow :is( p, span, h2, h3, h4, .zpheading ) [x2]
   .vc-promo-section .vc-promo-title :is( h1, h2, h3, span, .zpheading ) [x4]
   .vc-promo-section .vc-promo-description :is(p, span) [x3]
   .vc-promo-section .vc-promo-button:not(a):not(button)
   .vc-promo-section :is( a.vc-promo-button, button.vc-promo-button, .vc-promo-button a, .vc-promo-button button )
   .vc-promo-section .vc-promo-button a:focus-visible
   .vc-promo-section a.vc-promo-button:focus-visible
   .vc-promo-section .vc-promo-carousel
   .vc-promo-section .vc-promo-slide
   .vc-promo-section .vc-promo-slide-row [x3]
   .vc-promo-section .vc-promo-slide-row > *
   .vc-promo-section .vc-promo-roll
   .vc-promo-section .vc-promo-roll img [x2]
   .vc-promo-section img.vc-promo-roll [x2]
   .vc-promo-section > .zpcontainer-fluid
   .vc-promo-section .vc-promo-carousel .zpcarousel-arrows-container
   .vc-promo-section .vc-promo-carousel .zpcarousel-controller-container
   .vc-promo-section .vc-promo-carousel .zpcarousel-content-inner
   .vc-promo-section .vc-promo-slide-row > .zpelem-col
   .vc-promo-section .vc-promo-roll .zpimage-container
   .vc-promo-section .vc-promo-roll figure
   .vc-promo-section .vc-promo-title br [x2]
   .vc-promo-section .vc-promo-description br [x2]
   .vc-customers-section .vc-customers-title [x4]
   .vc-customers-section .vc-customers-title .zpheading [x9]
   .vc-customers-section .vc-customers-title h2 [x6]
   .vc-customers-section .vc-customers-title::after [x3]
   .vc-customers-section .vc-customers-title .zpheading::before [x3]
   .vc-customers-section .vc-customers-title .zpheading::after [x5]
   .vc-customers-section .vc-customers-title h2::before [x2]
   .vc-customers-section .vc-customers-title h2::after [x3]
   .vc-why-section .vc-why-row [x3]
   .vc-why-section .vc-why-row:last-child
   .vc-why-section .vc-why-row::before
   .vc-why-section .vc-why-row::after
   .vc-why-section .vc-why-row > .zpelem-col
   .vc-why-section .vc-why-row .zpelem-imageheadingtext [x3]
   .vc-why-section .vc-why-row .zpelem-imageheadingtext::before [x2]
   .vc-why-section .vc-why-row .zpimageheadingtext-container [x3]
   .vc-why-section .vc-why-row .zpimageheadingtext-container > figure [x2]
   .vc-why-section .vc-why-row .zpimageheadingtext-container > figure .zpimage-anchor [x2]
   .vc-why-section .vc-why-row .zpimageheadingtext-container > figure img.zpimage [x2]
   .vc-why-section .vc-why-row .zpimage-headingtext-container
   .vc-why-section .vc-why-row .zpimage-heading [x3]
   .vc-why-section .vc-why-row .zpimage-heading * [x3]
   .vc-why-section .vc-why-row .zpimage-text [x3]
   .vc-why-section .vc-why-row .zpimage-text * [x2]
   .vc-why-section .vc-why-row .zpimage-text p
   .vc-why-section .vc-why-row .zpimage-heading p
   .vc-why-section .vc-why-row .zpimage-text h3:empty
   .vc-why-section .vc-why-row .zpelem-imageheadingtext:hover
   .vc-stats-section .vc-stat-number [x3]
   .vc-stats-section .vc-stat-number::after [x2]
   .vc-stats-section .vc-stat-label [x3]
   .vc-customers-title::before [x5]
   .vc-customers-title::after [x5]
   .vc-customers-title .zpheading::before [x3]
   .vc-customers-title .zpheading [x5]
   .vc-customers-title .zpheading::after [x5]
   .vc-top-strip [x2]
   .vc-top-strip .zpcontainer [x3]
   .vc-top-strip .zprow [x3]
   .vc-top-strip .zpelem-col [x2]
   .vc-top-strip .zpelem-col + .zpelem-col
   .vc-top-strip p [x3]
   .vc-top-strip span [x3]
   .vc-top-strip a [x3]
   .vc-main-header [x4]
   .vc-main-header .zpcontainer [x5]
   .vc-main-header .zprow [x4]
   .vc-main-header img [x5]
   .vc-main-header input[type="search"] [x3]
   .vc-main-header input[type="text"] [x3]
   .vc-main-header input[type="search"]:focus
   .vc-main-header input[type="text"]:focus
   .vc-main-header a
   .vc-main-header button
   .vc-main-header a:hover
   .vc-main-header button:hover
   .vc-main-nav [x5]
   .vc-main-nav .zpcontainer [x4]
   .vc-main-nav .zprow [x5]
   .vc-main-nav a [x4]
   .vc-main-nav a::after [x2]
   .vc-main-nav a:hover::after
   .vc-main-nav a.active::after
   .vc-main-nav + .banner
   .vc-main-nav + section
   .vc-main-nav + div
   .vc-top-strip .zpelem-col:nth-child(2)
   .vc-main-nav ul [x2]
   .vc-main-nav a::before
   .vc-main-nav a:hover
   .vc-main-nav a.active
   .vc-main-nav li.active > a
   .vc-main-nav .theme-menu-selected > a
   .vc-main-header .zpelem-col:first-child
   .vc-main-header .theme-search-and-mini-cart-group
   .vc-main-header .theme-header-icon-wrapper
   .vc-main-header [class*="icon-group"]
   .vc-main-header .theme-search-icon [x2]
   .vc-main-header .theme-portal-login [x2]
   .vc-main-header .theme-mini-cart [x2]
   .vc-main-header .theme-cart-icon [x2]
   .vc-main-header svg
   .vc-customers-title [x6]
   .vc-customers-title h1 [x3]
   .vc-customers-title h2 [x3]
   .vc-customers-title h3 [x3]
   .vc-customers-title h1::before [x2]
   .vc-customers-title h1::after [x3]
   .vc-customers-title h2::before [x2]
   .vc-customers-title h2::after [x3]
   .vc-customers-title h3::before [x2]
   .vc-customers-title h3::after [x3]
   .vc-customers-title + hr
   .vc-customers-title + div:empty
   .vc-products-section .vc-products-description
   .vc-customers-title .zpheading-style-type1::before
   .vc-customers-title .zpheading-style-type1::after
   .vc-customers-section .vc-customers-title::before
   .vc-customers-section .vc-customers-title .zpheading-style-type1::before
   .vc-customers-section .vc-customers-title .zpheading-style-type1::after
   .vc-customers-section .vc-customers-title.zpheading [x3]
   .vc-customers-section .vc-customers-title h1 [x3]
   .vc-customers-section .vc-customers-title h3 [x3]
   .vc-customers-section .vc-customers-title:not(.zpheading)::before
   .vc-customers-section .vc-customers-title:not(.zpheading)::after
   .vc-customers-section .vc-customers-title.zpheading::before
   .vc-customers-section .vc-customers-title.zpheading::after [x2]
   .vc-customers-section .vc-customers-title h1::before
   .vc-customers-section .vc-customers-title h1::after [x2]
   .vc-customers-section .vc-customers-title h3::before
   .vc-customers-section .vc-customers-title h3::after [x2]

   Counts:
   selector branches removed: 356
   rule blocks removed: 196
   declarations removed: 820
   empty at rules removed: 11
   mixed selector lists trimmed: 16
   ===================================================================== */
#main-content .theme-product-page-breadcrumb {
padding-top: 8px;
padding-bottom: 4px;
}
#main-content [data-category-style-02] {
padding-top: 8px;
}


/* =====================================================
   FINAL FIX — VIEW ALL + MOBILE HERO
   Keep this at the very end of Custom CSS
===================================================== */


/* =====================================================
   1. VIEW ALL — TABLET AND MOBILE
===================================================== */

@media screen and (max-width: 1023px) {

    .vc-products-section .vc-products-header {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        column-gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 44px !important;

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

        overflow: visible !important;
    }

    .vc-products-section .vc-products-title {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .vc-products-section .vc-products-header
    .zpfilmstrip-viewall-button {
        position: relative !important;
        inset: auto !important;
        z-index: 5 !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        justify-self: end !important;
        align-self: start !important;

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

        transform: none !important;
        overflow: visible !important;
    }

    .vc-products-section .vc-products-header
    .zpfilmstrip-viewall-button .zpbutton,
    .vc-products-section .vc-products-header
    .zpfilmstrip-viewall-button a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 72px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 9px 13px !important;

        color: #0f172a !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;

        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .vc-products-section .theme-viewall-text {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #0f172a !important;
    }
}


/* =====================================================
   2. MOBILE HERO — IMAGE + VISIBLE TEXT, NO EMPTY SPACE
===================================================== */

@media screen and (max-width: 767px) {

    .banner,
    .banner.zpapply-height,
    .banner .zphero-slides,
    .banner .zphero-slide {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        overflow: hidden !important;
        transform: none !important;
    }

    /* Actual hero image */
    .banner .zphero-slide .zpslider-img,
    .banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"]
    .zpslider-img {
        position: relative !important;
        inset: auto !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;

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

        background-size: cover !important;
        background-position: 68% center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;

        transform: none !important;
    }

    /* Text area immediately after the image */
    .banner .zphero-slider-container {
        position: relative !important;
        inset: auto !important;
        z-index: 3 !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        background: #ffffff !important;
        transform: none !important;
    }

    .banner .zphero-slider-container > .zpcontainer {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner .zprow {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide all unused Zoho hero columns */
    .banner .zprow > .zpelem-col {
        display: none !important;
    }

    /* Show only the column containing hero text */
    .banner .zprow > .zpelem-col:first-of-type {
        position: relative !important;

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 22px 18px 25px !important;

        background: #ffffff !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* Force the hero content to remain visible */
    .banner .zprow > .zpelem-col:first-of-type
    .zpelement,
    .banner .zprow > .zpelem-col:first-of-type
    .zpelem-heading,
    .banner .zprow > .zpelem-col:first-of-type
    .zpelem-text,
    .banner .zprow > .zpelem-col:first-of-type
    .zpelem-button {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
    }

    .banner h1,
    .banner h2 {
        max-width: 100% !important;
        margin: 5px 0 12px !important;
        padding: 0 !important;

        color: #0f172a !important;
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.08 !important;
    }

    .banner p {
        max-width: 100% !important;
        margin: 0 0 17px !important;
        padding: 0 !important;

        color: #334155 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .banner .zpelem-button {
        width: auto !important;
        margin: 0 !important;
    }

    .banner .zpbutton,
    .banner .zpbutton-wrapper {
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 11px 16px !important;
    }
}


/* Smaller mobile screens */
@media screen and (max-width: 390px) {

    .banner .zphero-slide .zpslider-img,
    .banner [data-element-id="elm_zHfowXOPSRyof4s8Gm_Tyw"]
    .zpslider-img {
        height: 195px !important;
        min-height: 195px !important;
        background-position: 66% center !important;
    }

    .banner .zprow > .zpelem-col:first-of-type {
        padding: 20px 16px 23px !important;
    }
}