/************************* 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-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-search-sec {
    padding-block: 110px 50px;
    background: var(--bg-color);
    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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.zwc-product-sprite[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;
}

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

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

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

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

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

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

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

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

.zwc-product-sprite.zgh-i-scanner::before {
    background-position: -148px -267px;
    --zp-i-w: 65px;
    background-size: 1358px auto;
}

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

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

/* .zwc-product-sprite.zgh-i-scanner::before {
    --zp-i-w: 40px;
    background-size: 800px auto;
    background-position: -85px -156px;
} */

/************************* Banner Section Css *************************/
.zwc-hero-banner {
    background-color: var(--bg-blue-color);
    padding-block-start: 70px;
    overflow: hidden;
    position: sticky;
    top: var(--header-height);
}

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

.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%);
}


.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);
}

/* 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-product {
    display: block;
}

.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);
}


/* card section css */

[class^="zwc-store-"] {
    background-image: url(/sites/zweb/images/zoho_general_pages/zh-ma-app-store-sprite-icon.svg);
    background-repeat: no-repeat;
    background-size: 85px auto;
    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-store-play {
    --apps-icon-position: -20px 4px;
}

.zwc-store-ms {
    --apps-icon-position: -41px 4px;
}

[class^="zwc-store-"]:hover {
    border-color: #aaa;
}

.zwc-most-popular-title {
    margin-block-end: 40px;
    margin-inline: 10px;
}

.zwc-most-popular-app-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--colum-gap);
    --app-icon-aligment: center;
    justify-content: center;
}

.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-most-popular-app .content-wrap {
    max-width: 1320px;
    --colum-count: 5;
    --apps-icon-gap: 10px;
}

.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;
}









/* promo banner app dase */

.zwc-spotlight-wrapper {
    background: linear-gradient(to bottom, #fff 49%, #e7ebf0 1px, #f8f9fb 50%);
    position: relative;
    z-index: 3;
}

.zwc-spotlight-wrapper .content-wrap {
    max-width: 1100px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.02);
    width: 90%;
    transition: .5s all ease;
}

.zwc-spotlight-iwrap {
    max-width: 1084px;
    background: var(--zwc-linear-apple-gradient, #fff2e4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 40px;
    border-radius: 3px;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}


.zwc-apple-banner {
    --zwc-linear-apple-gradient: linear-gradient(180deg, #f8fafc 0, #fff 100%);
}



.zwc-apple-banner .zwc-spotlight-logo:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #dce4f0;
    right: 52px
}


.zwc-apple-banner .zwc-spotlight-iwrap:before {
    position: absolute;
    content: '';
    top: 0;
    width: 16%;
    box-shadow: 0 0 40px 30px #eef3fc;
    right: 10%
}

.zwc-apple-banner .zwc-spotlight-iwrap:after {
    position: absolute;
    content: '';
    bottom: 0;
    box-shadow: 0 0 40px 20px #e9f7f9;
    width: 16%;
    left: 10%;
}

.zwc-apple-banner .content-wrap {
    max-width: 880px
}

.zwc-apple-banner .zwc-spotlight-content p {
    font-size: var(--zwc-apple-content, 32px);
    line-height: var(--zwc-apple-content-lh, 1.2);
    letter-spacing: var(--zwc-apple-content-ls, -1px);
}






.zwc-apple-banner .zwc-spotlight-logo {
    border: unset;
    gap: 60px;
    position: relative;
    width: auto
}

.zwc-apple-banner .zwc-spotlight-content p:after {
    top: 50%;
    transform: translateY(-50%)
}

.zwc-spotlight-wrapper .content-wrap:hover {
    transform: translateY(-10px)
}

.zwc-spotlight-iwrap a {

    position: absolute;
inset: 4px;
    z-index: 1;
}
.zwc-samsung-banner .zwc-spotlight-logo {
    padding-inline-end: 40px;
}
.zwc-spotlight-logo {
    display: flex;
    align-items: center;
    gap: 20px;
    border-right: 1px dashed #d5b89b
}

.zwc-plus-icon {
    position: relative;
    background: #fff;
    border-radius: 100%;
    min-width: 30px;
    height: 30px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.zwc-apple-banner .zwc-zoho-logo {
    max-width: 96px
}

.zwc-zoho-logo {
    max-width: 75px
}

.zwc-samsung-logo {
    max-width: 120px
}

.zwc-spotlight-content p {
    color: #010101;
    font-size: var(--zwc-font-30, 30px);
    line-height: var(--zwc-font-30-lh, 1);
    margin-bottom: 0;
    letter-spacing: var(--zwc-font-30-ls, -0.7px);
    position: relative
}


.zwc-spotlight-content p:after {
    content: "";
    background-image: url('/sites/zweb/images/zoho_general_pages/arrow-icon.svg');
    position: absolute;
    width: 18px;
    height: 18px;
    background-size: contain;
    top: 9px;
    right: -36px;
    opacity: 0;
    transition: .5s all ease;
    background-repeat: no-repeat
}

.content-wrap:hover .zwc-spotlight-content p:after {
    opacity: .7;
}









.zwc-most-popular-app {
    position: relative;
    background: #fff;
    padding: 90px 0 60px;
    text-align: center;
    --center-align: auto;
    border-top: 1px solid #e7ebf0;
}

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

}

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

.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;
}

