/* Подлючение шрифта Roboto из Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    margin : 0;
    padding: 0;
}

/* Применение шрифта ко всем элементам */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
    font-family: 'Roboto', sans-serif;
}

#overlay {
    display         : none;
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgb(9 23 36 / 93%);
    /* Белый фон с прозрачностью */
    z-index         : 9999;
}

#popup {
    display         : none;
    position        : fixed;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    padding         : 20px;
    background-color: #fff;
    z-index         : 10000;
    max-width       : 90%;
    /* Максимальная ширина попапа */
    max-height      : 90%;
    /* Максимальная высота попапа */
    overflow-y      : auto;
    /* Позволяет прокручивать содержимое, если оно не помещается в попап окно */
}

#popup p {
    margin-bottom: 10px;
}

#popup button {
    padding: 5px 10px;
}

#agreeButton:hover {
    cursor: pointer;
}
@media screen and (min-width: 1600px) and (max-width: 3440px) {
    body {
        background-image : url("../img/header.png");
        background-size: cover;
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
        background-repeat: no-repeat;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
        overflow-x:hidden;
    }

    #burgerIcon:hover{
        cursor: pointer;

    }
    .close-icon {
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-27%);
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
}

@media (min-width: 1200px) {
    body {
        background-image : url("../img/header.png");
        background-repeat: no-repeat;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
        overflow-x:hidden;
    }

    .content {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
    }

    .education {
        position : fixed;
        top      : 19%;
        left     : 86%;
        transform: translate(-50%, -50%);
    }

    .education a {
        display      : block;
        margin-bottom: 10px;
        color        : white;
    }

    .education:hover a {
        color: #2B5AFD;
    }

    .link_txt {
        max-width      : 150px;
        text-decoration: none;
    }

    .img_tgk {
        width: 150px;
    }

    .img_logo {
        width    : 200px;
        position : fixed;
        top      : 14%;
        left     : 14%;
        transform: translate(-50%, -50%);

    }

    .text_header {
        font-size      : 36px;
        font-weight    : 100;
        display        : flex;
        justify-content: center;
        letter-spacing : 28px;
        color          : #FFFFFF;
        margin-bottom  : 15px;
    }

    .burger-menu {
        display        : flex;
        justify-content: center;
        margin-bottom  : 15px;
    }
    #burgerIcon:hover{
        cursor: pointer;
    }
    #burgerIcon:hover .burger-line{
        fill: #034971;
    }
    .close-icon:hover .burger-line{
        fill: #034971;
    }
    .close-icon {
        position: absolute;
        top: 53px;
        left: 50%;
        transform: translateX(-27%);
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    .item {
        color: white;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 122px;

    }

    .list > .item > a {
        text-decoration: none;
        color: #5cb85c;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        /* Высота на весь экран */
        background-color: rgba(0, 0, 0, 0.9);
        /* Прозрачный черный, измените на нужный цвет */
        z-index         : 1000;
        /* Выравнивание по центру по вертикали */
        transition      : transform 0.3s ease;
        /* Плавная анимация */
        transform       : translateX(-100%);
        /* Начальное состояние - скрыто за левым краем */
    }

    .menu.hidden {
        transform: translateX(-100%);
        /* Скрываем меню */
    }

    .menu:not(.hidden) {
        transform: translateX(0);
        /* Показываем меню */
    }

    .burger-line {
        fill: rgb(172, 170, 167);
    }

    .img_box {
        height         : 55%;
        display        : flex;
        justify-content: center;
        margin-bottom  : 20px;
    }

    .img_phone {
        /* width : 100%; */
        height: auto;
    }

    .text_app {
        font-weight    : 800;
        display        : flex;
        justify-content: center;
        color          : #FFFFFF;
        letter-spacing : 2px;
    }

    .text_app_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
    }

    .text_app_p {
        text-align    : center;
        word-break    : break-word;
        color         : #cccccc;
        letter-spacing: 8px;
    }

    .button_click_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
        margin         : 15px 0;

    }

    .button_click_box iframe {
        margin: 0 auto;
    }

    .button_click {
        margin          : 20px 0 15px 0;
        padding         : 0 20px;
        background-color: #C4C4C4;
        font-weight     : 400;
        font-size       : 38px;
        border-radius   : 20px;
        height          : 58px;
        width           : 488px;
        line-height     : 58px;
    }

    .button_click:hover {
        box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #ffffff78;
        cursor          : pointer;
    }

    .text_bottom_p {
        display        : flex;
        justify-content: center;
        font-weight    : 400;
        font-size      : 24px;
        color          : #7E7B7B;

    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    body {
        background-image : url("../img/header.png");
        background-repeat: no-repeat;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
    }

    .content {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
    }

    .img_tgk {
        width: 136px;
    }

    .education {
        position : fixed;
        top      : 19%;
        left     : 86%;
        transform: translate(-50%, -50%);
    }

    .education a {
        display      : block;
        margin-bottom: 10px;
        color        : white;
    }

    .education:hover a {
        color: #2B5AFD;
    }

    .link_txt {
        max-width      : 136px;
        text-decoration: none;
    }

    .img_logo {
        width    : 132px;
        position : fixed;
        top      : 14%;
        left     : 14%;
        transform: translate(-50%, -50%);

    }

    .text_header {
        font-size      : 27px;
        font-weight    : 100;
        display        : flex;
        justify-content: center;
        letter-spacing : 22px;
        color          : #FFFFFF;
        margin-bottom  : 70px;
    }
    .burger-menu {
        display        : flex;
        justify-content: center;
        margin-bottom  : 15px;


    }

    #burgerIcon:hover{
        cursor: pointer;
    }
    .close-icon {
        position: absolute;
        top     : 20px;
        /* Расстояние от верхнего края контейнера меню */
        right   : 20px;
        /* Расстояние от правого края контейнера меню */
        width   : 40px;
        height  : 40px;
        cursor  : pointer;
    }

    .item {
        color: white;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }

    .list > .item > a {
        text-decoration: none;
        color: #5cb85c;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 70px;

    }
    .menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        /* Высота на весь экран */
        background-color: rgba(0, 0, 0, 0.9);
        /* Прозрачный черный, измените на нужный цвет */
        z-index         : 1000;
        /* Выравнивание по центру по вертикали */
        transition      : transform 0.3s ease;
        /* Плавная анимация */
        transform       : translateX(-100%);
        /* Начальное состояние - скрыто за левым краем */
    }

    .menu.hidden {
        transform: translateX(-100%);
        /* Скрываем меню */
    }

    .menu:not(.hidden) {
        transform: translateX(0);
        /* Показываем меню */
    }

    .burger-line {
        fill: rgb(172, 170, 167);
    }

    .img_box {
        height         : 55%;
        display        : flex;
        justify-content: center;
        margin-bottom  : 20px;
    }

    .img_phone {
        width: 55%;

    }

    .text_app {
        font-weight    : 800;
        display        : flex;
        justify-content: center;
        color          : #FFFFFF;
        letter-spacing : 2px;
    }

    .text_app_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
    }

    .text_app_p {
        text-align    : center;
        word-break    : break-word;
        color         : #cccccc;
        letter-spacing: 8px;
    }

    .button_click_box {
        display        : flex;
        justify-content: center;
        margin         : 15px 0;
    }

    .button_click {
        margin          : 20px 0 15px 0;
        padding         : 0 20px;
        background-color: #C4C4C4;
        font-weight     : 400;
        font-size       : 38px;
        border-radius   : 20px;
        height          : 58px;
        width           : 488px;
        line-height     : 58px;
    }

    .button_click:hover {
        box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #ffffff78;
        cursor          : pointer;
    }

    .text_bottom_p {
        display        : flex;
        justify-content: center;
        font-weight    : 200;
        font-size      : 22px;
        color          : #7E7B7B;

    }
}

