@font-face {
    font-family: 'Roboto Condensed';
    src: url('./RobotoCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('./RobotoCondensed-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('./RobotoCondensed-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url("./RobotoCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Wadik';
    src: url('./WadikBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.largex-title {
    font-size: 96px;
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;
    line-height: 100%;
}

.main-title {
    font-size: 80px;
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;
    line-height: 100%;
}

.large-title {
    font-size: 64px;
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;
    line-height: 100%;
}

.base-title {
    font-size: 48px;    
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;
    line-height: 100%;

    @media (max-width: 878px) {
        font-size: 24px;
    }  
}

.mediumx-title {
    font-size: 40px;    
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700; 
    line-height: 100%;
    
    @media (max-width: 878px) {
        font-size: 24px;
    }      
}

.medium-title {
    font-size: 32px;    
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;  
    line-height: 100%;
    
    @media (max-width: 878px) {
        font-size: 24px;
    }     
}

.small-title {
    font-size: 24px;    
    font-family: var(--font-secondary), sans-serif;
    font-weight: 700;     
}

.largex-text {
    font-size: 20px;      
    font-family: var(--font-primary), sans-serif;
}

.large-text {
    font-size: 18px;      
    font-family: var(--font-primary), sans-serif;
}

.base-text {
    font-size: 16px;      
    line-height: 24px;
    font-family: var(--font-primary), sans-serif;
}

.small-text {
    font-size: 14px;      
    line-height: 20px;  
    font-family: var(--font-primary), sans-serif;
}

.medium-text {
    font-weight: 500;
}

.semibold-text {
    font-weight: 600;
}

.bold-text {
    font-weight: 700;
}

.gradient-text {
    background: var(--text-gray-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text.fit {
    width: fit-content;
}

.c-red {
    background: none;
    color: var(--primary-red);
}

.c-yellow {
    background: none;
    color: var(--secondary-yellow);
}
.c-yellow-prim {
    background: none;
    color: var(--primary-yellow);
}

.c-transp75 {
    color: var(--transp-white-75);
}

.c-transp60 {
    color: var(--transp-white-60);
}

.c-white {
    color: var(--white);
}

.text-center {
    text-align: center;
}

.font-secondary {    
    font-family: var(--font-secondary), sans-serif;
}