.container { width: min(1160px, calc(100% - 3rem)); margin: auto; } @media (max-width: 850px) { .container { width: calc(100% - 2.5rem); } } .social { display: flex; align-items: center; gap: 0.75rem; } .social a { display: inline-flex; align-items: center; justify-content: center; color: var(--color-navy); transition: var(--transition); } .social a svg { width: 22px; height: 22px; } .social a:hover { transform: translateY(-1px); color: var(--color-navy); } .social .ig { color: #E1306C; } .social .ig:hover { opacity: 0.8; color: #E1306C; } body.drawer-open { overflow: hidden; } header { background: rgba(250, 248, 244, 0.96); position: static; height: auto; background-color: rgba(250, 248, 244, 0.97); backdrop-filter: blur(8px); z-index: 900; border-bottom: 1px solid var(--color-border); transition: opacity 0.3s ease, transform 0.3s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; height: 95px; margin: 0 auto; padding: 0 1.25rem; gap: 1.25rem; } .logo { display: flex; align-items: center; text-decoration: none; padding: 6px 0; } .logo img { width: auto; object-fit: contain; display: block; height: 76px; } .nav { display: flex; align-items: center; gap: 0.75rem; } .nav ul { display: flex; align-items: center; gap: 0.6rem; } .nav a:not(.btn):not(.lang-item):not(.active) { font-size: 0.95rem; font-weight: 500; white-space: nowrap; color: var(--color-text); padding: 0; border-radius: 0; } .nav ul a:hover { color: var(--color-sage); font-weight: 500; } .nav .active:not(.lang-item), .mobile-drawer-link.active, .side-nav-link.active { padding: 0.3rem 0.75rem; border-radius: 24px; color: var(--color-white); background: var(--color-sage); font-weight: 600; box-shadow: 0 0 0 4px var(--color-white), 0 0 0 5.5px var(--color-sage); margin: 6px; } .menu-btn { display: none; background: rgba(250, 248, 244, 0.9); border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; padding: 0.45rem; color: var(--color-navy); flex-direction: column; justify-content: space-between; width: 44px; height: 40px; box-shadow: var(--shadow-sm); z-index: 950; transition: var(--transition); font-size: 0; } .menu-btn span { display: block; width: 100%; height: 3px; background-color: var(--color-navy); border-radius: 2px; } .mobile-drawer { position: fixed; inset: 0; background: rgba(24, 54, 76, 0.45); backdrop-filter: blur(4px); z-index: 1002; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; justify-content: flex-end; } .mobile-drawer.active { opacity: 1; pointer-events: auto; } .mobile-drawer-content { width: 290px; max-width: 85vw; height: 100%; background-color: var(--color-cream); box-shadow: -8px 0 24px rgba(0,0,0,0.15); padding: 1.75rem 1.25rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .mobile-drawer.active .mobile-drawer-content { transform: translateX(0); } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.25rem; } .logo .mobile-drawer-logo { width: 130px; height: auto; } .mobile-drawer-close { background: none; border: none; font-size: 1.6rem; color: var(--color-navy); cursor: pointer; line-height: 1; padding: 0.2rem 0.5rem; } .mobile-drawer-list { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; } .mobile-drawer-link { font-size: 1.05rem; font-weight: 600; color: var(--color-navy); display: block; padding: 0.3rem 0.75rem; border-radius: 24px; } .mobile-drawer-footer { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--color-border); } .social-icons-group { display: flex; align-items: center; gap: 0.75rem; } .social-icon-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-navy); transition: var(--transition); } .social-icon-link:hover { transform: translateY(-1px); } .social-icon-link svg { width: 22px; height: 22px; display: block; } @media (max-width: 1400px) { .nav { display: none; } .header-inner { height: 80px; } .logo img { height: 62px; } .menu-btn { display: flex; } }