@media screen and (min-width: 720px) and (max-width: 991px) {
    body {
        background-image : url("../img/header.png");
        background-repeat: no-repeat;
        position         : fixed;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
    }

    .content {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
    }

    .img_tgk {
        width: 113px;
    }

    .education {
        position : fixed;
        top      : 19%;
        left     : 86%;
        transform: translate(-50%, -50%);
    }

    .education a {
        display      : block;
        margin-bottom: 10px;
        color        : white;
    }

    .education:hover a {
        color: #2B5AFD;
    }

    .link_txt {
        max-width      : 113px;
        text-decoration: none;
    }

    .img_logo {
        width    : 100px;
        position : fixed;
        top      : 14%;
        left     : 14%;
        transform: translate(-50%, -50%);

    }

    .text_header {
        font-size      : 21px;
        font-weight    : 100;
        display        : flex;
        justify-content: center;
        letter-spacing : 17px;
        color          : #FFFFFF;
        margin-bottom  : 70px;
    }

    .burger-menu {
        display        : flex;
        justify-content: center;
        margin-bottom  : 15px;
    }

    .close-icon {
        position: absolute;
        top     : 20px;
        /* Расстояние от верхнего края контейнера меню */
        right   : 20px;
        /* Расстояние от правого края контейнера меню */
        width   : 40px;
        height  : 40px;
        cursor  : pointer;
    }

    .item {
        color: white;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list > .item > a {
        text-decoration: none;
        color: #5cb85c;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 70px;

    }
    .menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        /* Высота на весь экран */
        background-color: rgba(0, 0, 0, 0.9);
        /* Прозрачный черный, измените на нужный цвет */
        z-index         : 1000;
        /* Выравнивание по центру по вертикали */
        transition      : transform 0.3s ease;
        /* Плавная анимация */
        transform       : translateX(-100%);
        /* Начальное состояние - скрыто за левым краем */
    }

    .menu.hidden {
        transform: translateX(-100%);
        /* Скрываем меню */
    }

    .menu:not(.hidden) {
        transform: translateX(0);
        /* Показываем меню */
    }

    .burger-line {
        fill: rgb(172, 170, 167);
    }

    .img_box {
        height         : 50%;
        display        : flex;
        justify-content: center;
        margin-bottom  : 20px;
    }

    .img_phone {
        width: 45%;

    }

    .text_app {
        font-weight    : 800;
        display        : flex;
        justify-content: center;
        color          : #FFFFFF;
        letter-spacing : 2px;
    }

    .text_app_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
    }

    .text_app_p {
        text-align    : center;
        word-break    : break-word;
        color         : #cccccc;
        letter-spacing: 8px;
    }

    .button_click_box {
        display        : flex;
        justify-content: center;
        margin         : 15px 0;
    }

    .button_click {
        margin          : 20px 0 15px 0;
        padding         : 0 20px;
        background-color: #C4C4C4;
        font-weight     : 400;
        font-size       : 30px;
        border-radius   : 20px;
        height          : 58px;
        line-height     : 58px;
        text-align      : center;
    }

    .button_click:hover {
        box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #ffffff78;
        cursor          : pointer;
    }

    .text_bottom_p {
        display        : flex;
        justify-content: center;
        font-weight    : 200;
        font-size      : 15px;
        color          : #7E7B7B;

    }
}