ul.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 .zwc-category-item.active {
    color: var(--highlight-color);
    font-family: var(--zf-secondary-medium);
}

.zwc-category-item {
    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 .zwc-category-item:hover {
    color: var(--highlight-color);
}

.zwc-category-group-name {
    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: 30px;
}

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

.zwc-product-list-categories-section {
    padding: 40px 15px 62px 20px;
    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% - 1px);
    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
}

.zwc-category-item.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;
}

/* ============================================
   ZOHO ONE PROMO BANNER SECTION
   ============================================ */

.zwc-promo-banner {
    background-color: #fed600;
    position: relative;
    padding: 90px 0 80px;
}

.zwc-promo-banner .content-wrap {
    max-width: 1000px;
    margin: 0 auto;
    /* padding: 0 20px; */
}

.zwc-promo-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.zwc-promo-text {
    /* flex: 1; */
    max-width: 52.3%;
    padding: 0 0 0 35px;
}

.zwc-promo-logo {
    display: inline-block;
    margin-bottom: 15px;
}

.zwc-promo-logo img {
    display: block;
}

.zwc-promo-title {
    --zwc-h2-text: 44px;
    font-family: var(--primaryfont-regular);
    --zwc-h2-text-lh: 1.2;
    --zwc-h2-text-ls: -1.5px;
    margin-bottom: 50px;
    text-wrap-style: balance;
}

.zwc-promo-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.zwc-promo-store-btn {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.zwc-promo-store-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.zwc-promo-store-btn img {
    display: block;
    height: 45px;
    width: auto;
}

.zwc-promo-image {
    /* flex-shrink: 0; */
    width: 45%;
}

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

.zwc-promo-store-btn {
    background-image: url(/sites/zweb/images/zoho_general_pages/zh-ma-platform-icon.svg);
    background-repeat: no-repeat;
    background-size: 400px auto;
    width: 127px;
    height: 40px;
}

.zwc-promo-appstore {
    background-position: -136px 0px;
}


/* 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: 0px;
        --zwc-text-xl-ls: 1.7;
        --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-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-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-samsung-banner .zwc-spotlight-logo{
        padding-inline-end:0px;
        border-right: unset;
    }
    .zwc-samsung-banner .zwc-spotlight-iwrap{
    flex-direction: column;
    }

    .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;
    }

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

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

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

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

    .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-banner-img-container {
        height: auto;
        margin-bottom: 40px;
    }

    .zwc-promo-text {
        max-width: 540px;
    }

    .zwc-promo-image {
        display: none;
    }

    .zwc-hero-banner {
        top: unset;
    }

    .zwc-most-popular-app-list .zwc-product-item .zwc-product-content {
        width: min(90%, 370px);
        margin-inline: auto;
    }

    .zwc-most-popular-app .content-wrap {
        --colum-count: 2;
    }

    .zwc-apple-banner .zwc-spotlight-content p {
        text-wrap-style: balance;
        text-align: center;

    }


    .content-wrap:hover .zwc-spotlight-content p:after {
        opacity: 0;
    }

    .zwc-spotlight-content p {
        text-align: center;
    }

    .zwc-spotlight-iwrap {
        padding: 30px 20px;
        gap: 20px;
    }

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

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

    [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;
    }

    .zwc-promo-title {
        margin-block-end: 40px;
    }

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

    .zwc-promo-store-btn {
        background-size: 360px auto;
        width: 114px;
        height: 34px;
    }

    .zwc-promo-appstore {
        background-position: -123px 0px;
    }

    .zwc-product-description {
        min-height: unset;
    }

}

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


    .zwc-most-popular-app-list {
        --center-align: 0px;
        text-align: left;
        --app-icon-aligment: start;
        justify-content: start;
        --card-padding: 40px 25px;
    }

    .zwc-most-popular-app-list .zwc-product-item .zwc-product-content {
        margin: unset;
        width: 100%;
    }

}

@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;

    }

    .zwc-most-popular-app-list .zwc-product-item:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    .zwc-most-popular-app .content-wrap {
        --colum-count: 1;
        width: 100%;
    }
}

@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(+ul) {
        text-align: center;
        margin-bottom: 20px;
        --zwc-h3-text: 24px;
        --zwc-h3-text-ls: -0.4px;
        --zwc-h3-text-lh: 1.6;
    }

    .zwc-most-popular-title {
        margin-block-end: 20px;
    }



    .zwc-most-popular-app {
        padding: 50px 0 30px;
    }

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

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

    .zwc-promo-title {
        --zwc-h2-text: 24px;
        --zwc-h2-text-ls: -0.4px;
        --zwc-h2-text-lh: 1.6;
        margin-bottom: 25px;
    }

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

    .zwc-promo-text {
        max-width: 330px;
    }


    .zwc-promo-store-btn img {
        height: 40px;
    }

    .zwc-promo-image {
        max-width: 280px;
    }

    .zwc-promo-logo img {
        width: 100px;
    }
}




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