/* Primary section start */
.primary.section-color {
    background: var(--primary-section-color);
}

.primary .pre-built-title-color {
    color: var(--primary-title-color);
}

.primary .pre-built-title-font {
    font-family: var(--title-font);
    font-weight: 700;
}

.primary .pre-built-title-size {
    font-size: var(--title-font-size);
}

.primary .pre-built-sub-title-color {
    color: var(--primary-sub-title-color);
}

.primary .pre-built-sub-title-font {
    font-family: var(--sub-title-font);
    font-weight: 600;
}

.primary .pre-built-sub-title-size {
    font-size: var(--sub-title-font-size);
}

.primary .pre-built-desc-color {
    color: var(--primary-desc-color);
}

.primary .pre-built-desc-font {
    font-family: var(--description-font);
}

.primary .pre-built-desc-size {
    font-size: var(--description-font-size);
}

/* Primary section end */

/* secondary section start */
.secondary.section-color {
    background: var(--secondary-section-color);
}

.secondary .pre-built-title-color {
    color: var(--secondary-title-color);
}

.secondary .pre-built-title-font {
    font-family: var(--title-font);
    font-weight: 700;
}

.secondary .pre-built-title-size {
    font-size: var(--title-font-size);
}

.secondary .pre-built-sub-title-color {
    color: var(--secondary-sub-title-color);
}

.secondary .pre-built-sub-title-font {
    font-family: var(--sub-title-font);
    font-weight: 600;
}

.secondary .pre-built-sub-title-size {
    font-size: var(--sub-title-font-size);
}

.secondary .pre-built-desc-color {
    color: var(--secondary-desc-color);
}

.secondary .pre-built-desc-font {
    font-family: var(--description-font);
}

.secondary .pre-built-desc-size {
    font-size: var(--description-font-size);
}

/* secondary section end */


/* Button Color Variables Start */

/* Primary button */
.primary .tfy-btn {
    color: var(--tfy-primary-btn-color);
    background-color: var(--tfy-primary-btn-bg-color);
    font-family: var(--tfy-btn-font);
    font-weight: var(--tfy-btn-font-weight);
    font-size: var(--tfy-btn-font-size);
    padding: var(--tfy-btn-padding);
    border: 1px solid var(--tfy-primary-border-color);
    border-radius: var(--tfy-btn-radius);
    text-align: var(--tfy-btn-text-align);
    text-transform: var(--tfy-btn-text-transform);
    cursor: pointer;
    transition: var(--tfy-btn-transition);
}

.primary .tfy-btn:hover {
    background-color: var(--tfy-primary-btn-bg-hover-color);
    color: var(--tfy-primary-btn-hover-color);
}

.primary .tfy-btn:focus {
    outline: none;
    box-shadow: var(--tfy-btn-focus);
}

.primary .tfy-btn:active {
    background-color: var(--tfy-btn-active-bg-color);
    box-shadow: none;
}

.primary .tfy-btn:disabled {
    background-color: var(--tfy-btn-disabled-bg-color);
    color: var(--tfy-btn-disabled-text-color);
    cursor: not-allowed;
    opacity: var(--tfy-btn-disabled-opacity);
}

/* Secondary button */
.secondary .tfy-btn {
    color: var(--tfy-secondary-btn-color);
    background-color: var(--tfy-secondary-btn-bg-color);
    font-family: var(--tfy-btn-font);
    font-weight: var(--tfy-btn-font-weight);
    font-size: var(--tfy-btn-font-size);
    padding: var(--tfy-btn-padding);
    border: 1px solid var(--tfy-secondary-border-color);
    border-radius: var(--tfy-btn-radius);
    text-align: var(--tfy-btn-text-align);
    text-transform: var(--tfy-btn-text-transform);
    cursor: pointer;
    transition: var(--tfy-btn-transition);
}

.secondary .tfy-btn:hover {
    background-color: var(--tfy-secondary-btn-bg-hover-color);
    color: var(--tfy-secondary-btn-hover-color);
}

.secondary .tfy-btn:focus {
    outline: none;
    box-shadow: var(--tfy-btn-focus);
}

.secondary .tfy-btn:active {
    background-color: var(--tfy-btn-active-bg-color);
    box-shadow: none;
}

.secondary .tfy-btn:disabled {
    background-color: var(--tfy-btn-disabled-bg-color);
    color: var(--tfy-btn-disabled-text-color);
    cursor: not-allowed;
    opacity: var(--tfy-btn-disabled-opacity);
}

/* Button Color Variables End */