/* ===== HEADER ===== */
 header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding-top: 38px;
     padding-bottom: 43px;
     z-index: 1000;
     background: #22262900;
     transition: background 0.4s ease, backdrop-filter 0.4s ease;
 }

 header.scrolled {
     background: #111415c9;
     backdrop-filter: blur(8px);
 }

 header .container {
     display: flex;
     justify-content: space-between;
     position: relative;
     align-items: center;
 }

 header nav {
     margin-right: 100px;
 }

 header nav ul {
     list-style: none;
     display: flex;
     gap: 20px;
     text-transform: uppercase;
 }

 header nav a {
     color: #C0C3C2;
     font-size: var(--text-medium);
     line-height: 1;
     text-decoration: none;
     letter-spacing: 0.05em;
     transition: color 0.3s;
 }

 header nav a:hover,
 header nav a.active {
     color: #4FAC25;
 }

 .social {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     position: absolute;
     right: 0;
     top: 10px;
 }

 .social a {
     color: #C0C3C2;
     text-decoration: none;
     font-size: 18px;
 }

 .burger-menu {
     display: none;
 }

 .burger {
     display: none;
 }

 .scrolled .social {
     opacity: 0;
 }

 @media (max-width: 768px),
 (orientation: landscape) and (max-height: 500px) {
     header {
         padding-top: 16px;
         padding-bottom: 16px;
     }

     a.header__logo img {
         max-width: 180px;
     }

     header nav,
     .social {
         display: none;
     }

     .burger-menu {
         display: block;
         position: absolute;
         width: 100%;
         height: 100dvh;
         background: #222629;
         left: 0;
         top: 0;
         z-index: 20;
     }

     .burger-menu .container {
         height: 80%;
         flex-direction: column;
         width: calc(100% - 16px * 2);
         flex-wrap: nowrap;
     }

     .mobile-menu__contacts {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 24px;
     }

     .burger-menu .mobile-menu {
         display: flex;
         width: 100%;
         margin: auto;
         margin-top: 11.4rem;
     }

     nav.mobile-menu ul {
         display: flex;
         flex-direction: column;
     }

     a.header__logo {
         z-index: 999;
     }

     .burger-menu a.contact__item img {
         display: block !important;
     }

     .burger-menu a.contact__item {
         color: var(--color-accent) !important;
     }

     nav.mobile-menu ul a {
         font-size: 2rem;
     }

     .burger {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 32px;
         height: 24px;
         border: none;
         background: none;
         cursor: pointer;
         position: relative;
         z-index: 1001;
     }

     .burger__line {
         width: 100%;
         height: 2px;
         background-color: #ffffff;
         border-radius: 2px;
         transition: all 0.3s ease;
     }

     .burger__line+.burger__line {
         margin-top: 6px;
     }

     .burger.active .burger__line:first-child {
         transform: rotate(45deg) translate(1px, 2px);
     }

     .burger.active .burger__line:last-child {
         transform: rotate(-45deg) translate(4px, -4px);
     }

     .burger-menu {
         position: fixed;
         top: 0;
         left: -100%;
         height: 100vh;
         box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
         transition: left 0.4s ease;
         z-index: 10;
     }

     .burger-menu.active {
         left: 0;
         z-index: 1;
     }

     .burger-menu .container {
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         padding-bottom: 100px;
     }

     nav,
     .social {
         display: none;
     }

     .burger-menu span.contact__info {
         color: #50AC27;
         font-size: 1.6rem;
     }

     .header__social.mobile {
         display: flex;
         align-items: center;
         gap: 24px;
     }
 }