.main-btn {
    background: transparent linear-gradient(116deg, var(--main-green) 0%, var(--main-green-dark) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 20px var(--main-green)73;
    color: #fff !important;
}

.main-btn:hover {
    background: transparent linear-gradient(116deg, #45B085 0%, #267A5A 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 20px #45B08573;
    color: #fff !important;
}

.green-btn {
    background: var(--main-green);
    color: #FFFFFF;
}

.green-btn:hover {
    background: #45B085;
    color: #FFFFFF;
}

.gray-btn {
    background: var(--bg-slate-light);
    color: var(--text-slate);
}

.gray-btn:hover {
    background: #E1E6EF;
    color: var(--text-slate);
}

.white-btn {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px #00000014;
}

.white-btn:hover {
    background: var(--bg-slate-light);
}

.line-white-btn {
    background: #FFFFFF;
    border: 2px solid var(--bg-slate-light);
}

.line-white-btn:hover {
    background: var(--bg-slate-light);
}

.red-btn {
    background: #F5616D;
    color: #FFFFFF;
}

.red-btn:hover {
    background: #E04E59;
    color: #FFFFFF;
}

.gradient-btn {
    background: transparent linear-gradient(107deg, var(--accent-coral) 0%, var(--accent-purple) 100%) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}

.gradient-btn:hover {
    background: transparent linear-gradient(107deg, #FF6B5C 0%, #8A63BF 100%) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}