.main-page__header-top {
   display: flex;
   align-items: center;
   top: 8px;
   position: fixed;
   z-index: 5;
   width: 1240px;
   transition: opacity .5s;
}

.main-page__header-top .main-page__nav,
.main-page__header-top .main-page__logo,
.main-page__header-top .main-page__contact,
.main-page__header-top .main-page__contact-min {
   border: 1px solid transparent;
}

.main-page__header-top--active .main-page__nav,
.main-page__header-top--active .main-page__logo,
.main-page__header-top--active .main-page__contact,
.main-page__header-top--active .main-page__contact-min,
.main-page__header-top--active .burger {
   background: rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(10px);
   border-color: rgba(248, 249, 254, 0.6);
}

.main-page__header-top--scrolled .main-page__logo img,
.main-page__header-top--active .main-page__logo img {
   transform: translateX(0);
}

.main-page__header-top--scrolled .contact-wrapper,
.main-page__header-top--active .contact-wrapper {
   transform: translateX(0);
}

.main-page__logo {
   display: block;
   width: 210px;
   height: 64px;
   min-width: 210px;
   min-height: 64px;
   margin-right: 48px;
   border-radius: 12px;
   padding: 10px;
   transition: all .2s;
}

.main-page__logo img {
   transform: translateX(-10px);
   width: 100%;
   transition: transform .4s;
}

.main-page__nav {
   display: flex;
   align-items: center;
   padding: 4px;
   margin-right: 15px;
   border-radius: 12px;
   transition: all .2s;

}

.main-page__nav-item {
   padding: 16px 20px;
   color: var(--dark-blue);
   font-weight: 500;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   display: flex;
   align-items: center;
   white-space: nowrap;
   transition: all .2s;
   border-radius: 12px;
   position: relative;
   cursor: pointer;
}

.main-page__nav-item--active {
   background: var(--light-blue);
   color: #fff;
}

.main-page__nav-item--active:hover {
   color: #fff !important;
}

.main-page__nav-item img {
   margin-left: 7px;
}

.main-page__nav-item:hover {
   color: var(--light-blue);
}

.main-page__nav-item .extension-link:hover {
   background: var(--back-blue);
   color: var(--dark-blue);
}

.main-page__nav-item .extension {
   position: absolute;
   bottom: -8px;
   left: 0;
   transform: translateY(100%);
   opacity: 0;
   z-index: 5;
   pointer-events: none;
   transition: all .2s;
   box-shadow: 0 16px 40px -14px rgba(53, 121, 244, 0.07);
   background: #fff;
   border: 1px solid #f8f9fe;
   border-radius: 12px;
   padding: 8px;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #e4e7ee transparent;
}

