[class*="mio-"] {
    display: inline-block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}


.no-scroll{
	overflow: hidden;
}

.icon{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}

.icon-frame{
    border-radius: var(--radius-md);
    background-color: var(--surface-brand-soft);
    padding: var(--sp-s);
}

.icon.icon-default{
    width: 32px;
    height: 32px;
    font-size: 32px;
    fill: inherit;
    color: inherit;
}

.icon.icon-lg{
    width: 42px;
    height: 42px;
    font-size: 42px;
    fill: inherit;
    color: inherit;
}

.icon.icon-sm{
    width: 24px;
    height: 24px;
    font-size: 24px;
    fill: inherit;
    color: inherit;
}

.text.display{
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 120%;
    color: var(--text-default);
}

.text.heading-1{
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 120%;
    color: var(--text-default);
}

.text.heading-2{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 130%;
    color: var(--text-default);
}

.text.heading-3{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semi-bold);
    line-height: 140%;
    color: var(--text-default);
}

.text.sub-title{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi-bold);
    line-height: 140%;
    color: var(--text-default);
}

.text.body{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: 160%;
    color: var(--text-body);
}

.text.helper{
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    color: var(--text-default);
}

input, textarea, select{
    padding: var(--sp-sm) var(--sp-sm);
    border-radius: var(--radius-md);
    border: var(--width-1) solid var(--border-soft);
    font-size: var(--font-size-md);
    width: 100%;
}

textarea{
    resize: vertical;
}

input[type="checkbox"], input[type="radio"]{
    width: 20px;
    height: 20px;
    padding: 0;
}

input[type="checkbox"]{
    border-radius: var(--radius-sm);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: var(--border-primary);
    background-color: var(--surface-brand);
    color: var(--base-white);
}

.input-fluid{
    position: relative;
    width: 100%;
}

.input-fluid .left-icon{
    position: absolute;
    left: var(--sp-s);
    top: 50%;
    transform: translateY(-50%);
    color: var(--icon-muted);
    fill: var(--icon-muted);
}

.input-fluid .right-icon{
    position: absolute;
    right: var(--sp-s);
    top: 50%;
    transform: translateY(-50%);
    color: var(--icon-muted);
    fill: var(--icon-muted);
}

.cta-group{
    display: inline-flex;
    gap: var(--sp-sm);
    align-items: center;
    justify-content: center;
}

.head-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.section{
    padding-top: var(--sp-xxl);
    padding-bottom: var(--sp-xxl);
}

.section:has(.bg-soft){
    background-color: var(--surface-brand-soft);
}

.detail-group{
    max-width: var(--br-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

/* WPCF7 */

.wpcf7 form {
    position: relative;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 12px;
}

.wpcf7-submit {
    position: relative;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wpcf7 form.submitting .wpcf7-submit {
    color: transparent !important;
}

.wpcf7 form.submitting .wpcf7-submit::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: var(--width-1) solid var(--border-soft);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.wpcf7-spinner {
    display: none !important;
}

.wpcf7-response-output {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
}

/* Success */
.wpcf7 form.sent .wpcf7-response-output {
    background: var(--surface-success);
    color: var(--text-success);
    border: 1px solid var(--border-success);
    margin: 0;
    margin-top: var(--sp-sm);
}

/* Error */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background: var(--surface-danger);
    color: var(--text-danger);
    border: 1px solid var(--border-danger);
    padding: var(--sp-s);
    margin: 0;
    margin-top: var(--sp-sm);
}

.wpcf7 form .button.btn-primary{
  max-width: 100%;
}

/* Validation Inline */
.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: 6px;
    color: var(--text-danger);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* WPCF7 */


/* Widget */

.socmed-list{
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    max-width: 162px;
}

.socmed-list .socmed-item{
    text-decoration: none;
}

.socmed-item .socmed-icon{
    background-color: var(--surface-brand-soft);
    color: var(--icon-primary);
    fill: var(--icon-primary);
    padding: var(--sp-s);
    font-weight: var(--font-weight-semi-bold);
    border-radius: var(--radius-md);
    max-width: fit-content;
}

.socmed-item:hover .socmed-icon{
    background-color: var(--surface-brand);
    color: var(--base-white);
    fill: var(--base-white);
}

/* Widget */


/* Responsive */

@media (max-width: 1280px) {

  .text.display{
    font-size: 56px;
  }

  .text.heading-1{
    font-size: 42px;
  }

  .text.heading-2{
    font-size: 28px;
  }

}

@media (max-width: 1024px) {

  .text.display{
    font-size: 48px;
  }

  .text.heading-1{
    font-size: 36px;
  }

  .text.heading-2{
    font-size: 26px;
  }

  .text.heading-3{
    font-size: 22px;
  }

}

@media (max-width: 991px) {

  .text.display{
    font-size: 40px;
  }

  .text.heading-1{
    font-size: 32px;
  }

  .text.heading-2{
    font-size: 24px;
  }

  .text.heading-3{
    font-size: 20px;
  }

  .text.sub-title{
    font-size: 15px;
  }

  .text.body{
    font-size: 15px;
  }

}

@media (max-width: 640px) {

  .text.display{
    font-size: 32px;
    line-height: 120%;
  }

  .text.heading-1{
    font-size: 26px;
  }

  .text.heading-2{
    font-size: 20px;
  }

  .text.heading-3{
    font-size: 18px;
  }

  .text.sub-title{
    font-size: 14px;
  }

  .text.body{
    font-size: 14px;
  }

  .text.helper{
    font-size: 12px;
  }

  .cta-group{
    flex-direction: column;
    width: 100%;
  }

  .cta-group .button{
    max-width: 100%;
  }

}

@media (max-width: 320px) {

  .text.display{
    font-size: 26px;
  }

  .text.heading-1{
    font-size: 22px;
  }

  .text.heading-2{
    font-size: 18px;
  }

  .text.heading-3{
    font-size: 16px;
  }

  .text.sub-title{
    font-size: 13px;
  }

  .text.body{
    font-size: 13px;
  }

  .text.helper{
    font-size: 11px;
  }

}