:root {
    --primary-color: #228CDB;
    --secondary-color: #fff;
    --third-color: #0A0D1C;

    --background-color: var(--third-color);

    --primary-text-color: var(--primary-color);
    --secondary-text-color: var(--secondary-color);
    --third-text-color: #FFF;
    --forth-text-color: #000;
    --fifth-text-color: #E0E0E0;

    --h1-color: var(--secondary-text-color);
    --h2-color: var(--third-text-color);
    --h3-color: var(--secondary-text-color);
    --h4-color: var(--primary-text-color);
    --h5-color: var(--primary-text-color);

    --primary-paragraf-color: #F2F2F2;

    --primary-navbar-text-color: #fff;

    --background-color-navbar: #05070F;
    --shadow-color-navbar: rgba(255, 255, 255, 0.19);
    --text-color-navbar: var(--fifth-text-color);
    --hover-color-navbar: var(--secondary-color);
    --active-color-navbar: var(--secondary-color);
    --shadow-color-navbar:  0px 4px 20px hsl(0deg 0% 100% / 19%);

    --button-secondary-color: var(--primary-color);
    --border-secondary-color: var(--primary-color);

    --background-color-button: var(--primary-color);
    --text-color-button: var(--secondary-text-color);

    --title-card-color: var(--primary-text-color);
    --descriptrion-card-color: var(--secondary-text-color);
    --background-color-card: #05070F;

    --title-footer-color: var(--primary-color);
    --descriptrion-footer-color: var(--secondary-text-color);

    --policy-color: var(--secondary-color);
    --policy-hover-color: var(--secondary-color);

    --footer-icon-color: var(--primary-color);
    --footer-info-conpany: var(--secondary-color);
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}