/* === Base Reset === */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Default font (English) */ html { font-family: 'Inter', sans-serif; } /* Arabic font if lang="ar" is on */ html[lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; } /* === Header Layout === */ .header-container { display: flex; justify-content: center; align-items: center; padding: 16px 100px; background-color: #ffffff; width: 100%; } .header-content { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1600px; position: relative; /* allow absolute centering of site title */ } /* === Logo === */ .logo { width: 130px; height: 50px; background: url('../assets/svg/WiselyInsure-logo.svg') no-repeat center; background-size: contain; } /* === Navigation === */ .nav-section { display: flex; align-items: center; gap: 14px; } /* Dropdown */ .dropdown { display: flex; flex-direction: column; align-items: center; } .dropdown-button { display: flex; justify-content: center; align-items: center; width: 80px; height: 32px; } .language-selector { display: flex; align-items: center; gap: 8px; } .language-text { font-size: 18px; font-weight: 400; line-height: 24px; color: #1D2B45; } .language-icon { width: 24px; height: 24px; } /* === Centered Site Title === */ .site-title { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: #1D2B45; white-space: nowrap; pointer-events: none; /* prevent blocking clicks on controls under overlap */ } /* Contact Icons */ .contact-icons { display: flex; align-items: center; gap: 16px; } .round-icon { display: flex; justify-content: center; align-items: center; width: 41px; height: 41px; padding: 8.5px; background-color: #1D2B45; border: 0.7px solid #D0D5DD; box-shadow: 0 0.7px 1.4px rgba(16, 24, 40, 0.05); border-radius: 50%; } .round-icon img { width: 24px; height: 24px; border: 2px solid #fff; } .dropdown-button { cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; padding: 8px 12px; border-radius: 8px; } .dropdown-button:hover { background-color: rgba(0, 0, 0, 0.05); transform: scale(1.03); } @media (max-width: 768px) { .header-container { padding: 12px 20px; } .header-content { flex-direction: column; align-items: flex-start; gap: 12px; } .nav-section { width: 100%; justify-content: space-between; } .contact-icons { gap: 10px; } .dropdown-button { width: auto; height: auto; padding: 6px 10px; } .logo { width: 100px; height: 40px; background-size: contain; } .language-text { font-size: 16px; } .language-icon { width: 20px; height: 20px; } /* On mobile, stack and center the title naturally */ .site-title { position: static; transform: none; align-self: center; font-size: 18px; margin-top: 4px; pointer-events: auto; /* safe once stacked */ } } /* Floating contact buttons (bottom-right) */ .floating-contact { position: fixed; right: 20px; bottom: 20px; display: flex; gap: 12px; z-index: 1000; } /* In Arabic (RTL), move floating contact to the left */ html[dir='rtl'] .floating-contact { right: auto; left: 20px; } .floating-contact .fab-btn { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: #ffffff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .floating-contact .fab-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); } .floating-contact .fab-btn img { width: 38px; height: 38px; } @media (max-width: 768px) { .floating-contact { right: 16px; bottom: 16px; gap: 10px; } html[dir='rtl'] .floating-contact { right: auto; left: 16px; } .floating-contact .fab-btn { width: 50px; height: 50px; } .floating-contact .fab-btn img { width: 26px; height: 26px; } } /* Compact phones (e.g., 360-420px) */ @media (max-width: 420px) { .header-container { padding: 10px 16px; } .logo { width: 88px; height: 34px; background-size: contain; } .language-text { font-size: 14px; } .language-icon { width: 18px; height: 18px; } .floating-contact { right: 12px; bottom: 12px; gap: 10px; } html[dir='rtl'] .floating-contact { right: auto; left: 12px; } .floating-contact .fab-btn { width: 44px; height: 44px; } .floating-contact .fab-btn img { width: 22px; height: 22px; } .site-title { font-size: 16px; } }