@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*ЦВЕТА*/
    
    /*ярко-голубой*/
    --NoElectricBlue: #0077FF;
    /*черный*/
    --MaybeBlack: #181D23;
    /*чуть светлее черного*/
    --DynastyPaleGrey: #232A32;
    /*серый*/
    --SaintGrey: #EEEEEE;
    /*темно-серый*/
    --ThisIsGrey: #52565B;
    /*белый*/
    --SuperWhite: #FFFFFF;
    /*светло-светло-серый почти белый*/
    --BigTextOnWhite: #F9F9F9;
    /*серый*/
    --MissPale: #878787;
    /*светло-серый*/
    --MrGrey: #F5F5F5;
    
    /*РАЗМЕРЫ*/
    --radius-btn: 10px;
    --radius-base: 20px;
    
    --gap-base: 20px;
    --padding-base: 25px;
    
    --h-header: 110px;
}

html,
body {
    font-family: "Montserrat", sans-serif;
    color: var(--DynastyPaleGrey);
    font-size: 16px;
    background-color: var(--MrGrey);
}

.site-header {
    top: var(--bx-panel-height, 39px);
    height: var(--h-header);
}

body.bx-panel .site-header {
    top: var(--bx-panel-height, 39px); /* высота админ-панели */
}

.bg-accent {
    background-color: var(--NoElectricBlue) !important;
    color: var(--SuperWhite) !important;
    border: none !important;
}

.btn.bg-accent:hover {
    background-color: rgb(0, 119, 255, .8) !important;
}

.color-accent {
    color: var(--NoElectricBlue);
}

header {
    padding-top: 30px;
    padding-bottom: 25px;
    /*background-color: var(--SuperWhite);*/
}

header .header__logo-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.03em;
    color: var(--MaybeBlack);
}

.btn {
    height: 55px;
    padding: 0 30px;
    border-radius: var(--radius-btn);
    background-color: var(--MrGrey);
    color: var(--DynastyPaleGrey);
    font-weight: 500;
}

.btn:hover {
    background-color: var(--NoElectricBlue);
    color: var(--SuperWhite);
    border: none !important;
}

main {
    margin-top: 40px;
}

.radius-base {
    border-radius: var(--radius-base);
}

footer {
    padding: 40px 0 60px 0;
    background-color: var(--MaybeBlack);
}

.footer__buttons {
    padding-left: var(--padding-base);
    gap: 12px;
}

.footer__btn {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
}

footer .bg-accent.footer__btn {
    margin: 30px 0 50px 25px;
    max-width: 420px;
}

hr {
    color: var(--SuperWhite);
}

.list-style-none {
    list-style: none;
}

.filter-white {
    filter: brightness(0) invert(1);
}

@media (max-width: 991px) {
    header .header__buttons {
        padding-top: var(--padding-base);
    }
}

@media (max-width: 767px) {
    .footer__buttons {
        padding: 0;
    }
    footer .bg-accent.footer__btn {
        font-size: 12px;
        height: 50px;
        margin-left: 0;
    }
}