@import url('../css/fonts/panton.css');

:root {
    --font-regular: 'Panton', sans-serif;
    --font-semibold: 'PantonSemibold', sans-serif;
    --font-thin: 'PantonThin', sans-serif;
    --font-black: 'PantonBlack', sans-serif;
    --first-color: #0458fa;
    --second-color: #84e9fa;
    --third-color: #fceb33;
    --fourth-color: #f7c832;
    --fifth-color: #449FF9;
    --primary-gradient-bg: linear-gradient(180deg, #449FF9 0%, #0457F9 100%);
    --secondary-gradient-bg: linear-gradient(180deg, #fceb33 0%, #f7c832 100%);
}

body {
    font-family: var(--font-semibold);
}

.gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gt-primary {
    background-image: linear-gradient(180deg, #84e9fa 0%, #449FF9 40%, #0457F9 100%);
}

.gt-secondary {
    background-image: linear-gradient(180deg, #fceb33 0%, #f7c832 40%, #D7A709 100%);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.logo-img {
    width: 40px;
    height: auto;
}

.logo-name {
    font-family: var(--font-black);
    margin: 0;
    font-size: 22px;
}

h1.f-black,
h2.f-black,
h3.f-black,
h4.f-black,
h5.f-black {
    font-family: var(--font-black);
}

#solution .nav-tabs.d-flex {
    gap: .5rem;
}

#solution .nav-tabs.nav-tabs-bg .nav-link {
    padding: .75rem 1rem !important;
}

a.hashtag {
    color: #aab0bc !important;
}

a.hashtag:hover {
    color: var(--first-color) !important;
}

a.cta-btn-secondary {
    color: #fff;
    background-image: var(--secondary-gradient-bg);
}

.modal-body {
    padding: 1.5rem;
}