/**=====================
     typography scss
==========================**/
body {
    font-family: $public-sans;
    position: relative;
    font-size: 14px;
    color: $title-color;
    margin: 0;
    background-color: $white;
    transition: all 0.3s ease-in-out;
    padding-right: 0 !important;

    ::selection {
        color: $white;
        background-color: var(--theme-color);
    }
}

.bg-overlay {
    @include pseudowh($width: 100vw, $height: 100vh);
    background-color: $title-color;
    position: fixed;
    z-index: 9;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;

    &.show {
        visibility: visible;
        opacity: 0.5;
    }
}

ul {
    padding-left: 0;
    margin-bottom: 0;
}

li {
    display: inline-block;
    font-size: 14px;
}

p {
    font-size: 14px;
    line-height: 18px;
}

a {
    color: var(--theme-color);
    transition: 0.5s ease;
    text-decoration: none;

    &:hover {
        text-decoration: none;
        transition: 0.5s ease;
    }

    &:focus {
        outline: none;
    }
}

button {
    &:focus {
        outline: none;
    }
}

.btn-close {
    &:focus {
        box-shadow: none;
    }
}

:focus {
    outline: none;
}

.form-control {
    background-color: $white;

    &:focus {
        box-shadow: none;
        border-color: var(--theme-color);
    }
}

h1 {
    font-size: calc(40px + (70 - 40) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    line-height: 1.1;
    text-transform: capitalize;
    margin: 0;
}

h2 {
    font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    margin: 0;
}

h3 {
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

h4 {
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
}

h5 {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
}

h6 {
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
}

span {
    display: inline-block;
}

.theme-color {
    color: var(--theme-color) !important;
}

.theme-bg-color {
    background: var(--theme-color) !important;
}