/************************* root CSS Start *************************/
 :root {
     --zwc-primary-color: #f3f7fa;
     --zwc-secondary-color: #f9f9f9;
     --zwc-blue-color: #0060b4;
     --zwc-boxshow-color: #8c8c8c2e;
     --zwc-black-color: #000;
     --zwc-white-color: #ffff;
     --zwc-gray-color: #f3f7fa;
     --zwc-border-color: #e7ebf0;
     --zwc-h1-text: 60px;
     --zwc-h2-text: 54px;
     --zwc-h3-text: 30px;
     --zwc-h4-text: 24px;
     --zwc-text-xl: 16px;
     --zwc-p-text: 16px;
     --zwc-sub-text: 18px;
     --zwc-sub-text-lh: 1.7;
     --zwc-sub-text-ls: -0.2px;
     --zwc-p-banner-txt: 22px;
     --zwc-prd-txt: clamp(16px, round(2.7vw, 1px), 20px);
     --zwc-prd-textall: clamp(15px, round(3.3vw, 1px), 18px);
     --bg-color: #f8f9fb;
     --primary-color: #010101;
     --secondary-color: #333;
     --highlight-color: #056cb8;
     --bg-color: #f8f9fb;
     --redclr: #f60014;
     --bg-blue-color: #0060b4;
     --zwc-h1-text-lh: 1.2;
     --zwc-h1-text-ls: -2.2px;
     --zwc-h2-text-lh: 1.2;
     --zwc-h2-text-ls: -1.2px;
     --zwc-h3-text-ls: -0.6px;
     --zwc-h3-text-lh: 1.4;
     --zwc-h4-text-ls: -0.4px;
     --zwc-h4-text-lh: 1.4;
     --zwc-p-text-ls: 0px;
     --zwc-p-text-lh: 1.5;
     --zwc-p-banner-txt-lh: 1.5;
     --zwc-p-banner-txt-ls: -0.3px;
 }

 /************************* root CSS End *************************/

 /************************* Resuse CSS Start *************************/
 .zwc-wrapper {
     color: var(--primary-color);
 }

 .zwc-wrapper h1 {
     font-size: var(--zwc-h1-text);
     font-family: var(--primaryfont-regular);
     margin-inline: auto;
     line-height: var(--zwc-h1-text-lh, 1.2);
     letter-spacing: var(--zwc-h1-text-ls, -2px);
     margin-block-end: 15px;
 }

 .zwc-wrapper h2 {
     font-size: var(--zwc-h2-text);
     font-family: var(--primaryfont-regular);
     line-height: var(--zwc-h2-text-lh, 1.2);
     letter-spacing: var(--zwc-h2-text-lss, -1.5px);
     /* margin-bottom: 50px; */
 }

 .zwc-wrapper h3 {
     font-size: var(--zwc-h3-text);
     font-family: var(--primaryfont-regular);
     margin-bottom: 5px;
     letter-spacing: var(--zwc-h3-text-ls, -0.5px);
     line-height: var(--zwc-h3-text-lh);
 }

 .zwc-wrapper h4 {
     font-size: var(--zwc-h4-text);
     font-family: var(--primaryfont-regular);
     color: var(--primary-color);
     letter-spacing: var(--zwc-h4-text-ls, 1.2);
     line-height: var(--zwc-h4-text-lh);
 }

 .zwc-wrapper p {
     font-size: var(--zwc-p-text);
     color: var(--secondary-color);
     letter-spacing: var(--zwc-p-text-ls, 0.5px);
     line-height: var(--zwc-p-text-lh, 1.4);
     text-wrap-style: pretty;
 }
