* {
    box-sizing: border-box;
}

:root {
    --primary-color: #02448b;

    --secondary-color: #00b7d8;
    --secondary-color-light: #00B7D84D;

    --accent-color: #04838d;
    --accent-color-light: #04838D4D;

    --turquoise-color: #00b7d8;
    /*--blue-color: #3f78e0;*/
}

/* text styles */
html, body, * {
    font-family: 'nb_architekt_rregular', sans-serif;
    font-size: 1.0rem;
}

h1, h2, h3, h4, h5, h6, .btn {
    font-family: 'nb_architekt_rbold', sans-serif;
    font-weight: normal;
}

h4 {
    font-size: 1.1rem;
}

p, a, span, li, button, input, small { font-family: 'Urbanist', sans-serif; font-weight: normal; }

footer p, footer a { font-size: 0.8rem; }

a  { color: var(--primary-color) !important; }

.accordion-wrapper .card-header button {
    font-size: 1rem;
    color: var(--primary-color) !important;
}

.accordion-wrapper .card-header button:hover {
    color: var(--secondary-color) !important;
}

.text-reset a:hover { color: var(--secondary-color) !important; }

.nav-link {
    color: var(--primary-color) !important;
    font-family: 'nb_architekt_rregular', sans-serif;
    font-size: 1.2rem;
}

.nav-link:hover { color: var(--secondary-color) !important; }

.btn { border: 0px !important; }

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-accent-light { background-color: var(--accent-color-light) !important; }

.text-large {
    font-size: 2rem !important;
}


/* Overrides */
.btn { font-size: 1rem; }

.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.btn-accent {
    background-color: var(--accent-color) !important;
    color: white !important;
}

.btn-soft-secondary {background-color: var(--secondary-color-light) !important; color: var(--secondary-color) !important}
.btn-soft-accent {background-color: var(--accent-color-light) !important; color: var(--accent-color) !important}

.bg-dot {
    background-image: radial-gradient(ellipse 60% 80% at 50% 50%, #00b7d8 100%, transparent 0);
    background-size: 15px 25px; /* width x height of each dot */
}

/* Opener section */
.opener-gradient-bg-1 {
    min-height: 200px;
    background: linear-gradient(to bottom left, var(--primary-color), var(--secondary-color-light) 80%) !important;
}