Border Radius not working on mobile device but works on desktop at mobile size.

I have tried everything in my ability to get the border radius for the first section their to work on mobile. It works fine on desktop at all sizes but when viewing it on an actual mobile device the image breaks out. 

I have tried:

over-flow: hidden;

Targeting the very root of the section block,  

section.page-section.full-bleed-section.layout-engine-section.background-width--full-bleed.content-width--wide.horizontal-alignment--center.vertical-alignment--middle { overflow: hidden !important; border-radius: 20px;}

Targeting any and all container/div elements using the border radius and overflow hidden.

Can anyone help me out with this? You will need to view the webpage on mobile to see the error. 
 

    section[data-section-id="65b324446b04b27d83236cce"] {
        margin: 35px;
        border-radius: 20px !important;
        border: solid 1px #282828;
      overflow: hidden !important;

    }

  .page-section { overflow: hidden !important;}
  .section-background {overflow: hidden !important;}
  .section-background-content {overflow: hidden !important;}
  .background-image-fx {overflow: hidden !important;}
  .section-background-canvas {overflow: hidden !important;}
    .section-border {overflow: hidden !important;}

    section[data-section-id="65b324446b04b27d83236cce"] .section-background {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }

    section[data-section-id="65b324446b04b27d83236cce"] .page-section {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }

    section[data-section-id="65b324446b04b27d83236cce"] .section-border {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }