What could be causing the globe image to overlap the dropdown/accordion content on the dark section of the homepage on iPhones in Webflow? Additionally, why is the Italic accent font not displaying properly on iPhones in certain areas on the site?

You're experiencing two distinct iPhone-specific issues in Webflow: (1) an image overlapping dropdown/accordion content, and (2) an italic font not displaying correctly. Here's how to diagnose and resolve both.

1. Image Overlap on Dropdown/Accordion (iPhone)

The globe image likely overlaps the dropdown or accordion because of z-index stacking or positioning issues, which present uniquely on iPhones due to how iOS Safari calculates layout and stacking context.

• Check z-index values: Ensure the dropdown/accordion content has a higher z-index than the globe image. If the globe has z-index: 10, give the dropdown/accordion container something like z-index: 20.
• Ensure position settings are compatible: If the globe image is absolutely or fixed-positioned, make sure the container holding the accordion is relatively positioned, or the stacking context may break.
• Wrap globe in a separate Section or Div: If it’s intended to be background or decorative, move it outside the accordion's immediate section to avoid z-context conflicts.
• Use Safari-specific debugging: iPhone rendering can differ from desktop Safari. Use Safari’s developer tools with Remote Debugging via a Mac to inspect live DOM behavior on your iPhone.

2. Italic Accent Font Not Displaying on iPhones

The italic version of the font might not be displaying properly because the italic font file is either missing or not recognized on iOS.

• Check if Italic is uploaded: In Project Settings > Fonts, make sure the italic version of your accent font is correctly uploaded (e.g., if using a custom font, upload both regular and italic .woff/.ttf files).
• Google Fonts in Webflow: If using a Google Font, ensure that the italic weight/style is enabled in Webflow’s Font Settings and that it matches what you're using in styles (e.g., 400 italic).
• Font-display bug on iOS: Sometimes, custom fonts with no accompanying italic font file fallback to system font. On iPhones, this fallback is visible and sudden.
• CSS override issues: Confirm there is no CSS override (like font-style: normal !important) being applied via custom code or embedded styles.

Summary

The globe image overlap is likely caused by z-index or position conflicts on iPhones, which can be resolved by adjusting stacking order and layout structure. The italic font issue usually comes from missing or unlinked italic font files, especially on custom fonts. Double-check font uploads and Safari compatibility for full iOS support.