figma_adp_04

style.css

@@ -139,12 +139,12 @@ html, body, * {
     padding: 0 5px;
 }
 .header_nav_item {
-    margin: 0;
     display: block;
     justify-content: space-between;
     align-items: center;
     white-space: nowrap;
     padding: 10px;
+    width: 500px;
 }
 .header_nav_item-reverse {
   display: none;
@@ -224,6 +224,12 @@ html, body, * {
     margin: 0;
     font-weight: 500;
 }
+.header_top_list_active {
+  display: none;
+}
+.header_top_list {
+  display: block;
+}
 /* --------------------------------------------------------------------------------------------- */
 .header_row_info {
     display: flex;
@@ -1565,7 +1571,6 @@ html, body, * {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 40px;
 }
 .logo_link {
   margin: 0;
@@ -1624,6 +1629,83 @@ body.lock {
   padding: 15px;
   border-radius: 33px;
 }
+.top_list_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background-color: #F4F4F4;
+  padding: 13px 0px;
+  width: 100%;
+  border-radius: 33px;
+  font-weight: 500;
+}
+.top_list_btn svg {
+  margin: 0;
+}
+.header_top {
+  margin-right: 80px;
+  margin-left: 80px;
+}
+.container {
+  margin: 0 40px;
+}
+.header_top_list-active {
+  display: block;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.4s;
+}
 
+.header_top_list-active.open {
+  max-height: 500px; /* подстрой под высоту меню */
+}
+.header_nav_burger {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.header_nav_burger.open {
+  margin: 0;
+  width: 500px;
+  max-height: 500px; /* подстрой под контент */
+}
+.header_nav {
+  display: none;
+}
+.header_top_list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.top_list_btn_burger {
+  margin: 0;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.header_nav_item {
+  display: flex;
+  border-radius: 33px;
+  padding: 13px 0px;
+  background-color: #F4F4F4;
+  margin-bottom: 20px;
+}
+.header_top_list_active {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.header_nav_burger.open {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+.header_top {
+  margin-bottom: 30px;
+}
+.footer_chart_content {
+  width: 71%;
+}
 
 }