@font-face {
font-family: "TT LakesB";
src: url("./fonts/TTLakes-Bold.eot");
src: url("./fonts/TTLakes-Bold.ttf") format('truetype');   
}
@font-face {
font-family: "TT LakesM";
src: url("./fonts/TTLakes-Medium.eot"); 
src: url("./fonts/TTLakes-Medium.ttf") format('truetype');   
}
@font-face {
font-family: "TT LakesR";
src: url("./fonts/TTLakes-Regular.eot");
src: url("./fonts/TTLakes-Regular.ttf") format('truetype');  
}

/* css for aside */
    html {
        overflow: hidden;
    }

    .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                z-index: 999;
    } 
    
    .sidebar {  
                position: fixed;
                background-color: white;
                width: 320px;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                z-index: 1000; 
    }
    .button:hover {
                display: flex;
                background-color:#5353f9;
                transition: 0.3s ease;
    }
    .header-page {
                display: flex;
                list-style-type: none;
                padding: 24px;
    }
    .logo {
                display: flex;
                width: 97px;
                height: 51px; 
                margin-left: 10px;
    }
    .button_search {
                margin-left: auto;
                margin-right: 0;
    }
    .menu-list__catalog {
                display: flex;
                flex-direction: column;
                list-style-type: none;
                border: 0;
                padding-left: 16px;
    }

.menu-list__link_item,
.menu-list__link_item--active
    {
                display: flex;
                color: #1B1C21;
                font-family:'TT LakesR', sans-serif;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px; 
                text-decoration: none;
                border: 0;
                margin: 16px;
                align-items: start;
                justify-content: flex-start;   
    }
    .menu-list__link_item--active {
                color: #7E7E82;
    }
    .menu-list__link:hover {
                display: flex;
                color: #7E7E82;
                opacity: 0.5;
                transition: 0.3s ease;
    }
    .menu-list__link_item--active:hover::before {
                content: url("pictue/highlight.svg");
                display: flex;
                color: #41F6D7;
                width: 4px;
                height: 32px;  
                position: absolute;
                left: -14px;
                top: 8px;
    }
    .menu-list__link_item:hover::before {
                content: url("pictue/highlight.svg");
                display: flex;
                color: #41F6D7;
                width: 4px;
                height: 32px;
                position: absolute;
                left: -14px;
                top: 8px;
    }
    .contacts {
                display: inline-flex;
                list-style-type: none; 
                gap: 16px;
                padding-left: 24px;
                margin-top: 100%;  
    }
    .address {
                display: block;
                padding-left: 24px; 
                padding-top: 20px;  
    }
    .mail { 
                display: block;
                font-family:'TT LakesR', sans-serif;
                font-weight: 500;
                font-style: normal;
                font-size: 16px;  
                color: #1B1C21;
                text-decoration: none; 
    }
    .number {
                display: block;
                font-family:'TT LakesB', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 24px;
                margin-bottom: 10px;  
                color: #1B1C21; 
                text-decoration: none; 
    }
    .languages {
                display: flex;
                gap:12px;
                padding-left: 24px;
                margin-top: 24px;
                margin-bottom: 10px; 
                list-style-type: none; 
                text-decoration: none;
    }
    .languages__point {
                display: flex;
                color: #1B1C21;  
                font-family: "TT LakesM";
                text-decoration: none;
    }
    .languages__point_active {
                display: flex;
                color: #7E7E82;  
                font-family: "TT LakesM";
                text-decoration: none;
     }
    .languages__point:hover {
                display: flex;
                color: #7E7E82;
    }
    .menu-list .menu-list__link {
                position: relative;
    }

    /* css for 320px */

    html {
                background-color: #F8F8F8;
                overflow: hidden;
                box-sizing: border-box;
    }
    body {
                overflow: hidden;
    }
    html, 
    body {
                margin:0;
                padding: 0;
}
    .header__container {
                background-color: white;
                display: flex;
                height: 88px;
                width: 100%;
                justify-content: center;
}
    .button {
                display: flex;
                width:40px;
                height:40px;
                list-style-type: none;  
                background-color: #FF3E79;
                border: 0;
                border-radius: 20px;
                cursor: pointer;
                align-items: center;
                justify-content: center;
}
    .button:hover {
                    display: flex;
}
    .nav {
                display: flex;
                margin-right: 16px;
                margin-left: 16px;
}
    .nav__logo {
                display: flex;
                width: 96px;
                height: 50px;
        }
    .nav__left {
                display: flex;
                align-items: center;
                list-style-type: none; 
                margin: 0;
                padding: 20px 0;
                gap: 15px; 
}
    .nav__buttons {
                display: flex;
                gap: 12px; 
                margin: 0;
}
    .chat-buttons {
                display: none;
                list-style-type: none;  
}
    .service-buttons {
                display: flex;
                gap: 15px; 
                padding: 20px 0;
                list-style-type: none;
                align-items: center; 
}
    .service-buttons::before {
                display: flex;
                content:"";
                width: 2px;
                height: 32px;
                margin:0;
                margin-right: 6px;
                margin-left: 0;
                background-color: #EAEAEA;
                }
    .desktop {
                display: none;
}
    .content__title {
                display: flex;
                color: #000000;
                width: 288px;
                height: 40px;
                font-family:'TT LakesB', sans-serif;
                font-weight: 700;
                font-size: 28px;
                line-height: 40px;
                letter-spacing: -0.6px;
                margin-left: 0;
                margin-right:0;
                margin-top: 32px;
                padding: 0;
}
    h2::before {
                display: inline-flex;
                content: "";
                margin-right: 16px;
                margin-left: 0;
                width: 4px;
                height: 40px;
                background-color:#41F6D7;

}

    .nav-list__list {
                display: inline-flex;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
                overflow-x:scroll;
                overflow-y: hidden;
                list-style-type: none;
                margin-left: 16px;
                padding: 10px;
                margin-top: 0;
}

    ::-webkit-scrollbar {
                display: none;
}

    .nav-list__link {
                width: auto;
                height:40px;
                text-decoration:none;
                color: #7E7E82;
                text-align: center;
                justify-content:flex-start;
                white-space: nowrap;
                border: 2px;
                padding: 5px 8px;
                margin-right: 0;
                border-radius: 5px;
                font-family:'TT LakesR', sans-serif;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                letter-spacing: -0.2px;
}
    .nav-list__link:hover {
                color: #7E7E82;
                border: 1px solid #B8FFEC; 
                background-color: #FFFFFF;
}
    .text-par {
                display: flex;
}
    article {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin: 0;
                gap: 10px;
}
    p {
                margin-left: 16px;
                border: 0;
                text-align: left;
                font-family:'TT LakesR', sans-serif;
                color: #1B1C21;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
}
    .paragraph {
                display: none;
}
    .par {
                display: none;
}
    .text {
                text-decoration: none;
                font-family:'TT LakesM', sans-serif;
                color: #1B1C21;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;

}
    .text:hover {
                display: flex;
}
    .text::before {
                content: url(/pictue/exp.svg);
                width: 7px;
                height: 10px;
                color: #41F6D7;
                margin-left: 20px;
                margin-right: 16px;
}

