:root {
    --primary-font-family: "Inter", "sans-serif";
    --gredient-color1: linear-gradient(300deg, #02A14D 0%, #3779A9 100%);
    --red-color: #830909;
    --lightred-color: #D00202;
    --yellow-color: #F3BC18;
    --sky-color: #0D99FF;
    --purple-color: #003558;
    --blue-color: #387BA9;
    --primary-color: #28A745;
    --white-color: #ffffff;
    --black-color: #000000;
    --text-color:#16467D;
}

html,
body {
    font-family: var(--primary-font-family);
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font-family);
    font-weight: 700;
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: inherit;
}

p {
    margin-bottom: 0;
}

:focus-visible {
    outline: inherit;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

.__profiles .__profileIntro::-webkit-scrollbar {
    width: 0;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(236, 233, 233);
}

.__pricing .__cards:hover .__scroll::-webkit-scrollbar-thumb {
    background: var(--gredient-color1);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--gredient-color1);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.__primaryBtn {
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
    color: var(--text-color);
    width: max-content;
    display: block;
    text-align: center;
    margin: 10px 0 0;
    padding: 10px 2.5rem;
    border-radius: 5px;
    background: var(--yellow-color);
    border: 1px solid var(--yellow-color);
    transition: all 0.5s linear;
}

.__primaryBtn:hover {
    background: var(--white-color);
    color: var(--black-color);
    border-color: var(--text-color);
}

.__whiteBtn {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--text-color);
    width: max-content;
    display: block;
    text-align: center;
    margin: 10px 0 0;
    padding: 10px 2.5rem;
    border-radius: 5px;
    border: 1px solid var(--text-color);
    background: var(--white-color);
    transition: all 0.5s linear;
}

.__whiteBtn:hover {
    background: var(--yellow-color);
    border-color: var(--yellow-color);
}