.zwc-app-section {
    background: linear-gradient(180deg,#fff 0,#f8f9fb 10%);
}
 .zwc-search-sec {
     padding-block: 110px 50px;
     /* background: linear-gradient(180deg, #fff 0, #f8f9fb 10%); */
     position: relative;
     z-index: 2;
 }






 /************************* Resuse CSS End *************************/



 .zwc-product-sprite:before {
     background: url(/sites/zweb/images/zoho_general_pages/zh-mobile-app-icon-sprite2x.png) no-repeat;
     background-size: 1094px auto;
 }

 .zgh-i-finance:before {
     background-position: -414px -222px;
 }

 .zgh-i-warehouseoperations:before {
     background-position: -626px -222px;
 }

 .zgh-i-employeeportal:before {
     background-position: -439px -267px;
     --zp-i-w: 65px;
     background-size: 1358px auto;
     /* border-color: transparent; */
 }

 .zgh-i-retail:before {
     background-position: -466px -222px;
 }

 .zgh-i-beat:before {
     background-position: -520px -222px;
 }

 .zgh-i-cardscanner:before {
     background-position: -74px -268px;
     --zp-i-w: 65px;
     background-size: 1358px auto;
 }

 .zwc-product-item .zgh-i-cardscanner {
     border-width: 0px;
 }

 .zgh-i-crmAnalytics::before {
     background-position: -840px -109px;
 }

 .zgh-i-radarfordesk::before {
     background-position: -735px -110px;
 }

 .zgh-i-spatialdesigner::before {
     background-position: -892px -162px;
 }

 .zgh-i-invoicegenerator::before {
     background-position: -267px -110px;
 }

 .zgh-i-estimategenerator::before {
     background-position: -213px -110px;
 }

 .zgh-i-purchaseordergenerator::before {
     background-position: -372px -109px;
 }

 .zgh-i-inventorystocktracker::before {
     background-position: -790px -110px;
 }

 .zgh-i-barcodemanager::before {
     background-position: -630px -163px;
 }

 .zgh-i-expensegenerator::before {
     background-position: -295px -268px;
     --zp-i-w: 65px;
     background-size: 1358px auto;
 }

 .zgh-i-workerlytempworkers::before {
     background-position: -581px -110px;
 }

 .zgh-i-vikra::before {
     content: unset;
 }

 .zwc-product-item [class^="zgh-i-"].zgh-i-vikra {
     background-image: url(/sites/zweb/images/productlogos/vikra.svg);
     width: 112px;
     background-position: center;
     background-size: contain;
     height: 40px;
     content: '';
     background-repeat: no-repeat;
     display: block;
     border: unset;
 }

 .zgh-i-daybook::before {
     background-position: -840px -162px;
 }

 .zgh-i-peoplekiosk::before {
     background-position: -578px -161px;
 }

 .zgh-i-shiftskiosk::before {
     background-position: -369px -268px;
     --zp-i-w: 65px;
     background-size: 1358px auto;
 }

 .zgh-i-einvoiceqrreader::before {
     background-position: -682px -162px;
 }

 .zgh-i-workerly::before {
     background-position: -632px -110px;
 }

 .zgh-i-streams::before {
     background-position: -787px -7px;
 }

 .zgh-i-chartistic::before {
     background-position: -267px -59px;
 }

 .zgh-i-ziasearch::before {
     background-position: -1048px -60px;
 }

 .zgh-i-scanner::before {
    background-position: -148px -267px;
    background-size: 1358px auto;
    background-position: -85px -157px;
    /* --zp-i-w: 65px; */
    background-size: 800px auto;
 }

 .zwc-product-item[data-app-name="vikra"] .zwc-product-title {
     display: none;
 }

 .zgh-i-mailadmin::before {
     background-position: -788px -7px;
 }

 .zseacrh-product-results .zgh-i-scanner::before {
     --zp-i-w: 40px;
     background-size: 800px auto;
     background-position: -85px -156px;
 }

 /************************* Banner Section Css *************************/
 /* ============================================
   BANNER PLATFORM TABS + AUTOPLAY
   (Append to desktop-apps.css)
   ============================================ */

 /* Tab wrapper */
 .zwc-banner-tabs-wrap {
     display: flex;
     justify-content: center;
     margin-block: 35px 45px;
 }

 /* Tablist container */
 .zwc-banner-tabs {
     display: inline-flex;
     gap: 12px;
     padding: 5px;
     border-radius: 50px;
     /* background: rgba(255, 255, 255, 0.08); */
 }

 /* Tab button */
 .zwc-banner-tab {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 5px 12px 5px 8px;
     border: 1px solid #4653a2;
     border-radius: 50px;
     background: #35438fa6;
     color: rgba(255, 255, 255, 0.85);
     font-size: 16px;
     font-family: var(--primaryfont-regular);
     letter-spacing: 0.2px;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     line-height: 1;
     white-space: nowrap;
 }

 .zwc-banner-tab:hover {
     background: rgba(255, 255, 255, 0.12);
     border-color: rgba(255, 255, 255, 0.4);
 }

 /* Active tab */
 .zwc-banner-tab[aria-selected="true"] {
     background: rgba(255, 255, 255, 0.95);
     color: #1a1a2e;
     border-color: rgba(255, 255, 255, 0.95);
     /* font-family: var(--zf-secondary-medium); */
 }

 .zwc-banner-tab[aria-selected="true"]:hover {
     background: #fff;
 }

 /* Tab icons — CSS sprite from existing Zoho assets */
 .zwc-tab-icon {
     width: 18px;
     height: 18px;
     display: inline-block;
     flex-shrink: 0;
     background-image: url(/sites/zweb/images/commonroot/common-elements.svg);
     background-repeat: no-repeat;
     background-size: 530px auto;
     /* opacity: 0.7; */
     /* filter: brightness(0) invert(1); */
     scale: 0.9;
 }

 .zwc-banner-tab[aria-selected="true"] .zwc-tab-icon {
     opacity: 1;
     /* filter: none; */
 }

 /* Platform-specific icon positions */
 .zwc-tab-icon-windows {
     background-position: -394px 0;
 }

 .zwc-tab-icon-mac {
     background-position: -362px 0;
         filter: brightness(100);
 }
.zwc-banner-tab[aria-selected="true"] .zwc-tab-icon-mac {
    filter: brightness(0)
}
.zwc-filter-active {
    animation: transY .5s ease forwards
}

@keyframes transY {
    0% {
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}
.zwc-tab-icon-linux {
    background-position: center;
    background: url(/sites/zweb/images/zoho_general_pages/desktop-apps/linux-tux.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

 /* Focus ring — WCAG 2.4.7 */
 .zwc-banner-tab:focus-visible {
     outline: 2px solid #fed700;
     outline-offset: 3px;
 }

 /* Autoplay progress bar on active tab */
 .zwc-banner-tab[aria-selected="true"]::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     background: var(--bg-blue-color, #0060b4);
     width: 0%;
     animation: zwc-tab-progress var(--zwc-autoplay-duration, 5s) linear forwards;
     border-radius: 0 0 50px 50px;
     display: none;
 }

 /* Pause progress when autoplay is paused */
 .zwc-banner-tabs.zwc-autoplay-paused .zwc-banner-tab[aria-selected="true"]::after {
     animation-play-state: paused;
 }

 @keyframes zwc-tab-progress {
     from {
         width: 0%;
     }

     to {
         width: 100%;
     }
 }

 /* ============================================
   TAB PANELS
   ============================================ */

 .zwc-banner-panels {
     position: relative;
     max-width: 1100px;
     margin: 0 auto;
     overflow: hidden;
 }

 .zwc-banner-panel {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 0.5s ease, transform 0.5s ease;
     position: absolute;
     width: 100%;
     top: 0;
     left: 0;
     pointer-events: none;
 }

 .zwc-banner-panel.active {
     opacity: 1;
     transform: translateY(0);
     position: relative;
     pointer-events: auto;
     visibility: visible !important;
 }

 .zwc-banner-panel[hidden] {
     display: block;
     visibility: hidden;
     position: absolute;
 }

 .zwc-banner-panel .zwc-banner-img {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .zwc-banner-panel .zwc-banner-img img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 .zwc-hero-banner {
     padding-block-start: 70px;
     overflow: hidden;
     background-position: 0 0, center;
     background: transparent linear-gradient(359deg, #46ffb1 -100%, #212f7c 40%) 0 0 no-repeat padding-box;
 }

 .zwc-hero-banner:after {
     position: absolute;
     content: "";
     width: 100%;
     height: 400%;
     background: url(/sites/zweb/images/zoho_general_pages/desktop-apps/floral-pattern.png) repeat;
     inset: 0;
     opacity: .03;
     background-size: 350px;
     pointer-events: none;
     z-index: 0;
 }

 .zwc-hero-banner .content-wrap {
     max-width: 1000px;
     /* opacity: calc(1 - var(--scroll-top) / 900); */
     transition: .1s all;
     z-index: 1;
 }

 .zwc-hero-banner .zwc-text-content {
     text-align: center;
     color: var(--zwc-white-color);
     /* max-width: var(--hero-banner-width, 550px); */
     margin: 0 auto;
     margin-bottom: 65px;
 }

 .zwc-hero-banner .zwc-text-content::after,
 .zwc-access-section h2::before {
     position: absolute;
     content: "";
     width: 40px;
     height: 1.5px;
     background-color: #fed700;
     left: 50%;
     transform: translateX(-50%);
     /* z-index: -1; */
 }


 .zwc-hero-banner .zwc-text-content p {
     font-size: var(--zwc-p-banner-txt);
     line-height: var(--zwc-p-banner-txt-lh, 1.4);
     color: #ffffffdd;
     /* opacity: 0.9; */
     letter-spacing: var(--zwc-p-banner-txt-ls, -0.4px);
     max-width: 600px;
     margin-inline: auto;
     text-wrap-style: balance;
 }

 /* banner section images  */
 .zwc-banner-img-container {
     height: 480px;
     overflow: hidden;
 }

 .zwc-banner-img {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .zwc-banner-img span {
     transform: var(--zwc-image-position, translate(110%, 20px));
     transition: 1s all;
 }

 .zwc-mstore-mobile {
     --zwc-image-position: translate(-110%, 20px);
 }

 .zwc-android-mobile {
     --zwc-image-position: translate(110%, 20px);
 }

 .zwc-iphone-mobile {
     --zwc-image-position: translate(0%, 0px);
     position: relative;
     z-index: 2;
 }

 .zwc-banner-img.zwc-banner-animate .zwc-mstore-mobile {
     --zwc-image-position: translate(-40%, 20px);
 }

 .zwc-banner-img.zwc-banner-animate .zwc-android-mobile {
     --zwc-image-position: translate(40%, 20px);
 }



 .zwc-featured-section .content-wrap {
     max-width: 1100px;
     align-items: center;
     justify-content: space-evenly;
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     /* flex-wrap: wrap; */
 }

 .zwc-featured-section h2 {
     font-size: var(--zwc-h3-text);
     font-family: var(--primaryfont-regular);
     margin-bottom: 5px;
     letter-spacing: var(--zwc-h3-text-ls, -0.5px);
     line-height: var(--zwc-h3-text-lh);
     width: min(50%, 450px);
 }

 .zwc-featured-section-grid {
     display: flex;
     gap: 25px;
     font-size: 13px;
     text-align: center;
     flex-wrap: wrap;
     width: min(44%, 440px);
     justify-content: space-between;
 }

 .zwc-featured-section-grid span {
     position: relative;
     width: 48px;
     aspect-ratio: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 6px;
     background: var(--featured-icon-bg, #fff);
 }

 .zwc-featured-section-grid span::before {
     position: relative;
     filter: brightness(100);
     transform: scale(0.8);
 }

 .zwc-featured-section-grid .zgh-i-bigin {
     --featured-icon-bg: #0b9949;
 }

 .zwc-featured-section-grid .zgh-i-notebook {
     border: 1px solid #70707033;
 }

 .zwc-featured-section-grid .zgh-i-notebook::before {
     filter: unset;
 }

 .zwc-featured-section-grid .zgh-i-inventory {
     --featured-icon-bg: #dc1723;
 }

 .zwc-featured-section-grid .zgh-i-expense {
     --featured-icon-bg: #fd1230;
 }

 .zwc-featured-section-grid .zgh-i-invoice {
     --featured-icon-bg: #056bff;
 }

 .zwc-featured-section-grid li {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 6px;
 }

 .zwc-featured-section {
     padding: 60px 0;
     border-bottom: 1px solid #e6edf3;
background-color: #f7f9fd;
 }

 .zwc-featured-section-title a {
     color: #056cb8;
 }


 /* card section css */

 [class^="zwc-store-"],
 .zwc-platform-icon {
     width: 26px;
     height: 26px;
     display: inline-flex;
     border: 1px solid #e8e8e8;
     border-radius: 5px;
     padding: 3px;
     background-position: var(--apps-icon-position, 1px 4px);
     transition: border-color .4s;
     font-size: 0;
     /* flex-wrap: wrap; */
 }

 .zwc-platform-icon {
     border-color: transparent;
 }

 [class^="zwc-store-"]:after,
 .zwc-platform-icon:after {
     content: "";
     /* --apps-icon-position: -362px 0; */
     display: block;
     width: 100%;
     height: 100%;
     background-image: url(/sites/zweb/images/commonroot/common-elements.svg);
     background-size: 530px auto;
     background-position: var(--apps-icon-position, 1px 4px);
     scale: 0.9;
 }

 .zwc-store-mac:after,
 .zwc-icon-mac:after {
     --apps-icon-position: -362px 0;
     filter: brightness(0);
 }

 .zwc-store-windows,
 .zwc-icon-windows {
     --apps-icon-position: -394px 0;
 }

.zwc-store-linux:after, .zwc-icon-linux:after {
    --apps-icon-position: -411.2px 0;
    background: url(/sites/zweb/images/zoho_general_pages/desktop-apps/linux-tux.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

 .zwc-platform-filter-checkbox {
     margin: 0px;
 }

 [class^="zwc-store-"]:hover {
     border-color: #aaa;
 }
.zwc-wrapper .zwc-product-title {
    margin-bottom: 8px;
    font-size: var(--zwc-h4-text);
    font-family: var(--primaryfont-regular);
    color: var(--primary-color);
    letter-spacing: var(--zwc-h4-text-ls,1.2);
    line-height: var(--zwc-h4-text-lh)
}

 .zwc-product-item {
     width: calc(((100% - (var(--colum-gap, 0px) * (var(--colum-count, 1) - 1))) / var(--colum-count, 1)));
     padding: var(--card-padding, 40px 15px);
 }

 .zwc-wrapper .zwc-product-description {
     font-size: var(--zwc-p-text);
     line-height: var(--zwc-p-text-lh, 1.6);
     color: var(--secondary-color);
     color: #333;
     display: inline-block;
     /* min-height: 60px; */
     margin-block-end: var(--icon-top-gap, 25px);
 }

 .zwc-product-item [class^="zgh-i-"] {
     /* border: 1px solid #e1e1e1; */
     border-radius: 10px;
     /* width: 65px; */
     /* height: 65px; */
     display: flex;
     align-items: center;
     /* justify-content: center; */
     margin: var(--center-align, unset);
     transform-origin: center;
     font-size: 0;
     margin-block-end: var(--icon-bottom-gap, 25px);
     transform: scale(1);
 }

 .zwc-product-item [class^="zgh-i-"]:before {
     position: relative;
 }

 .zwc-product-apps-download {
     display: flex;
     justify-content: var(--app-icon-aligment);
     gap: var(--apps-icon-gap, 20px);
     flex-wrap: wrap;
 }











 .zwc-product-list-section {
     /* background: var(--bg-color); */
     position: relative;
 }

 .zwc-product-list-section .content-wrap {
     max-width: 1400px;
 }


 .zwc-wrapper p.zwc-category-subtext {
     width: min(100%, 860px);
     font-family: var(--zf-splfontserif-light);
     margin-bottom: 40px;
     font-size: var(--zwc-sub-text);
     letter-spacing: var(--zwc-sub-text-ls, 0.5px);
     line-height: var(--zwc-sub-text-lh, 1.4);
 }

 .zwc-product-list-section.active .zwc-product-list-categories {
     border-right: 1px solid #e7ebf0;
     background: linear-gradient(90deg, #f8f9fb 40%, #fff 100%);
     transition: opacity .5s ease;
 }

 .zwc-product-list-products {
     display: flex;
     flex-wrap: wrap;
     gap: var(--colum-gap);
     padding: 0 0 clamp(60px, 6.5vw, 80px) 0;
     --icon-top-gap: 25px;
     --colum-gap: 15px;
 }

 .zwc-mobile-category-toggle {
     display: none;
 }

 .zwc-product-list-grid {
     display: flex;
     /* gap: 20px; */
     flex-wrap: wrap;
 }

 .zwc-product-list-categories {
     width: 310px;
     margin-left: -4%;
 }

 .zwc-category-group li.active {
     color: var(--highlight-color);
     font-family: var(--zf-secondary-medium);
 }

 .zwc-platform-filter-label {
     display: flex;
     width: 100%;
     gap: 10px;
     /* border: unset; */
     /* background: transparent; */
 }

 .zwc-category-group li,
 .zwc-platform-filter-label {
     padding: 3px 8px 3px 0px;
     font-size: var(--zwc-font-15, 16px);
     letter-spacing: var(--zwc-font-15-ls, 0px);
     line-height: var(--zwc-font-15-lh, 1.6);
     cursor: pointer;
     color: var(--primary-color);
 }

 .zwc-category-group li:hover {
     color: var(--highlight-color);
 }

 .zwc-category-group-name,
 .zwc-filter-label {
     color: var(--primary-color);
     font-size: var(--zwc-text-xl);
     line-height: var(--zwc-text-xl-lh, 1.3);
     margin-bottom: 10px;
     font-family: var(--zf-secondary-medium);
     cursor: pointer;
     display: block;
     letter-spacing: 0.5px;
     text-transform: uppercase;
 }

 .zwc-category-group-name::before {
     content: "";
     width: 2px;
     height: 20px;
     background-color: var(--redclr);
     position: absolute;
     left: -15px;
     top: -3px;
     transition: transform .3s ease;
     transform: scale(0);
     transform-origin: top;
 }

 .zwc-product-list-group {
     width: calc(100% - 320px);
     padding-block-start: 50px;
     /* max-width: 1080px; */
     margin-inline-start: auto;
     max-width: 1140px;
 }

 .zwc-product-item[data-app-name] {
     --card-padding: 30px 35px 40px;
     background: var(--zwc-white-color);
     border: 1px solid var(--zwc-border-color);
     transition: all .5s ease;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     position: relative;
     --colum-count: 3;
     --apps-icon-gap: 10px;
 }

 .zwc-product-item [class^="zwc-tag"] {
     position: absolute;
     top: 0;
     right: 0;
     background: var(--zwc-tag-bg, #0c8821);
     color: var(--zwc-white-color);
     text-transform: uppercase;
     font-size: 10px;
     padding: 2px 7px 1px;
     border-radius: 0 2px 0 0;
     font-family: var(--zf-secondary-medium);
     letter-spacing: 0.5px;
 }

 .zwc-product-item .zwc-tag-free {
     --zwc-tag-bg: #e22f22;
 }


 .zwc-product-list-group .zwc-product-item:hover {
     border: 1px solid #aeb8c2;
     box-shadow: 0 8px 0 rgba(0, 0, 0, 0.03);
     transform: translateY(-5px);
 }

 .zwc-product-list-product-item h3 {
     margin-bottom: 5px;
 }

 .zwc-product-list-group .zwc-product-apps-download {
     margin-block-start: auto;
 }

 .zwc-product-list-categories-section {
     padding: 40px 15px 62px 20px;
 }

 .zwc-platform-filter-section {
     padding: 40px 15px 0px 20px;
 }

 .zwc-product-list-categories-inner {
     position: sticky;
     top: 74px;
 }

 /* no need this css only for WCAG */
 .zwc-product-list-categories-section:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #f8f9fb 40%, #fff 100%);
     opacity: 0;
     transition: opacity .5s ease;
     pointer-events: none;
 }




 .zwc-arrow-icon::before {
     position: absolute;
     right: 10px;
     top: calc(50%);
     content: "";
     display: inline-block;
     width: 8px;
     height: 8px;
     opacity: 0;
     border-right: 1.5px solid var(--highlight-color);
     border-top: 1.5px solid var(--highlight-color);
     transform: rotate(47deg) translateX(-50%);
     transition: all .3s ease
 }

 li.zwc-arrow-icon.active::before {

     opacity: 1;
     transition: all .4s ease;
     right: 0;
 }

 .zwc-arrow-icon:hover::before {
     right: -5px;
 }

 .zwc-arrow-icon {
     position: relative;
 }



 .zwc-search-product-inner {
     width: 90%;
     max-width: 720px;
     margin: 0 auto;
     position: relative;
 }

 .zwc-search-product h2 {
     margin-block-end: 50px;
 }

 .zwc-related-html {
     width: 100%;
 }

 .zwc-related-html .zwc-related-title {
     background: var(--bg-color);

 }

 .zwc-related-html .zwc-related-title p {
     background: var(--bg-color);
     padding: 0 12px;
     display: inline-block;
     margin: 0;
     font-size: 18px;
     position: relative;
     letter-spacing: 0;
     text-align: center;
     width: fit-content;
     margin-inline: auto
 }

 .zwc-related-html .zwc-related-title .zwc-related-content:before {
     content: "" !important;
     position: absolute;
     width: 100%;
     height: 1px;
     background: #e7ebf1;
     top: 50%;
     left: 0;
     right: 0
 }

 .zwc-related-html .zwc-related-title a {
     font-family: var(--zf-secondary-medium);
     color: var(--zgh-highlight-color)
 }


 .zwc-search-sec h2 {
     text-align: center;
     max-width: min(90%, 600px);
     margin-inline: auto;
     text-wrap-style: pretty;
 }




 /* footer  */
 .zwc-btn:after {
     content: "";
     width: 13px;
     height: 13px;
     position: relative;
     background: var(--bg-sprite) left top no-repeat;
     background-size: 500px auto;
     background-position: -70px -76px;
     top: calc(50% - 8px);
     transition: all .5s ease;
     display: inline-block;
     right: -7px
 }

 .zwc-btn:hover:after {
     right: -15px
 }

 .zwc-footer-sec {
     background-color: #f3f5f9;
     border-top: 1px solid #dde4f3;
     padding: 70px 0 10px;
     position: relative;
     text-align: center;
 }

 .zwc-footer-sec h2 {
     font-size: var(--footer-sec-font, 44px);
     letter-spacing: var(--footer-sec-font-ls, -1.5px);
     line-height: var(--footer-sec-font-lh, 1.2);
 }

 .zwc-footer-sec h2 span {
     display: block;
     font-size: var(--footer-sec-font-sm, 32px);
     color: var(--secondary-color);
     letter-spacing: var(--footer-sec-font-sm-ls, -0.8px);
     line-height: var(--footer-sec-font-sm-lh, 1.2);
     margin: 7px auto 30px;
 }

 .zwc-btn {
     padding: 18px 40px 18px 30px;
     min-width: 154px;
     font-size: 14px;
     border-radius: 2px;
     background: #ee0014;
     border-radius: 2px;
     color: #fff;
     transition: background-image .2s ease-in-out, box-shadow .5s ease, background-size .2s ease-in-out, background-color .4s ease;
     text-transform: uppercase;
     display: inline-block;
     line-height: 1;
     font-family: var(--zf-secondary-medium);
     letter-spacing: .5px;
     text-rendering: initial;
 }

 body.non-umain .zwc-access,
 body:not(.non-umain) .zwc-sign {
     display: none;
 }

 @media only screen and (max-width: 1440px) {
     :root {
         --zwc-h1-text: 54px;
         --zwc-h2-text: 50px;
         --zwc-h3-text: 30px;
         --zwc-h4-text: 24px;
         --zwc-p-banner-txt: 22px;
         --footer-sec-font: 44px;
         --footer-sec-font-sm: 32px;
         --zwc-h1-text-lh: 1.2;
         --zwc-h1-text-ls: -2px;
         --zwc-h2-text-lh: 1.2;
         --zwc-h2-text-ls: -1.7px;
         --zwc-h3-text-lh: 1.4;
         --zwc-h3-text-ls: -0.4px;
         --zwc-h4-text-lh: 1.6;
         --zwc-h4-text-ls: -0.4px;
         --zwc-p-banner-txt-lh: 1.5;
         --zwc-p-banner-txt-ls: -0.3px;
         --footer-sec-font-lh: 1.2;
         --footer-sec-font-ls: -1.5px;
         --footer-sec-font-sm-lh: 1.2;
         --footer-sec-font-sm-ls: -0.8px;
         --hero-banner-width: 550px;
     }


 }

 @media only screen and (max-width: 1280px) {
     .zwc-product-item[data-app-name] {
         --colum-count: 2;
     }

 }


 @media only screen and (max-width: 1199px) {
     :root {
         --zwc-font-30: 24px;
         --zwc-font-30-lh: 1.4;
         --zwc-font-30-ls: -0.4px;
         --zwc-p-text: 15px;
         --zwc-p-text-ls: 0px;
         --zwc-p-text-lh: 1.6;
         --zwc-h1-text: 50px;
         --zwc-h1-text-lh: 1.2;
         --zwc-h1-text-ls: -1.7px;
         --zwc-p-banner-txt: 20px;
         --zwc-p-banner-txt-lh: 1.6;
         --zwc-p-banner-txt-ls: -0.2px;
         --zwc-h2-text: 44px;
         --zwc-h2-text-lh: 1.2;
         --zwc-h2-text-sh: -1.5px;
         --zwc-font-15: 15px;
         --zwc-font-15-lh: 1.7;
         --zwc-font-15-ls: 0px;
         --zwc-text-xl: 15px;
         --zwc-text-xl-lh: 1.7;
         --zwc-text-xl-ls: 0px;
         --footer-sec-font: 44px;
         --footer-sec-font-sm: 30px;
         --footer-sec-font-ls: -1.5px;
         --footer-sec-font-lh: 1.2;
         --footer-sec-font-sm-ls: -0.6px;
         --footer-sec-font-sm-lh: 1.4;
         --hero-banner-width: 520px;
     }
     .zwc-search-sec h2{
         max-width: 350px;
         text-wrap-style: balance;
     }

     .zwc-promo-title {
         --zwc-h2-text: 40px;
     }


     .zwc-product-list-group {
         width: calc(100% - 340px);
         margin-inline: auto 20px;
         padding-block-end: 50px;
     }


     .zwc-product-list-categories {
         width: 295px;
         margin-left: -2%;
     }

     .zwc-product-list-categories-section {
         padding: 40px 10px 40px 12px;
     }

     .zwc-most-popular-app .content-wrap {
         --colum-count: 3;
         max-width: 900px;
     }

     .zwc-product-item[data-app-name] {
         --card-padding: 25px;
     }

 }

 @media only screen and (max-width: 991px) {
     :root {
         --zwc-h1-text: 44px;
         --zwc-h1-text-ls: -1.5px;
         --zwc-h1-text-lh: 1.2;
         --zwc-h2-text: 40px;
         --zwc-h2-text-ls: -1.3px;
         --zwc-h2-text-lh: 1.2;
         --zwc-search-product: 44px;
         --zwc-search-product-ls: -1.5px;
         --zwc-search-product-lh: 1.2;
         --zwc-h4-text: 22px;
         --zwc-h4-text-ls: -0.3px;
         --zwc-h4-text-lh: 1.4;
         --zwc-p-banner-txt: 20px;
         --zwc-p-banner-txt-lh: 1.6;
         --zwc-p-banner-txt-ls: -0.2px;
         --zwc-p-text: 14px;
         --zwc-p-text-lh: 1.4;
         --zwc-p-text-ls: 0px;
         --footer-sec-font: 40px;
         --footer-sec-font-lh: 1.2;
         --footer-sec-font-ls: -1.3px;
         --footer-sec-font-sm: 30px;
         --footer-sec-font-sm-lh: 1.4;
         --footer-sec-font-sm-ls: -0.6px;
         --hero-banner-width: 520px;
     }

     .zwc-featured-section .content-wrap {
         justify-content: center;
         flex-direction: column;
         gap: 50px;
     }

     .zwc-featured-section-grid {
         width: min(100%, 590px);
         gap: 35px;
         justify-content: center;
     }

     .zwc-featured-section h2 {
         width: min(100%, 500px);
         text-align: center;
         text-wrap-style: pretty;
     }

     .zwc-product-item [class^="zgh-i-"] {
         transform: scale(0.9);
         --icon-bottom-gap: 20px;
         transform-origin: left;
     }

     .zwc-most-popular-app .zwc-product-item [class^="zgh-i-"] {
         transform-origin: center;
     }

     .zwc-most-popular-app {
         padding: 70px 0 60px;
     }

     .zwc-product-list-group {
         width: 100%;
     }

     .zwc-spotlight-logo {
         width: fit-content;
     }

     .zwc-spotlight-iwrap {
         gap: 25px;
     }

     .zwc-mobile-category-toggle {
         position: fixed;
         display: block;
         background: #FFF;
         padding-inline: 40px;
         max-height: calc(100svh - 164px);
         z-index: 2;
         isolation: isolate;
         top: var(--header-height);
         width: 100%;
         margin-left: unset;
         left: 0;
         text-align: center;
         padding: 15px 10px;
         transform: translateY(calc(var(--header-height) * (-2)));
         transition: .6s all;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
         border-bottom: 1px solid #e7ebf0;
     }

     .zwc-mobile-category-toggle:after {
         content: "";
         width: 13px;
         height: 10px;
         display: inline-block;
         margin-left: 13px;
         background: url(
/sites/zweb/images/zoho_general_pages/zh-newhome-sprite.png) left top no-repeat;
         background-size: 450px auto;
         background-position: -135px -69px;
         transition: all .3s ease;
         vertical-align: middle;
         top: -1px;
         left: -1px;
         position: relative;
     }

     .zwc-search-sec {
         padding-block-start: 100px
     }

     .section-active {
         transform: translateY(0px);
     }

     .zwc-product-list-section:has(.section-active + .zwc-product-list-categories.active)::before {
         content: "";
         position: fixed;
         background-color: rgba(0, 0, 0, 0.9);
         opacity: .5;
         top: 0;
         width: 100%;
         height: 100%;
         bottom: 0;
         z-index: 1;
     }

     body:has(.section-active + .zwc-product-list-categories.active) {
         overflow: hidden;
     }


     .zwc-product-list-categories {
         position: fixed;
         top: var(--total-header-height);
         display: none;
         padding: 40px 50px 40px 40px;
         max-height: calc(100vh - 170px);
         overflow: auto;
         box-shadow: 0 11px 90px 0 rgba(65, 67, 132, 0.13);
         border-block: 1px solid #ececec;
         background: #fff;
         text-align: left;
         inset-inline-end: 50%;
         transform: translateX(50%);
         z-index: 99;
     }

     .zwc-platform-filter-section {
         display: none;
     }

     .section-active+.zwc-product-list-categories.active {
         display: block;
     }

     .zwc-product-list-categories-section {
         padding: 0px;
     }

     .zwc-category-group li::before {
         content: unset;
     }

     .zwc-wrapper p.zwc-category-subtext {
         margin-bottom: 26px;
     }

     .zwc-most-popular-app .content-wrap {
         --colum-count: 3;
         max-width: 800px
     }

     .zwc-promo-title {
         --zwc-h2-text: 36px;
         --zwc-h2-text-ls: -1px;
         --zwc-h2-text-lh: 1.2;
     }

     .zwc-promo-banner {
         padding: 70px 0;
     }

     .zwc-promo-content {
         /* flex-direction: column; */
         /* text-align: center; */
         gap: 0px;
     }

     .zwc-promo-text {
         max-width: min(58%, 500px);
         /* order: 1; */
         padding-inline-start: 20px;
     }


     .zwc-promo-image {
         /* display: none; */
         padding-inline-end: 10px;
     }

     .zwc-product-item[data-app-name] {
         --colum-count: 3;
     }

     ul.zwc-product-list-products {
         --colum-gap: 10px;
     }

     .zwc-product-list-group {
         margin-inline: auto;
     }
 }

 @media only screen and (max-width: 767px) {
     :root {
         --zwc-search-product: 34px;
         --zwc-search-product-ls: -1px;
         --zwc-search-product-lh: 1.2;
         --footer-sec-font-sm: 26px;
         --footer-sec-font-sm-ls: -0.5px;
         --footer-sec-font-sm-lh: 1.4;
         --zwc-apple-content-lh: 1.3;
         --zwc-apple-content-ls: -0.6px;
         --zwc-apple-content: 30px;
         --zwc-font-30: 20px;
         --zwc-font-30-ls: -0.2px;
         --zwc-font-30-lh: 1.6;
         --zwc-h1-text: 40px;
         --zwc-h1-text-lh: 1.2;
         --zwc-h1-text-ls: -1.3px;
         --zwc-h2-text: 36px;
         --zwc-h2-text-lh: 1.2;
         --zwc-h2-text-ls: -1px;
         --zwc-h4-text: 20px;
         --zwc-h4-text-ls: -0.2px;
         --zwc-h4-text-lh: 1.6;
         --zwc-p-banner-txt: 18px;
         --zwc-p-banner-txt-lh: 1.6;
         --zwc-p-banner-txt-ls: -0.2px;
         --footer-sec-font: 36px;
         --footer-sec-font-lh: 1.2;
         --footer-sec-font-ls: -1px;
         --footer-sec-font-sm: 24px;
         --footer-sec-font-sm-lh: 1.6;
         --footer-sec-font-sm-ls: -0.4px;
         --hero-banner-width: 460px;
              --zwc-sub-text: 16px;
     --zwc-sub-text-ls: 0px;
     }
     body .zw-product-header {
    border-bottom: 1px solid #e7ebf0;
}

     .zwc-banner-img-container {
         height: auto;
         margin-bottom: 40px;
     }


     .zwc-product-list-group {
         /* max-width: 510px; */
         margin-inline: auto;
         padding-top: 10px;
     }

     .zwc-product-item[data-app-name] {
         --colum-count: 2;
     }

     .zwc-banner-tabs {
         gap: 8px;
         padding: 4px;
     }

     .zwc-banner-tab {
         padding: 5px 12px;
         font-size: 14px;
         gap: 6px;
     }

     .zwc-tab-icon {
         /* width: 14px; */
         /* height: 14px; */
         scale: .9;
     }

     .zwc-banner-tabs-wrap {
         margin-block: 25px 35px;
     }

     /* [class^="zwc-store-"] {
        background-image: url(/sites/zweb/images/zoho_general_pages/zh-ma-platform-icon.svg);
        background-repeat: no-repeat;
        background-size: 360px auto;
        width: 114px;
        height: 34px;
        border-width: 0px;
        padding: 0;
    }

    .zwc-store-apps {
        --apps-icon-position: -123px 0px;
    }

    .zwc-store-play {
        --apps-icon-position: 0px 0px;
    }

    .zwc-store-ms {
        --apps-icon-position: -246px 0px;
    } */

 }


 @media only screen and (max-width: 576px) {
     :root {
         --zwc-h1-text: 36px;
         --zwc-h1-text-lh: 1.2;
         --zwc-h1-text-ls: -1px;
         --zwc-h2-text: 32px;
         --zwc-h2-text-lh: 1.2;
         --zwc-h2-text-ls: -0.8px;
         --footer-sec-font: 32px;
         --footer-sec-font-lh: 1.2;
         --footer-sec-font-ls: -0.8px;
         --footer-sec-font-sm: 24px;
         --footer-sec-font-sm-lh: 1.6;
         --footer-sec-font-sm-ls: -0.4px;
     }

     .zwc-product-item[data-app-name] {
         --colum-count: 1;

     }

 }

 @media only screen and (max-width: 480px) {
     :root {
         --zwc-h1-text: 32px;
         --zwc-h1-text-ls: -0.8px;
         --zwc-h1-text-lh: 1.2;
         --zwc-p-banner-txt: 16px;
         --zwc-p-banner-txt-lh: 1.6;
         --zwc-p-banner-txt-ls: 0px;
         --zwc-h2-text: 30px;
         --zwc-h2-text-ls: -0.6px;
         --zwc-h2-text-lh: 1.4;
         --zwc-apple-content-lh: 1.2;
         --zwc-apple-content-ls: -0.6px;
         --zwc-apple-content: 28px;
         --zwc-font-30: 18px;
         --zwc-font-30-ls: -0.2px;
         --zwc-font-30-lh: 1.6;
         --icon-top-gap: 30px;
         --hero-banner-width: 420px;
     }

     .zwc-hero-banner {
         padding-block-start: 50px;
     }



     .zwc-product-list-product-item h3:has(+p+ul) {
         text-align: center;
         /* margin-bottom: 20px; */
         --zwc-h3-text: 24px;
         --zwc-h3-text-ls: -0.4px;
         --zwc-h3-text-lh: 1.6;
     }
.zwc-wrapper p.zwc-category-subtext{
    text-align:center;
}

     .zwc-search-sec {
         padding-block-start: 80px;
     }

     .zwc-product-list-products {
         padding-block-end: 50px;
     }

     .zwc-banner-tab {
         padding: 4px 14px;
         font-size: 13px;
         gap: 5px;
     }

     .zwc-banner-tabs {
         gap: 6px;
     }

     .zwc-banner-tabs-wrap {
         margin-block: 20px 25px;
     }


 }



 .zwc-product-list-product-item:focus-visible {
     outline: unset;
 }


 /* ============================================
   REDUCED MOTION — WCAG 2.3.3
   ============================================ */
 @media (prefers-reduced-motion: reduce) {
     .zwc-banner-tab[aria-selected="true"]::after {
         animation: none;
     }

     .zwc-banner-panel {
         transition: none;
     }
 }