@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold'), url('../assets/fonts/Gilroy-Bold.woff') format('woff');
}
    

@font-face {
    font-family: 'Gilroy-Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy'), url('../assets/fonts/Gilroy-Heavy.woff') format('woff');
}
    

@font-face {
    font-family: 'Gilroy-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light'), url('../assets/fonts/Gilroy-Light.woff') format('woff');
}
    

@font-face {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium'), url('../assets/fonts/Gilroy-Medium.woff') format('woff');
}
    

@font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular'), url('../assets/fonts/Gilroy-Regular.woff') format('woff');
}

/* Fonts */

.gilroy-medium {
    font-family: 'Gilroy-Medium';
}

.gilroy-regular {
    font-family: 'Gilroy-Regular';
}

.gilroy-light {
    font-family: 'Gilroy-Light';
}

.gilroy-bold {
    font-family: 'Gilroy-Bold';
}

*, html {
    scroll-behavior: smooth !important;
}

.primary-text {
    color: rgba(255, 255, 255, 0.7);
}

.primary-bg {
    /*background-color: #101016;*/
    background-color: #08101C;
}

.main-bg {
    /*background-color: #121216;*/
    background-color: #030B17;
}

.news-bg {
    background-color: #121212;
}

.bg-sky-blue {
    background-color: #2D8EFF;
}

header {
    backdrop-filter: blur(10px);
}

.ukrp-about a {
    text-decoration: underline;
}


.line {
    content: "";
    width: 2px;
    background-color: #4a5568;
}

.cabinet__button {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    gap: 12px;

    padding: 14px 26px;

    font-family: 'Gilroy-Medium';
    font-size: 16px;
    font-weight: 600;

    border: 1px solid rgba(45, 142, 255, 0.3);
    border-radius: 4px;

    background-color: #2D8EFF;
}

.custom-btn {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.custom-btn:hover {
    cursor: pointer;

    box-shadow: 0 0 9px 5px rgba(45, 142, 255, 0.6), 0 0 18px 10px rgba(52, 146, 255, 0.4);
    transform: translateY(-3px);
}

canvas {
    display: block;
    vertical-align: bottom;
}

  
#particles-js {
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}