@media screen and (min-width: 375px) and (max-width: 719px) {
    body {
        background-image : url("../img/header.png");
        background-repeat: no-repeat;
        overflow         : auto;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
    }

    .content {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
    }

    .img_tgk {
        width: 161px;
    }

    .education {
        /* position: fixed;
        top: 77%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }

    .education a {
        display      : block;
        margin-bottom: 10px;
        color        : white;
    }

    .education:hover a {
        color: #2B5AFD;
    }

    .link_txt {
        max-width      : 161px;
        text-decoration: none;
    }

    .img_logo {
        width    : 72px;
        position : fixed;
        top      : 7%;
        left     : 9%;
        transform: translate(-50%, -50%);

    }

    .text_header {
        margin-top     : 20px;
        font-size      : 11px;
        font-weight    : 100;
        display        : flex;
        justify-content: center;
        letter-spacing : 17px;
        color          : #FFFFFF;
        margin-bottom  : 70px;
    }

    .burger-menu {
        display        : flex;
        justify-content: center;
        margin-bottom  : 15px;
    }

    .close-icon {
        position: absolute;
        top     : 20px;
        /* Расстояние от верхнего края контейнера меню */
        right   : 20px;
        /* Расстояние от правого края контейнера меню */
        width   : 40px;
        height  : 40px;
        cursor  : pointer;
    }

    .item {
        color: white;
        padding: 4px;
        margin-bottom: 10px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list > .item > a {
        text-decoration: none;
        color: #5cb85c;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        margin-top: 70px;

    }
    .menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        /* Высота на весь экран */
        background-color: rgba(0, 0, 0, 0.9);
        /* Прозрачный черный, измените на нужный цвет */
        z-index         : 1000;
        /* Выравнивание по центру по вертикали */
        transition      : transform 0.3s ease;
        /* Плавная анимация */
        transform       : translateX(-100%);
        /* Начальное состояние - скрыто за левым краем */
    }

    .menu.hidden {
        transform: translateX(-100%);
        /* Скрываем меню */
    }

    .menu:not(.hidden) {
        transform: translateX(0);
        /* Показываем меню */
    }

    .burger-line {
        fill: rgb(172, 170, 167);
    }

    .img_box {
        height         : 30%;
        display        : flex;
        justify-content: center;
        margin-bottom  : 20px;
    }

    .img_phone {
        width: 35%;

    }

    .text_app {
        font-weight    : 800;
        display        : flex;
        justify-content: center;
        color          : #FFFFFF;
        letter-spacing : 2px;
    }

    .text_app_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
    }

    .text_app_p {
        text-align    : center;
        word-break    : break-word;
        color         : #cccccc;
        letter-spacing: 2px;
    }

    .button_click_box {
        display        : flex;
        justify-content: center;
        margin         : 15px 0;
    }

    .button_click {
        margin          : 20px 0 15px 0;
        padding         : 0 20px;
        background-color: #C4C4C4;
        font-weight     : 400;
        font-size       : 24px;
        border-radius   : 22px;
        height          : 50px;
        line-height     : 50px;
        text-align      : center;
    }

    .button_click:hover {
        box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #ffffff78;
        cursor          : pointer;
    }

    .text_bottom_p {
        display        : flex;
        justify-content: center;
        text-align     : center;
        font-weight    : 100;
        font-size      : 11px;
        color          : #7E7B7B;

    }
}

