/** Shopify CDN: Minification failed

Line 112:2 Unexpected "<"

**/
.section-no-250 .g-box {
    padding: 1.5px;
    border-radius: 20px;
    background: linear-gradient(180deg, #d9d9d9, #b4b4b4 18.01%, #787878 44.01%, #dcdcdc 67.02% 82.02%, #5f5f5f 100.03%) !important;
}


.section-no-250 .g-box .g-box-inner {
    padding: 24px 16px;
    background: #FFFFFF;
    border-radius: 20px;
}

.section-no-250 .p-maxing{
    max-width: 56rem;
    margin: 0 auto;
}

   .audio-player {
      max-width: 100%;
      font-family: sans-serif;
      border: 2px solid #2a5fa5;
      border-radius: 8px;
      padding: 12px 15px;
      text-align: center;
      margin-top: 20px;
      background: #fff;
    }

    .audio-title {
    

        font-family: 'Host Grotesk';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        /* leading-trim and text-edge are draft CSS properties.

        Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
        */
        leading-trim: both;
        text-edge: cap;
        text-align: center;

        /* black */
        color: #333232;

    }

    .audio-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      width: 28px;
      height: 28px;
      border: 2px solid #2a5fa5;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .play-btn:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: 8px solid #2a5fa5;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      margin-left: 2px;
    }

    .play-btn.pause:after {
      content: "";
      border: none;
      width: 10px;
      height: 12px;
      background: linear-gradient(to right, #2a5fa5 40%, transparent 40%) left,
                  linear-gradient(to right, #2a5fa5 40%, transparent 40%) right;
      background-size: 50% 100%;
      background-repeat: no-repeat;
    }

    .progress {
      flex: 1;
      height: 3px;
      background: #ccc;
      border-radius: 2px;
      position: relative;
      cursor: pointer;
    }

    .progress-bar {
      height: 100%;
      width: 0;
      background: #2a5fa5;
      border-radius: 2px;
    }
  </style>

@media(max-width: 767px){
    .section-no-250 .g-box .g-box-inner {
        padding: 12px 8px;
        background: #FFFFFF;
        border-radius: 20px;
    }

     .audio-title {
     
        font-family: 'Host Grotesk';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 21px;
        /* leading-trim and text-edge are draft CSS properties.

        Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
        */
        leading-trim: both;
        text-edge: cap;
        text-align: center;

        /* black */
        color: #333232;


        /* Inside auto layout */
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;

    }

}