/* css for 768px */

    @media (min-width:768px) {

    .header__container {
                justify-content: space-between;
                width: 100%;
}
    .nav,
    .nav__buttons {
                margin-right: 24px;
                margin-left: 24px;
    }

    .nav__buttons {
                display: flex;
                gap: 18px; 
                margin: 0;
}
    .chat-buttons {  
                display: flex;
                padding:20px 0;
                gap: 16px; 
                align-items: center;
}
    .service-buttons {
                display: flex;
}
    .chat {
                color: white;
}
    .service-buttons::before {
                margin-top: 0;
    }
    .desktop {
                display: none;
    }
    .content {
                background-color: #F8F8F8;
    }
    .content__title {
                margin-top: 24px;  
                gap:10px;
    }

    h2::before {
                display: flex;
                content: "";
                width: 2px;
                height: 40px;
                background-color:#41F6D7;
    }
    .nav-list {
                display: flex;
    }

    article {
                flex-direction: row;
                justify-content: space-between;
                margin-left: 0;
                margin-right: 0;
                margin-bottom: 40px;
                width: 100%;
    }
    p {
                justify-content: center;
                margin-left: 24px;
                margin-right: 24px;
                flex-wrap: wrap;
    }
    .text-par {
                display: flex;
                margin-top: 0;
    }
    .paragraph {
                display: inline-flex;
                margin-top: 0;
    }
    .par {
                display: none;
    }
    .text {
                margin-left: 24px;
    }
    .logo_img {
                display: flex;
                width: 100%;
                min-width: 360px;
                min-height: 208px;  
    }
    }

    /* css for 1120px */

    @media (min-width:1120px) {
    .content {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 28px;
    }
    .header {
                display: none;
    }
    .desktop {
                display: flex;
                margin-right: 20px;
                padding: 0;
                gap: 24px;
                border: 0;
                align-items: center; 
                justify-content: right;
    }
    .nav,
    .nav__buttons{ 
                display: none;
    }
    .service-buttons::before {
                display: none;
    }
    .desktop__link_rep,
    .desktop__link_st {
                text-decoration: none;
                color: #1B1C21;
                margin-right:8px;
                margin-left: 8px;
                font-family:'TT LakesM', sans-serif;
                font-weight: 500;
                font-size: 16px;
                line-height: 18px;
                letter-spacing: -0.2px;  
    }
    .content__title {
                display: flex;
                width: 288px;
                gap: 24px;
    }
    h2::before {
                display: inline-flex;
    }
    .nav-list {
                display: inline-flex;
    }
    .nav-list__list {
                display: flex;
                text-decoration: none;
                list-style-type: none;
                overflow: visible;
                flex-wrap: wrap;
                width: 100%;
    }
    .nav-list__link { 
                height: 50%;
                text-align: center;
                text-decoration: none;
                font-family:'TT LakesR', sans-serif;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                margin-left: 24px;
    }
    .nav-list__link:hover {
                display: flex;
    }
    p {
                margin-left: 30px;
    }
    section {
                padding-left: 16px;
                width: 50%;  
    }

    .paragraph {
                display: none;
    }
    .par {
                display: flex;
    }
    .logo_img {
                width: 50%;
                padding-right: 24px;

    }
    }