/* ----------------------------------------- Typography CSS ----------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    color: var(--text-medium);
    overflow-x: hidden;
    background-color: var(--bg-white);
}
a {
    color: var(--text-dark);
    text-decoration: none;
    outline: 0 !important;
    transition: all 0.3s ease-out;
}
a:hover {
    color: var(--color-primary);
}
a.hover-primary:hover {
    color: var(--color-primary) !important;
}
.color-primary a {
    color: inherit;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a {
    color: inherit;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:hover {
    color: var(--color-primary);
}
:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
:is(.h1, .h2, .h3, .h4, .h5, .h6) {
    display: block;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: var(--font-bold);
    line-height: 1.3;
}
h1 {
    font-size: var(--font-size--h1);
}
h2, .h2 {
    font-size: var(--font-size--h2);
}
h3, .h3 {
    font-size: var(--font-size--h3);
}
h4, .h4 {
    font-size: var(--font-size--h4);
}
h5, .h5 {
    font-size: var(--font-size--h5);
}
h6, .h6 {
    font-size: var(--font-size--h6);
}
p, .text, .card-text {
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 15px;
}
p:last-child, .text:last-child, .card-text:last-child {
    margin-bottom: 0;
}
p:last-child {
    margin-bottom: 0 !important;
}
.font-lg {
    font-size: var(--font-lg) !important;
}
.font-sm {
    font-size: var(--font-sm) !important;
}
.font-xsm {
    font-size: var(--font-xsm) !important;
}
.font-medium {
    font-weight: var(--font-medium);
}
.font-bold {
    font-weight: var(--font-bold);
}
b {
    font-weight: 500;
}
i[class^=flaticon-]:before, i[class*=" flaticon-"]:before {
    line-height: inherit;
}