/* Header and footer copied from sustainability.html. */
#navbar { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; background: #ffffff; color: #000; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.1); height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-symbol { height: 30px; }
.logo-text { height: 12px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; }
.desktop-nav > a { color: #000; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.nav-item-has-mega { position: static; padding: 25px 0; display: flex; align-items: center; }
.nav-item-has-mega > a { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #000; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.nav-icon { font-size: 9px; transition: transform 0.3s ease; color: inherit; }
.nav-item-has-mega:hover .nav-icon { transform: rotate(180deg); }
.mega-menu { position: absolute; top: 100%; left: 0; width: 100%; height: 400px; background-color: #ffffff; display: flex; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.1); z-index: 999; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.nav-item-has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-left { width: 320px; padding: 30px 40px; display: flex; flex-direction: column; background-color: #ffffff; border-right: 1px solid #f0f0f0; }
.mega-menu-link { padding: 12px 0; color: #555555 !important; font-size: 13px !important; text-transform: capitalize; text-decoration: none !important; display: flex !important; justify-content: space-between; align-items: center; transition: color 0.3s ease; opacity: 1 !important; visibility: visible !important; }
.mega-menu-link:hover { color: #000000 !important; }
.mega-menu-arrow { font-size: 14px; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; color: #111; }
.mega-menu-link:hover .mega-menu-arrow { opacity: 1; transform: translateX(0); }
.mega-menu-right { flex: 1; position: relative; padding: 10px; background: #ffffff; }
.mega-menu-right img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; background-color: #eee; }
.mega-menu-caption { position: absolute; bottom: 25px; left: 25px; color: #fff; font-size: 9px; letter-spacing: 1px; background: rgba(0, 0, 0, 0.5); padding: 6px 12px; border-radius: 2px; }
.menu-toggle { display: none; flex-direction: column; gap: 4px; cursor: pointer; }
.menu-toggle span { width: 25px; height: 2px; background-color: #000; }
.footer { background: #ffffff !important; color: #000000 !important; padding: 80px 50px 40px; border-top: 2px solid #000000 !important; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.footer p { font-size: 13px; color: #222222 !important; margin-top: 15px; line-height: 1.5; max-width: 250px; font-weight: 400; }
.footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; color: #000000 !important; margin-bottom: 20px; font-weight: 800; }
.footer a { display: block; font-size: 13px; color: #222222 !important; margin-bottom: 12px; transition: color 0.3s; font-weight: 500; }
.footer a:hover { color: #000000 !important; text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 11px; color: #444444 !important; border-top: 1px solid #b5b3b4 !important; padding-top: 25px; letter-spacing: 1px; font-weight: 500; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }