From ab141fa567e8083a597168165fe5b0fc7aabd5a8 Mon Sep 17 00:00:00 2001
From: Kevin <kevin@regentmarkets.com>
Date: Wed, 29 Dec 2021 10:28:40 +0800
Subject: [PATCH]  fix safari - office numbers bug

---
 src/pages/about-us/_OurOffices.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/about-us/_OurOffices.tsx b/src/pages/about-us/_OurOffices.tsx
index 6b6b44800a4..92e220fe1fe 100644
--- a/src/pages/about-us/_OurOffices.tsx
+++ b/src/pages/about-us/_OurOffices.tsx
@@ -132,6 +132,10 @@ const MapImage = styled(BackgroundImage)`
     }
 `
 
+const StyledFlex = styled(Flex)`
+    height: unset;
+`
+
 const MapPin = ({ top, left, title, link }) => {
     const [is_pin_show, setPinShow] = React.useState(false)
     return (
@@ -301,30 +305,30 @@ const OurOffices = () => {
             </Flex>
 
             <NumberSection columns="1fr 1fr 1fr 1fr" column_gap="120px" row_gap="4rem">
-                <Flex fd="column">
+                <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('750+')}</NumberHeader>
                     <NumberText size="20px" align="center">
                         {localize('employees')}
                     </NumberText>
-                </Flex>
-                <Flex fd="column">
+                </StyledFlex>
+                <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('50+')}</NumberHeader>
                     <NumberText size="20px" align="center">
                         {localize('nationalities')}
                     </NumberText>
-                </Flex>
-                <Flex fd="column">
+                </StyledFlex>
+                <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('13')}</NumberHeader>
                     <NumberText size="20px" align="center">
                         {localize('offices')}
                     </NumberText>
-                </Flex>
-                <Flex fd="column">
+                </StyledFlex>
+                <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('10')}</NumberHeader>
                     <NumberText size="20px" align="center">
                         {localize('countries')}
                     </NumberText>
-                </Flex>
+                </StyledFlex>
             </NumberSection>
         </StyledSectionContainer>
     )