@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root { --if-brand-green: #0f4c00; }
body { font-family: Montserrat, Arial, sans-serif; }
body > #main-container > #header { display: none !important; }

/* Shared Figma desktop shell: 40px slogan strip and 159px navigation area. */
.if-site-header { position: relative; z-index: 50; width: 100%; min-width: 0; background: #fff; font-family: Montserrat, Arial, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.if-site-header *, .if-site-footer * { box-sizing: border-box; }
.if-site-header a { color: #090909; text-decoration: none; }
.if-site-header__bar { height: 40px; display: grid; place-items: center; padding-top: 1px; background: var(--if-brand-green); color: #fff; font-size: 20px; font-weight: 400; line-height: 1; }
.if-site-header__main { position: relative; height: 159px; width: 100%; }
.if-site-header__nav { position: absolute; left: clamp(48px, 6.666667vw, 128px); top: 54%; display: flex; align-items: center; gap: clamp(28px, 3.15vw, 61px); transform: translateY(-50%); white-space: nowrap; font-size: 20px; font-weight: 500; }
.if-site-header__nav a { position: relative; padding-block: 10px; }
.if-site-header__nav a::after { position: absolute; right: 50%; bottom: 1px; left: 50%; height: 2px; background: var(--if-brand-green); content: ''; transition: left .2s ease, right .2s ease; }
.if-site-header__nav a:hover, .if-site-header__nav a.is-current { color: var(--if-brand-green); font-weight: 700; }
.if-site-header__nav a:hover::after, .if-site-header__nav a.is-current::after { right: 0; left: 0; }
.if-site-header__logo { position: absolute; top: 47.87%; left: 50%; display: grid; width: 299px; height: 84.027px; place-items: center; transform: translate(-50%, -50%); }
.if-site-header__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.if-site-header__social { position: absolute; top: 54%; right: clamp(38px, 3.8562vw, 74.04px); display: flex; align-items: center; justify-content: space-between; width: 276.961px; height: 39.961px; transform: translateY(-50%); }
.if-site-header__social-link { display: block; flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 1; border-radius: 50%; }
.if-site-header__social-link > img { display: block; width: 100%; height: 100%; }
.if-site-header__social-link:focus-visible { outline: 2px solid var(--if-brand-green); outline-offset: 3px; }

/* Contact details remain the explicit mobile design; desktop uses the Figma social group above. */
.if-site-header__contact { display: none; }

/* Replace the theme footer with the compact Figma copyright bar. */
.ct-footer { display: none !important; }
.if-site-footer { display: grid; width: 100%; min-height: 116px; margin: 0; padding: 20px; place-items: center; background: var(--if-brand-green); color: #fff; font-family: Montserrat, Arial, sans-serif; text-align: center; }
.if-site-footer p { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; }

@media (max-width: 1600px) {
	.if-site-header__main { height: 140px; }
	.if-site-header__nav { font-size: 18px; }
	.if-site-header__logo { width: 292px; height: 72px; }
	.if-site-header__social { width: 240px; height: 34.63px; }
	.if-site-footer { min-height: 96px; }
	.if-site-footer p { font-size: 16px; }
}

@media (max-width: 1260px) {
	.if-site-header__bar { height: 34px; font-size: 16px; }
	.if-site-header__main { height: 116px; }
	.if-site-header__nav { left: 38px; gap: 28px; font-size: 15px; }
	.if-site-header__logo { width: 230px; height: 60px; }
	.if-site-header__social { right: 32px; width: 184px; height: 26.53px; }
	.if-site-footer { min-height: 80px; }
	.if-site-footer p { font-size: 13px; }
}

@media (max-width: 1024px) {
	.if-site-header__nav { left: 28px; gap: 21px; font-size: 13px; }
	.if-site-header__login { display: none; }
	.if-site-header__logo { width: 190px; height: 52px; }
	.if-site-header__social { right: 24px; width: 150px; height: 21.64px; }
}

/* Some mobile browsers request a 980px desktop viewport; retain the mobile Figma shell for touch devices. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
	.if-site-header__bar { height: clamp(9px, 2.667vw, 12px); padding: 0; font-size: clamp(3.6px, 1.067vw, 4.8px); }
	.if-site-header__main { display: block; width: 100%; height: clamp(27px, 8.267vw, 40px); padding: 0; }
	.if-site-header__logo { position: absolute; top: 25.8%; left: 4%; display: grid; width: 13.333%; height: 51.613%; transform: none; }
	.if-site-header__logo img { width: 100%; height: 100%; object-fit: contain; }
	.if-site-header__nav { position: absolute; top: 29%; left: 35.733%; display: block; width: 30.934%; height: 29.032%; transform: none; font-size: clamp(5.2px, 1.6vw, 7.7px); }
	.if-site-header__nav a { position: absolute; top: 0; padding: 4px 0; }
	.if-site-header__nav a:nth-child(1) { left: 0; }
	.if-site-header__nav a:nth-child(2) { left: 32%; }
	.if-site-header__nav a:nth-child(3) { left: 72.5%; }
	.if-site-header__nav a:nth-child(4) { display: none; }
	.if-site-header__social { display: none; }
	/* Latest mobile Figma group: five 9px icons across 63.053px at the 375px reference width. */
	.if-site-header__contact { position: absolute; top: 38.71%; left: 78.667%; display: block; width: 16.814%; height: 29.032%; margin: 0; }
	.if-site-header__contact-item { position: absolute; top: 0; display: block; width: 14.274%; height: 100%; margin: 0; padding: 0; text-decoration: none; }
	.if-site-header__contact-item--tiktok { left: 0; }
	.if-site-header__contact-item--shopee { left: 20.362%; }
	.if-site-header__contact-item--instagram { left: 42.149%; }
	.if-site-header__contact-item--email { left: 63.937%; }
	.if-site-header__contact-item--whatsapp { left: 85.725%; }
	.if-site-header__contact-disc { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
	.if-site-header__contact-icon { position: absolute; display: block; object-fit: contain; }
	.if-site-header__contact-item--tiktok .if-site-header__contact-icon,
	.if-site-header__contact-item--instagram .if-site-header__contact-icon { top: 20.02%; left: 17.52%; width: 62.56%; height: 62.56%; }
	.if-site-header__contact-item--shopee .if-site-header__contact-icon { top: 12.51%; left: 10%; width: 77.58%; height: 77.58%; }
	.if-site-header__contact-item--email .if-site-header__contact-icon { top: 25.03%; left: 17.54%; width: 63.31%; height: 49.36%; }
	.if-site-header__contact-item--whatsapp .if-site-header__contact-icon { top: 17.51%; left: 20.02%; width: 66.85%; height: 65.77%; }
	.if-site-footer { min-height: clamp(48px, 13.867vw, 64px); padding: 10px 16px; }
	.if-site-footer p { font-size: clamp(7px, 2vw, 9.5px); line-height: 1.35; }
}