/* Цвета шрифтов*/

.white{
    color: #FFFFFF;
}

.grey{
    color: #F1F1F1;
}

.green{
    color: #003506;
}

.green-70{
    color: rgba(0, 53, 6, 0.70);
}

.white-80{
    color: rgba(255, 255, 255, 0.80);
}

/* Цвета заднего фона*/

.bg-white{
    background-color: #FFFFFF;
}

.bg-grey{
    background-color: #F1F1F1;
}

.bg-green{
    background-color: #003506;
}

.bg-green-70{
    background-color: rgba(0, 53, 6, 0.70);
}

.bg-white-80{
    background-color: rgba(255, 255, 255, 0.80);
}

.green-line{
    background-image: linear-gradient(180deg, #163431 0%, #36504D 100%);
}

.green-line-ftr{
    background-image: linear-gradient(135deg, #163431 0%, #36504D 100%);
}

.green-btn{
    background-color: #163431;
}

/* Сайт */

*{
    padding: 0;
    margin: 0;
    border: 0;
}

html {
    width: 100%;
    height: 100%;
}

h1,h2,h3,p,span,a{
    font-size: 100%;
    font-weight: normal;
}

.mobile-on{
    display: none;
}

.mobile-off{
    display: flex;
}

.mob-menu{ 
    display: none; 
}

a{
    text-decoration: none;
}


/* --------1920-------- */

/* Страница */

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

/* Хеадер */

header{
    height: 82px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(255, 255, 255, 0.98);
}

.header-cont{
    width: 1440px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-uol{
    height: 58px;
}

.menu{
    display: flex;
    gap: 40px;
}

.menu-hvr:hover{
    color: rgba(0, 53, 6, 0.70);
}

.menu-line{
    text-decoration: underline;
    text-decoration-color: #003506;
    text-underline-offset: 10px;
}

/* Футер */

footer{
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.footer-cont{
    width: 1440px;
    padding: 100px 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-cont-l{
    display: flex;
    flex-direction: column;
    gap: 73px;
}

.footer-cont-l-t{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-cont-c{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-cont-b{
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-cont-b > img{
    height: 22px;
}

.footer-cont-r{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 50px;
}

.footer-cont-r-itm{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: fit-content;
}

.footer-cont-r-itm:hover a{
    color: #B8B8B8;
}

.footer-dec{
    width: 100%;
    height: 100%;
    bottom: 0;
    pointer-events: none;
    object-fit: cover;
    position: absolute;
}

header{
  transition: background-color .25s ease;
}

/* Header поверх banner */
header.header--transparent{
  background-color: transparent;
}

/* Делаем пункты меню белыми (перебиваем .green из uikit.css) */
header.header--transparent .header-txt{
  color: #fff !important;
}

/* Подчёркивание у "Главная" тоже белым */
header.header--transparent .menu-line{
  text-decoration-color: #fff !important;
}

/* Лого SVG делаем белым через фильтр */
header.header--transparent .logo-uol{
  filter: brightness(0) invert(1);
}

/* Радиус*/

.rad-div{
    border-radius: 18px;
}

.rad-contacts{
    border-radius: 25px;
}

.rad-btn{
    border-radius: 13px;
}

 /* Кнопка */

.btn{
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    box-sizing: border-box;
}

.btn > img{
    width: 24px;
}

.btn:hover{
    background-color: #FFFFFF;
    outline: 1px #163431 solid; 
    outline-offset: -1px;
}

.btn:hover p{
    color: #163431;
}

.btn:hover img{
    filter: brightness(0) saturate(100%) invert(17%) sepia(12%) saturate(1125%) hue-rotate(118deg) brightness(92%) contrast(88%);
}


/* --------2560-------- */

@media screen and (min-width: 2500px) {

    /* Страница */

    body{
        gap: 130px;
    }

    /* Хеадер */

    header{
        height: 110px;
    }

    .header-cont{
        width: 1920px;
    }

    .logo-uol{
        height: 78px;
    }

    .menu{
        gap: 53px;
    }

    .menu-line{
        text-underline-offset: 14px;
    }

    /* Футер */

    .footer-cont{
        width: 1920px;
        padding: 130px 0;
    }

    .footer-cont-l{
        gap: 100px;
    }

    .footer-cont-l-t{
        gap: 40px;
    }

    .footer-cont-c{
        gap: 15px;
    }

    .footer-cont-b{
        gap: 11px;
    }

    .footer-cont-b > img{
        height: 30px;
    }

    .footer-cont-r{
        gap: 68px;
    }

    .footer-cont-r-itm{
        gap: 15px;
    }

    /* Кнопка */

    .btn{
        gap: 20px;
        padding: 20px 40px;
    }

    .btn > img{
        width: 32px;
    }

    /* Радиус*/

    .rad-div{
        border-radius: 24px;
    }

    .rad-contacts{
        border-radius: 30px;
    }

    .rad-btn{
        border-radius: 18px;
    }
}


/* --------1440-------- */

@media screen and (max-width: 1900px) {

    /* Страница */

    body{
        gap: 80px;
    }

    /* Хеадер */

    header{
        height: 62px;
    }

    .header-cont{
        width: 1280px;
    }

    .logo-uol{
        height: 44px;
    }

    .menu{
        gap: 30px;
    }

    .menu-line{
        text-underline-offset: 8px;
    }

    /* Футер */

    .footer-cont{
        width: 1280px;
        padding: 80px 0;
    }

    .footer-cont-l{
        gap: 50px;
    }

    .footer-cont-l-t{
        gap: 20px;
    }

    .footer-cont-c{
        gap: 8px;
    }

    .footer-cont-b{
        gap: 6px;
    }

    .footer-cont-b > img{
        height: 16.5px;
    }

    .footer-cont-r{
        gap: 34px;
    }

    .footer-cont-r-itm{
        gap: 8px;
    }

    /* Кнопка */

    .btn{
        gap: 15px;
        padding: 12px 25px;
    }

    .btn > img{
        width: 18px;
    }

    /* Радиус*/

    .rad-div{
        border-radius: 15px;
    }

    .rad-contacts{
        border-radius: 20px;
    }

    .rad-btn{
        border-radius: 10px;
    }
}


/* --------1280-------- */

@media screen and (max-width: 1420px) {

    /* Страница */

    body{
        gap: 70px;
    }

    /* Хеадер */

    header{
        height: 56px;
    }

    .header-cont{
        width: 1180px;
    }

    .logo-uol{
        height: 38px;
    }

    .menu{
        gap: 24px;
    }

    .menu-line{
        text-underline-offset: 6px;
    }

    /* Футер */

    .footer-cont{
        width: 1180px;
        padding: 70px 0;
    }

    .footer-cont-l{
        gap: 45px;
    }

    .footer-cont-l-t{
        gap: 18px;
    }

    .footer-cont-c{
        gap: 8px;
    }

    .footer-cont-b{
        gap: 6px;
    }

    .footer-cont-b > img{
        height: 15px;
    }

    .footer-cont-r{
        gap: 30px;
    }

    .footer-cont-r-itm{
        gap: 8px;
    }

    /* Кнопка */

    .btn{
        gap: 15px;
        padding: 11px 23px;
    }

    .btn > img{
        width: 16px;
    }

    /* Радиус */

    .rad-div{
        border-radius: 13px;
    }

    .rad-contacts{
        border-radius: 16px;
    }

    .rad-btn{
        border-radius: 8px;
    }
}


/* --------375-------- */

@media screen and (max-width: 430px) {

    .mobile-on{
        display: block;
    }

    .mobile-off{
        display: none;
    }
    
    /* Страница */

    body{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }

    /* Хеадер */

    .header-mob{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 9000;
        background: transparent;
        transition: background-color .3s ease, backdrop-filter .3s ease;
    }

    .header-mob .logo-uol-mob,
    .header-mob img{
        transition: filter .3s ease;
        filter: brightness(0) invert(1);
    }

    .header-mob.scrolled{
        background: #FFFFFF;
    }

    .header-mob.scrolled .logo-uol-mob,
    .header-mob.scrolled img{
        filter: none;
    }

    .cont-header-mob{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
    }

    .logo-uol-mob{
        height: 64px;
    }

    .burger-icon{
        height: 36px;
    }

    /* Боковое меню */

    .mob-menu{
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .mob-menu.is-open{
        display: block;
    }

    .menu-line{
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: #FFFFFF;
        text-underline-offset: 15px;
    }

    .mob-menu::before{
        content: "";
        position: absolute;
        inset: 0;
    }

    .mob-menu__panel{
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .mob-menu__decor{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        object-fit: cover;      
        pointer-events: none; 
    }

    .mob-menu__close{
        position: absolute;
        top: 27px;
        right: 15px;
        background: transparent;
        border: 0;
        z-index: 10000;
    }

    .mob-menu__close img{
        width: 36px;
        height: 36px;
    }

    .mob-menu__nav{
        position: relative;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .mob-menu__link.is-active .mob-menu__line{
        display: block;
    }

    body.menu-open{
        overflow: hidden;
        touch-action: none;
    }

    /* Футер */

    .footer-mob{
        width: 100%;
        padding: 50px 20px;
        box-sizing: border-box;
        position: relative;
    }

    .footer-cont-mob{
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .ftr-m-t{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ftr-m-t > h3{
        margin-top: 10px;
    }

    .ftr-m-c{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .ftr-m-c > div{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ftr-m-b{
        display: flex;
        align-items: center;
        gap: 7px;
        pointer-events: none;
    }

    .ftr-m-b > img{
        height: 20px;
    }

    .footer-mob > img{
        position: absolute;
        z-index: 99;
        bottom: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
    }

    /* Радиус*/

    .rad-div{
        border-radius: 16px;
    }

    .rad-btn{
        border-radius: 13px;
    }

    /* Кнопка */

    .btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 15px 15px;
        box-sizing: border-box;
    }

    .btn > img{
        width: 24px;
    }
}