.main-page__nav-item .extension::-webkit-scrollbar {
   width: 2px;
   max-width: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-track {
   background: transparent;
   width: 2px;
   max-width: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-thumb {
   background-color: #e4e7ee;
   border-radius: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-thumb:hover {
   background-color: #e4e7ee;
}

.main-page__nav-item .extension--active {
   pointer-events: all;
   opacity: 1;
   z-index: 5;
}

.main-page__nav-item .extension-link {
   font-weight: 400;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   color: #6a7989;
   padding: 8px 12px;
   display: block;
   text-align: left;
   border-radius: 12px;
   max-width: 335px;
}

.main-page__nav-item .extension::after {
   content: "";
   position: absolute;
   top: -11px;
   left: 0;
   width: 100%;
   height: 12px;
   z-index: 6;
   background: transparent;
   cursor: initial;
}

.extension-buffer {
   position: absolute;
   bottom: -8px;
   left: 0;
   width: 100%;
   height: 12px;
   background: transparent;
   z-index: 6;
   pointer-events: all;
}

.extension-links-2 {
   border-radius: 0 12px 12px 0;
   background: #fff;
   max-height: 307px;
   min-height: 307px;
   overflow-y: auto;
   padding: 8px;
   scrollbar-width: thin;
   scrollbar-color: #e4e7ee transparent;
}

.main-page__nav-item .extension::-webkit-scrollbar {
   width: 2px;
   max-width: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-track {
   background: transparent;
   width: 2px;
   max-width: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-thumb {
   background-color: #e4e7ee;
   border-radius: 2px;
}

.main-page__nav-item .extension::-webkit-scrollbar-thumb:hover {
   background-color: #e4e7ee;
}

.extension-links-2__wrapper {
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   background: rgba(53, 121, 244, 0.06);
}

.extension-link-2 {
   font-weight: 400;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   color: #6a7989;
   border-radius: 12px;
   padding: 8px 12px;
   transition: all .2s;
}

.extension-links-2 {
   padding: 8px;
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   opacity: 0;
   pointer-events: none;
   display: none;
}

.extension-links-2--shown {
   z-index: 3;
   opacity: 1;
   pointer-events: all;
   display: block;
}

.extension-link-2:hover {
   background: rgba(53, 121, 244, 0.06);
   color: #32465a;
}

.extension-2 {
   position: relative;
}

.extension-2 img {
   position: absolute;
   right: 20px;
   top: 50%;
   display: none;
   transform: rotate(-90deg) translateY(-50%);
}

.main-page__contact {
   margin-left: auto;
   border-radius: 12px;
   padding: 8px 12px;
   transition: all .2s;
}

.contact-wrapper {
   display: inline-flex;
   flex-direction: column;
   align-items: end;
   transform: translateX(10px);
   transition: transform .4s;
}

.main-page__contact a {
   font-weight: 400;
   font-size: 20px;
   line-height: 150%;
   letter-spacing: 0.02em;
   white-space: nowrap;
}

.main-page__contact button {
   font-weight: 400;
   font-size: 14px;
   line-height: 140%;
   letter-spacing: 0.02em;
   text-decoration: underline;
   text-decoration-skip-ink: none;
   text-align: right;
   transition: all .2s;
}

.main-page__contact button:hover {
   text-decoration: none;
}

.main-page__contact-min {
   display: none;
   border-radius: 12px;
   transition: all .2s;
}

@media(max-width: 1264px) {
   .main-page__header-top {
      width: calc(100% - 24px);
      left: 12px;
   }

   .main-page__logo {
      margin-right: 3.797vw;
   }
}

@media(max-width: 1150px) {
   .main-page__contact {
      display: none;
   }

   .main-page__contact-min {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      min-width: 64px;
      min-height: 64px;
      margin-left: auto;
   }
}

@media(max-width: 1000px) {
   .burger {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      min-width: 64px;
      min-height: 64px;
      cursor: pointer;
      position: relative;
      transition: all .2s;
      border-radius: 12px;
      border: 1px solid transparent;
   }

   .burger span {
      display: block;
      width: 26px;
      height: 4px;
      min-width: 26px;
      min-height: 4px;
      background: var(--dark-blue);
      border-radius: 3px;
      margin: 5px 0;
   }

   .burger::before,
   .burger::after {
      content: "";
      display: block;
      width: 26px;
      height: 4px;
      min-width: 26px;
      min-height: 4px;
      background: var(--dark-blue);
      border-radius: 3px;
      transition: all .2s;
   }

   .burger--active {
      backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.7);
      border-radius: 12px;
   }

   .burger--active span {
      display: none;
   }

   .burger--active::before,
   .burger--active::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
   }

   .burger--active::after {
      transform: translate(-50%, -50%) rotate(-45deg);
   }

   .main-page__header-top {
      justify-content: space-between;
      position: fixed;
      z-index: 10;
   }

   .main-page__logo img {
      transform: translate(0);
   }

   .main-page__nav {
      display: none;
      position: absolute;
      top: 80px;
      letter-spacing: 12px;
      box-shadow: 0 16px 40px -14px rgba(53, 121, 244, 0.07);
      background: #fff;
      width: calc(100%);
      border: 1px solid #f8f9fe;
      border-radius: 12px;
      padding: 8px;
      z-index: 10;
      margin-right: 0;
   }

   .main-page__header-top--active .main-page__nav {
      background: #fff !important;
      box-shadow: 0 16px 40px -14px rgba(53, 121, 244, 0.07);
   }

   .main-page__nav--active {
      display: block;
   }

   .main-page__nav-item {
      width: 100%;
      justify-content: space-between;
   }

   .main-page__nav-item img {
      transform: rotate(-90deg);
   }

   .main-page__logo {
      margin-left: auto;
      margin-right: 0;
   }

   .extension-2 img {
      display: block;
   }
}

@media(max-width: 768px) {

   .main-page__logo {
      width: 190px;
      height: 64px;
      min-width: 190px;
      min-height: 64px;
      padding: 13px;
   }

   .main-page__logo img {
      width: 100%;
   }
}

.mobile-subpanel {
   position: fixed;
   top: 88px;
   left: 12px;
   box-shadow: 0 16px 40px -14px rgba(53, 121, 244, 0.07);
   background: #fff;
   width: calc(100% - 24px);
   z-index: 10;
   display: flex;
   flex-direction: column;
   padding: 8px;
   box-sizing: border-box;
   border-radius: 12px;
   max-height: 450px;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #e4e7ee transparent;
}

.mobile-subpanel::-webkit-scrollbar {
   width: 2px;
   max-width: 2px;
}

.mobile-subpanel::-webkit-scrollbar-track {
   background: transparent;
   width: 2px;
   max-width: 2px;
}

.mobile-subpanel::-webkit-scrollbar-thumb {
   background-color: #e4e7ee;
   border-radius: 2px;
}

.mobile-subpanel::-webkit-scrollbar-thumb:hover {
   background-color: #e4e7ee;
}

.mobile-subpanel__back {
   font-weight: 500;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   color: #6a7989;
   padding: 16px 20px;
   display: flex;
   align-items: center;
}

.mobile-subpanel__back .img-wrapper {
   transform: rotate(90deg);
   width: 24px;
   height: 24px;
   min-width: 24px;
   min-height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 8px;
}

.mobile-subpanel__title {
   font-weight: 500;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   color: #e4e7ee;
   padding: 16px 20px;
}

.mobile-subpanel__list {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 8px;
}

.mobile-subpanel__link {
   font-weight: 500;
   font-size: 16px;
   line-height: 150%;
   letter-spacing: 0.02em;
   color: #32465a;
   padding: 16px 20px;
}

.main-page__nav--hidden {
   display: none !important;
}