.header-container { display: flex; padding: 30px 40px; color: #ffffff; justify-content: space-between; align-items: center; position: relative; } .header__buttons_wrapper { display: flex; gap: 40px; align-items: center; } .burger__button { display: none; } .header-logo { width: 31px; height: 50px; } .header-buttons { margin-right: 96px; } .header-button { font-family: "GilroyWebRegular"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 125%; background-color: transparent; border: none; color: #ffffff; cursor: pointer; padding: 0px; } .header-lang-button-text:hover { background: rgba(235, 235, 235, 0.2); } .wrapper__button { margin: 0; } .header-lang-button { position: absolute; right: 40px; top: 40px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; width: 55px; padding: 6px 8px 5px 12px; box-sizing: border-box; height: 29px; justify-content: space-between; box-sizing: border-box; line-height: 13px; background-color: transparent; border: 2px solid #ebebeb; border-radius: 12px; transition: height ease-in 0.5s; } .header-lang-button_disabled { height: 29px; } .header-lang-button_active { height: 51px; } .header-lang-button_active { border-radius: 12px; } .header-lang-button-text { width: 100%; appearance: none; background-color: transparent; color: #ebebeb; padding: 0; text-align: left; margin: 0; border: none; height: 13px; -webkit-appearance: none; cursor: pointer; } .header-lang-button-picked { cursor: pointer; } .header-select__icon { top: 6px; height: 13px; right: 5px; position: absolute; } .select { background-color: transparent; display: flex; flex-direction: column; align-self: center; gap: 11px; position: relative; border: none; outline-color: transparent; outline-style: none; color: #ebebeb; outline: none; } .option { /* or 16px */ /* Landing/White */ color: #EBEBEB; } .burger__button { border: none; cursor: pointer; background-color: transparent; display: none; flex-direction: column; gap: 5px; box-sizing: border-box; } .line__burger { background-color: #FFFFFF; width: 14px; height: 1px; } @media screen and (min-width: 1600px) { .header-container { padding: 35px 48px; } .header-logo { width: 46px; height: 74px; } .header-button { font-size: 20px; } .header-lang-button_active { height: auto; } .header-buttons { gap: 48px; } .header-lang-button { width: 70px; padding: 7px 15px; top: 57px; } } @media screen and (max-width: 1279px) { .header-container { padding: 30px 12px; } .header-lang-button { top: 40px; right: 12px; } } @media screen and (max-width: 1024px) { .header-container { padding: 15px 12px; } .header-lang-button { right: 12px; top: 26px; } } @media screen and (max-width: 639px) { .header-container { padding: 8px 10px; } .header-buttons { display: none; } .burger__button { display: flex; } }