/* Resetting styles starts */
button{
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
/* Resetting styles ends */


:root{
    --zf-page-max-width: 1280px;
    --zf-page-horizontal-padding: 40px;

    /* Title */
    --zf-fs-h-xl: 88px;
    --zf-lh-h-xl: 96px;
    --zf-fs-h-l: 72px;
    --zf-lh-h-l: 80px;

    --zf-fs-h1: 60px;
    --zf-lh-h1: 68px;

    --zf-fs-h2: 52px;
    --zf-lh-h2: 60px;

    --zf-fs-h3: 40px;
    --zf-lh-h3: 48px;

    --zf-fs-h4: 36px;
    --zf-lh-h4: 44px;

    --zf-fs-h5: 28px;
    --zf-lh-h5: 36px;

    --zf-fs-h6: 24px;
    --zf-lh-h6: 32px;

    /* Description */
    --zf-fs-p-xl: 20px;
    --zf-lh-p-xl: 32px;

    --zf-fs-p-l: 18px;
    --zf-lh-p-l: 30px;

    --zf-fs-p-m: 16px;
    --zf-lh-p-m: 28px;

    /* Label */
    --zf-fs-label-l: 14px;
    --zf-lh-label-l: 26px;

    --zf-fs-label-m: 12px;
    --zf-lh-label-m: 24px;

    /* Border radius */
    --zf-br-s: 4px;
    --zf-br-m: 8px;
    --zf-br-l: 16px;
    --zf-br-xl: 20px;
    --zf-br-maximum: 9999px;
    --zf-br-full: 50%;
    
    
    /* Space between sections */
    --zf-section-spacing: 80px;
}

/* Zoho header signup CTA styling */
.zgh-accounts .zgh-login{
    font-size: 14px !important;
    font-weight: 600 !important;
}
.zgh-accounts .zgh-signup {
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Label styling */
.zf-section-label-styling {
    letter-spacing: 2px;
    font-size: var(--zf-fs-label-m);
    line-height: var(--zf-lh-label-m);
    font-weight: 600;
}


/* H styling */
.zf-h1-styling {
    font-size: var(--zf-fs-h1);
    line-height: var(--zf-lh-h1);
    font-weight: 700;
    letter-spacing: -1px;
}
.zf-h2-styling {
    font-weight: 700;
    font-size: var(--zf-fs-h3);
    line-height: var(--zf-lh-h3);
}

/* CTA styling - Partial in common repo */
.zf-cta-container {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.zf-cta-style {
    border-radius: 8px;
    cursor: pointer;
    padding: 18px 32px;
    font-weight: 700;
    font-size: var(--zf-fs-label-l);
    line-height: normal;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;
    text-decoration: none;
}

.zf-cta-primary{
    background-color: var(--cta-primary-bg);
    color: var(--cta-primary-font-color);
    border: 1px solid var(--cta-primary-border-color);
}
.zf-cta-primary:hover{
    background-color: var(--cta-primary-hover-bg);
    color: var(--cta-primary-font-hover-color);
    border: 1px solid var(--cta-primary-hover-border-color);
}
.zf-cta-secondary{
    background-color: var(--cta-secondary-bg);
    color: var(--cta-secondary-font-color);
    border: 1px solid var(--cta-secondary-border-color);
}
.zf-cta-secondary:hover{
    background-color: var(--cta-secondary-hover-bg);
    color: var(--cta-secondary-font-hover-color);
    border: 1px solid var(--cta-secondary-hover-border-color);
}
.zf-cta-tertiary{
    background-color: var(--cta-tertiary-bg);
    color: var(--cta-tertiary-font-color);
    border: 1px solid var(--cta-tertiary-border-color);
}
.zf-cta-tertiary:hover{
    background-color: var(--cta-tertiary-hover-bg);
    color: var(--cta-tertiary-font-hover-color);
    border: 1px solid var(--cta-tertiary-hover-border-color);
}


/* link-href */
.zf-common-link-elem-wrap {
    cursor: pointer;
    font-size: var(--zf-fs-p-m);
    line-height: var(--zf-lh-p-m);
    color: var(--link-primary-color);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    letter-spacing: .2px;
}
.zf-common-link-elem-arrow{
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.zf-common-link-elem-wrap:hover .zf-common-link-elem-arrow{
    transform: translateX(4px);
}

/* Icon CTA styling */
.zf-square-cta{
    display: inline-block;
    border-radius: 8px;
    border: 1px solid var(--theme-dark-light-specific-color);
    color: var(--theme-dark-light-specific-color);
    padding: 12px;
    transition: all .2s ease-in-out;
    font-size: 0;
    width: fit-content;
}
.zf-square-cta:hover{
    color: var(--theme-dark-light-specific-revert-color);
    background-color: var(--theme-dark-light-specific-color);
}
.zf-square-cta-arrow{
    width: 12px;
    height: 12px;
    transform: rotate(-45deg);
}
.zf-square-cta-arrow path{
    stroke: currentColor;
}

@media screen and (max-width: 768px) {
    :root{
        /* Title */
        --zf-fs-h-xl: 40px;
        --zf-lh-h-xl: 48px;

        --zf-fs-h-l: 40px;
        --zf-lh-h-l: 48px;

        --zf-fs-h1: 36px;
        --zf-lh-h1: 44px;

        --zf-fs-h2: 32px;
        --zf-lh-h2: 40px;

        --zf-fs-h3: 28px;
        --zf-lh-h3: 36px;

        --zf-fs-h4: 24px;
        --zf-lh-h4: 32px;

        --zf-fs-h5: 20px;
        --zf-lh-h5: 28px;

        --zf-fs-h6: 18px;
        --zf-lh-h6: 26px;
        
        /* Description */
        --zf-fs-p-xl: 18px;
        --zf-lh-p-xl: 26px;
        
        --zf-fs-p-l: 16px;
        --zf-lh-p-l: 24px;

        /* Label */
        --zf-fs-label-l: 12px;
        --zf-lh-label-l: 24px;

        /* Space between sections */
        --zf-section-spacing: 60px;
    }
}
@media screen and (max-width: 500px) {
    :root{
        --zf-page-horizontal-padding: 20px;
    }
    .zf-cta-container{
        flex-direction: column;
    }
    .zf-cta-style{
        align-self: stretch;
    }
}