@media screen and (min-width: 260px) and (max-width: 374px) {
    body {
        background-image : url("../img/header.png");
        background-repeat: no-repeat;
        overflow         : auto;
        height           : 100vh;
        width            : 100vw;
        margin           : 0;
    }

    .content {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
    }

    .img_tgk {
        width: 170px;
    }

    .education {
        /* position: fixed;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }

    .education a {
        display      : block;
        margin-bottom: 10px;
        color        : white;
    }

    .education:hover a {
        color: #2B5AFD;
    }

    .link_txt {
        max-width      : 170px;
        text-decoration: none;
    }


    .img_logo {
        width    : 66px;
        position : fixed;
        top      : 6%;
        left     : 8%;
        transform: translate(-50%, -50%);

    }

    .text_header {
        margin-top     : 20px;
        font-size      : 11px;
        font-weight    : 100;
        display        : flex;
        justify-content: center;
        letter-spacing : 9px;
        color          : #FFFFFF;
        margin-bottom  : 70px;
    }

    .burger-menu {
        display        : flex;
        justify-content: center;
        margin-bottom  : 15px;
    }

    .close-icon {
        position: absolute;
        top     : 20px;
        right   : 20px;
        width   : 40px;
        height  : 40px;
        cursor  : pointer;
    }

    .item {
        color: white;
        padding: 4px;
        margin-bottom: 10px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list > .item > a {
        text-decoration: none;
        color: #5cb85c;
        padding: 4px;
        border-radius: 4px;

        &:hover {
            background-color: #034971;
            cursor: pointer;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        margin-top: 70px;

    }
    .menu {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100vh;
        /* Высота на весь экран */
        background-color: rgba(0, 0, 0, 0.9);
        /* Прозрачный черный, измените на нужный цвет */
        z-index         : 1000;
        /* Выравнивание по центру по вертикали */
        transition      : transform 0.3s ease;
        /* Плавная анимация */
        transform       : translateX(-100%);
        /* Начальное состояние - скрыто за левым краем */
    }

    .menu.hidden {
        transform: translateX(-100%);
        /* Скрываем меню */
    }

    .menu:not(.hidden) {
        transform: translateX(0);
        /* Показываем меню */
    }

    .burger-line {
        fill: rgb(172, 170, 167);
    }

    .img_box {
        height         : 23%;
        display        : flex;
        justify-content: center;
        margin-bottom  : 20px;
    }

    .img_phone {
        width: 35%;

    }

    .text_app {
        font-weight    : 800;
        display        : flex;
        justify-content: center;
        color          : #FFFFFF;
        letter-spacing : 2px;
    }

    .text_app_box {
        display        : flex;
        justify-content: center;
        align-items    : center;
    }

    .text_app_p {
        text-align: center;
        word-break: break-word;
        color     : #cccccc;
        font-size : 14px;
    }

    .button_click_box {
        display        : flex;
        justify-content: center;
        margin         : 15px 0;
    }



    .button_click {
        margin          : 20px 0 15px 0;
        padding         : 0 20px;
        background-color: #C4C4C4;
        font-weight     : 400;
        font-size       : 16px;
        border-radius   : 22px;
        height          : 50px;
        line-height     : 50px;
        text-align      : center;
    }

    .button_click:hover {
        box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #ffffff78;
        cursor          : pointer;
    }

    .text_bottom_p {
        display        : flex;
        justify-content: center;
        text-align     : center;
        font-weight    : 100;
        font-size      : 11px;
        color          : #7E7B7B;

    }
}