/* ============================================ MONLIS Website - Home Page Header Unique header only for the main page ============================================ *//* ========================================== HEADER CONTAINER Position:Absolute,overlays the Hero section Figma specs:- Padding:20px top/bottom,100px left/right - Gap between elements:10px - Total height:77px ========================================== */.home-header {position:absolute;top:0;left:0;right:0;z-index:var(--z-header);padding:20px 100px;display:flex;flex-direction:column;gap:10px;border-radius:30px;overflow:hidden;}/* ========================================== HEADER CONTENT Flex container with phone and language switcher Figma:gap 40px between phone and languages ========================================== */.home-header__content {display:flex;align-items:center;justify-content:flex-end;gap:40px;width:100%;}/* ========================================== PHONE BLOCK Icon Phone number Figma:gap 10px,icon 20x20 ========================================== */.home-header__phone {display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;}.home-header__phone-icon {width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}.home-header__phone-icon svg {width:20px;height:20px;fill:none;stroke:var(--color-white);stroke-width:1.5;}/* Phone number:Montserrat Regular 13px,line-height 26px */.home-header__phone-number {font-family:var(--font-secondary);font-weight:400;font-size:13px;line-height:26px;color:var(--color-white);white-space:nowrap;text-align:right;}.home-header__phone-link {color:var(--color-white);transition:var(--transition-fast);}.home-header__phone-link:hover {opacity:0.7;}/* ========================================== LANGUAGE SWITCHER DE | EN | UK | RU Figma:gap 10px between items ========================================== */.home-header__languages {display:flex;align-items:center;justify-content:center;gap:10px;}.home-header__lang-item {display:flex;align-items:center;justify-content:center;}/* Language link:Josefin Sans Medium 15px,line-height 15px */.home-header__lang-link {font-family:var(--font-primary);font-weight:500;font-size:15px;line-height:15px;color:var(--color-white);text-transform:uppercase;transition:var(--transition-fast);padding:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;}.home-header__lang-link:hover {opacity:0.7;}/* Active language - no special styling in Figma */.home-header__lang-link--active {opacity:1;}/* ========================================== HEADER DIVIDER LINE White line with gradient mask Figma:1px height,full width ========================================== */.home-header__line {height:1px;width:100%;background-color:var(--color-white);border-radius:30px;/* Gradient mask for fade effect on edges */ -webkit-mask-image:linear-gradient( 90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100% );mask-image:linear-gradient( 90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100% );}/* ========================================== RESPONSIVE STYLES ========================================== *//* Large Desktop (1440px) */@media (max-width:1440px) {.home-header {padding:20px 60px;}}/* Tablet (1024px) */@media (max-width:1024px) {.home-header {padding:15px 40px;}.home-header__content {gap:30px;}.home-header__phone-number {font-size:12px;line-height:24px;}.home-header__lang-link {font-size:14px;line-height:14px;}}/* Mobile (768px) */@media (max-width:768px) {.home-header {padding:15px 20px;}.home-header__content {gap:20px;justify-content:space-between;}.home-header__phone-number {font-size:11px;line-height:22px;}.home-header__lang-link {font-size:12px;line-height:12px;padding:4px;}.home-header__languages {gap:5px;}}/* Small Mobile (480px) */@media (max-width:480px) {.home-header {padding:12px 15px;}.home-header__phone-icon {width:16px;height:16px;}.home-header__phone-number {font-size:10px;line-height:20px;}.home-header__lang-link {font-size:11px;line-height:11px;padding:3px;}.home-header__languages {gap:3px;}}