Why is a 'border-bottom' looking like an ellipse on mobile?

Question

When I open developer tools on computer there is no issue and looks great, even when I adjust the screen size. However, when I open the link on my phone the underlined portion looks like an ellipse. I'm not sure how to fix it since I can't see this problem on my computer. The photos I am attaching it what it looks like on my computer at full size, computer reduced size, and phone screen. Here is the link to the test page + CSS: https://www.juddbuilders.com/quick-deliveries/reserve-at-chalfont/the-jordan-homesite-34-tabs.php

Desktop Reduced

Desktop Full

Phone screen

  /* button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: none; } */
  
  .tabs {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden;
    padding-right: 2vw;
    padding-left: 2vw;

}

.tab-slider{
    padding-top: 0;
}

.QDslider{
    margin-left: 0;
    margin-right: 0;
    margin-bottom:9vw;
}

.requestmore{
    height:40px;
}

    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
      color: #292929;
      cursor: pointer;
      display: block;
      font-size: 1.1em;
      /* font-weight: 300; */
      line-height: 1em;
      padding: 1rem 0;
      text-align: center; }
    .tabs [class^="tab"] [type="radio"],
    .tabs [class*=" tab"] [type="radio"] {
      border-bottom: 1px solid rgba(239, 237, 239, 0.5);
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
      .tabs [class*=" tab"] [type="radio"]:hover,
      /* .tabs [class*=" tab"] [type="radio"]:focus {
        border-bottom: 1px solid #fd264f; } */
      .tabs [class^="tab"] [type="radio"]:checked,
      .tabs [class*=" tab"] [type="radio"]:checked {
        border-bottom: 2px solid #fd264f; }
      .tabs [class^="tab"] [type="radio"]:checked + div,
      .tabs [class*=" tab"] [type="radio"]:checked + div {
        opacity: 1; }
      .tabs [class^="tab"] [type="radio"] + div,
      .tabs [class*=" tab"] [type="radio"] + div {
        display: block;
        opacity: 0;
        padding: 2rem 0;
        width: 90%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
    .tabs .tab-2 {
      width: 50%; }
      .tabs .tab-2 [type="radio"] + div {
        width: 200%;
        margin-left: 200%; }
      .tabs .tab-2 [type="radio"]:checked + div {
        margin-left: 0; }
      .tabs .tab-2:last-child [type="radio"] + div {
        margin-left: 100%; }
      .tabs .tab-2:last-child [type="radio"]:checked + div {
        margin-left: -100%; }

        @media screen and (max-width: 768px){
            .QDslider{
                margin-bottom:20vw;
            }

        }


        @media screen and (max-width: 678px){
            .QDslider{
                margin-bottom:63vw;
            }
        }

            

I tried changing the border-bottom styling in CSS, like the thickness. I also tried adding a media query for the border. The ellipses remained unchanged.