/******************/
/** Theme Base */
/******************/

/* BUTTON */
:root {
  /* Main Button Settings */
  --btn-border-width: 0;
  --btn-border-color: var(--primary-btn-bg-color);
  --btn-border-color__hover: var(--primary);
  /* --btn-border-radius: var(--default-btn--border-radius); */

  --btn-font-weight: 600;
  --btn-font-family: var(--font-heading);
  --btn-font-size: var(--text-16-20);
  --btn-letter-spacing: 0.5px;

  --btn-color: var(--text-light);
  --btn-color__hover: var(--primary);

  --btn-pd-tb: 12px; /* min: 16px, max: 18px */
  --btn-pd-lr: clamp(2.5rem, calc(2.234rem + 0.99vw), 3.125rem); /* min: 40px, max: 50px */
  --btn-height: clamp(2.563rem, calc(2.35rem + 0.792vw), 3.063rem); /* min: 41px, max: 49px */
  --btn-width: auto;

  --btn-min-width: clamp(9.75rem, calc(9.442rem + 1.315vw), 10.625rem); /* min: 156px, max: 170px */
  --btn-transition: 0.3s all ease;

  /* Primary button color */
  --primary-btn-font-family: var(--btn-font-family);
  --primary-btn-font-size: var(--btn-font-size);
  --primary-btn-font-weight: var(--btn-font-weight);
  --primary-btn-letter-spacing: var(--btn-letter-spacing);
  --primary-btn-letter-case: Capitalize;

  --primary-btn-color: var(--btn-color);
  --primary-btn-color__hover: var(--btn-color); /* Options: --primary__hover | Transparent */

  --primary-btn-bg-color: linear-gradient(90deg, #4967d0 0%, #0270c4 100%);
  --primary-btn-bg-color__hover: linear-gradient(90deg, #4967d0 0%, #0270c4 100%);

  --primary-btn-border-width: var(--btn-border-width);
  --primary-btn-border-radius: var(--btn-border-radius);

  /* Alt button color */
  --alt-btn-font-size: var(--btn-font-size);
  --alt-btn-font-weight: var(--btn-font-weight);
  --alt-btn-font-family: var(--btn-font-family);
  --alt-btn-letter-spacing: var(--btn-letter-spacing);
  --alt-btn-letter-case: Capitalize;

  --alt-btn-color: var(--btn-color);
  --alt-btn-color__hover: var(--btn-color); /* Options: --secondary__hover | Transparent */

  --alt-btn-bg-color: var(--secondary);
  --alt-btn-bg-color__hover: var(--secondary__hover);

  --alt-btn-border-width: var(--btn-border-width);
  --alt-btn-border-radius: var(--btn-border-radius);
  --alt-btn-border-color: var(--secondary);
  --alt-btn-border-color__hover: var(--btn-border-color__hover);

  /* Outline Button */
  --outline-btn--pd: calc(var(--btn-pd-tb) - var(--outline-btn-border-width))
    calc(var(--btn-pd-lr) - var(--outline-btn-border-width));
  --outline-btn-color: var(--text-light);
  --outline-btn-color_hover: var(--text-light);
  --outline-btn-bg-color_hover: rgba(0, 0, 0, 0.31);
  --outline-btn-border-color: var(--text-light);
  --outline-btn-border-color_hover: var(--text-light);
  --outline-btn-border-width: 2px;

  /* Padding */
  --primary-btn-pd-tb: var(--btn-pd-tb);
  --primary-btn-pd-lr: var(--btn-pd-lr);

  --alt-btn-sm-pd-tb: var(--btn-pd-tb);
  --alt-btn-sm-pd-lr: var(--btn-pd-lr);
}

/* Small Button */
.bricks-button.btn--sm {
  --primary-btn-color: var(--btn-color);
  --primary-btn-color__hover: var(--btn-color); /* Options: --primary__hover | Transparent */
  --primary-btn-bg-color: var(--primary);
  --primary-btn-bg-color__hover: var(--primary__hover);
  --primary-btn-font-size: var(--text-s);
  --primary-btn-pd-tb: 8px;
  --primary-btn-pd-lr: var(--space-3xs);
  --btn-min-width: auto;
  --btn-height: 38px;
}

/* Containers */
:root {
  /* Header */
  --header-container-w: 1120px;
  --header-container-mw: 92%;
  --header-container-w__on-3xl: var(--header-container-w); /* Default: var(--header-container-w) */
  --header-container-mw__on-3xl: var(--header-container-mw); /* Default: var(--header-container-mw) */
  --header-container-mw__on-m: 86%;
  --header-container-pd-lr: 0;
  --header-container-pd-lr__on-3xl: var(--header-container-pd-lr); /* Default: var(--header-container-pd-lr) */
  /* Hero */
  --hero-container-w: 1120px;
  --hero-container-mw: 92%;
  --hero-container-mw__on-m: 90%;
  /* Body */
  --body-container-w: 1120px;
  --body-container-w__on-3xl: 1120px;
  --body-container-w__on-xl: 1120px;
  --body-container-w__on-l: 720px;

  --body-container-mw: 92%;
  --body-container-mw__on-m: 86%;
  --body-container-fw-w: 100%;
  --body-container-fw-mw: 100%;

  --blog-container-w: 870px;
  --blog-container-mw: 92%;
  /* Footer */
  --footer-container-w: 1120px;
  --footer-container-w__on-l: 720px;
  --footer-container-mw: 92%;
  --footer-container-mw__on-m: 86%;
}
/* Forms */
:root {
  --form-field-height: 49px;
  --form-textarea-height: 154px;
  --form-field-pd-tb: 12px;
  --form-field-pd-lr: 14px;
  --form-field-mb: 20px;

  --form-label-font-color: var(--text-body);
  --form-label-font-size: var(--text-16-18);
  --form-label-font-family: var(--font-body);
  --form-label-font-weight: 400;
  --form-label-font-style: normal;
  --form-label-text-decoration: none;
  --form-label-text-transform: capitalize;
  --form-label-let-spcing: 1;
  --form-label-mb: var(--space-6xs);
  --form-label-required-color: var(--error);

  --form-field-font-size: var(--text-16-18);
  --form-field-font-family: var(--font-text);
  --form-field-color: var(--text-body);
  --form-field-line-height: 1;
  --form-field-let-spcing: 1;
  --form-field-placeholder-color: #6a6a6a;
  --form-field-placeholder-opacity: 1;

  --form-field-border-color: rgba(106, 106, 106, 0.541);
  --form-border-width: 1px;
  --form-field-bg: transparent;

  --form-row--col-gap: var(--space-3xs);
  --form-row--row-gap: var(--space-3xs);

  --form-btn-wrap-mt: var(--space-s);
  --form-btn-wrap-mt__on-l: var(--form-btn-wrap-mt);
}

.bsd-form--footer-tc {
  --form-footer--mxw: 600px;
  --form-footer--mt: var(--space-6xs);
  --form-footer-text--font-size: var(--text-s);
}
/* Slider Controls */
.splide__pagination {
  /* .splide__arrows */
  /* --sld-arws--pos: absolute; */
  /* --sld-arws--btm: 0; */
  /* --sld-arws--top: 0; */
  /* --sld-arws--h: 50px; */
  /* --sld-arws--w: 101px; */
  /* --sld-arws--rgt: 0; */
  /* --sld-arws--lft: 0; */

  /* .splide__arrow */
  --sld-arw--bg-clr: rgba(255, 255, 255, 0.652);
  --sld-arw--bd: 1px solid #f2f2f2;
  --sld-arw--bd-rad: 0;
  --sld-arw--clr: var(--text-gray);
  --sld-arw--w: 24px;
  --sld-arw--h: 24px;
  --sld-arw--clr_hvr: ;
  --sld-arw--bg-clr_hvr: rgba(255, 255, 255, 0.849);
  --sld-arw--bd-clr_hvr: #f2f2f2;
  /* .splide__pagination */
  --sld-pgn--bg: transparent;
  --sld-pgn--bd-rad: 0;
  --sld-pgn--pd: 0;
  --sld-pgn--btm: -102px;
  --sld-pgn--gap-col: 12px;

  /* .splide__pagination__page */
  --sld-pgn-pg--clr: #d9d9d9;
  --sld-pgn-pg--h: 7px;
  --sld-pgn-pg--w: var(--sld-pgn-pg--h);
  --sld-pgn-pg--bd: 1px solid #000000;
  --sld-pgn-pg--mg: 0;
  --sld-pgn-pg--pd: 0;

  /* &.is-active */
  --sld-pgn-pg-is-act--clr: #707070;
  --sld-pgn-pg-is-act--h: var(--sld-pgn-pg--h);
  --sld-pgn-pg-is-act--w: var(--sld-pgn-pg--w);
}
.splide-slider.spl-sldr--arw-br {
  --sld-arws--pos: absolute;
  --sld-arws--btm: 0;
  --sld-arws--h: 50px;
  --sld-arws--w: 100px;
  --sld-arws--rgt: 0;
  --sld-arw--bg-clr: #ffffff;
  --sld-arw--w: 22px;
  --sld-arw--h: 22px;
}

/* List Ul */
.bld-list {
  --lst--display: flex;
  --lst--wrap: wrap;
  --lst--flx-dir: column;
  --lst--ali-item: start;
  --lst--jus-con: start;
  --lst--grd-tmp-col: 1fr;
  --lst--pd: 0;
  --lst--lst-style: none;
  --lst--mg: 0;

  --lst-li--mg: 0 0 var(--space-5xs);
  --lst-li--width: auto;

  --lst-li-cnt--d: flex;
  --lst-li-cnt--ali-ite: center;
  --lst-li-cnt--jus-con: start;
  --lst-li-cnt--flx-wrp: nowrap;
  --lst-li-cnt--flx-dir: row;
  --lst-li-cnt--w: 100%;
  --lst-li-cnt--mg: 0;
  --lst-li-cnt--gap-col: 10px;
  --lst-li-cnt--row-col: 0;

  --lst-li-ico--display: flex;
  --lst-li-ico--pd: 0;
  --lst-li-ico--w: auto;
  --lst-li-ico--flx-shrink: 0;

  --lst-li-ico--color: var(--text-title);
  --lst-li-ico-isvg--pd: 0;
  --lst-li-ico--font-size: var(--icon-size-sm);
  --lst-ico--h: auto;
  --lst-ico--w: var(--icon-size-sm);

  --lst-li-cnt-ttl--color: var(--text-title);
  --lst-li-cnt-ttl--font-family: var(--font-body);
  --lst-li-cnt-ttl--font-size: var(--font-p);
  --lst-li-cnt-ttl--font-weight: 400;
  --lst-li-cnt-ttl--text-case: normal;
  --lst-li-cnt-ttl--line-height: var(--default-text-line-height);
  --lst-li-cnt-ttl--let-spcing: 0;
  --lst-li-cnt-ttl--margin: 0;

  --lst-li-cnt-txt-wrp--d: flex;
  --lst-li-cnt-txt-wrp--ali-ite: start;
  --lst-li-cnt-txt-wrp--jus-con: start;
  --lst-li-cnt-txt-wrp--flx-wrp: nowrap;
  --lst-li-cnt-txt-wrp--flx-dir: row;
  --lst-li-cnt-txt-wrp--w: 100%;
  --lst-li-cnt-txt-wrp--mg: 0;

  --lst-li-cnt-txt-h4--color: var(--text-title);
  --lst-li-cnt-txt-h4--font-family: var(--font-heading);
  --lst-li-cnt-txt-h4--font-size: var(--font-h4);
  --lst-li-cnt-txt-h4--font-weight: 400;
  --lst-li-cnt-txt-h4--text-case: normal;
  --lst-li-cnt-txt-h4--line-height: var(--default-text-line-height);
  --lst-li-cnt-txt-h4--let-spcing: 0;
  --lst-li-cnt-txt-h4--margin: 0;

  --lst-li-cnt-txt-p--color: var(--text-title);
  --lst-li-cnt-txt-p--font-family: var(--font-body);
  --lst-li-cnt-txt-p--font-size: var(--font-p);
  --lst-li-cnt-txt-p--font-weight: 400;
  --lst-li-cnt-txt-p--text-case: normal;
  --lst-li-cnt-txt-p--line-height: var(--default-text-line-height);
  --lst-li-cnt-txt-p--let-spcing: 0;
  --lst-li-cnt-txt-p--margin: 0;

  --lst-li-cnt-ul--lst-style: none;
  --lst-li-cnt-ul--pd: 0;
  --lst-li-cnt-ul--mg: 0;

  --lst-li-cnt-ul-li--mg: 0 0 var(--space-8xs);
  --lst-li-cnt-ul-li--width: 100%;
}
.bld-list.bld-list--2-col {
  --lst-li--display: grid;
  --lst-li--grd-tmp-col: 1fr 1fr;
}
.bld-list-alt.bld-list--2-col {
  --lst-li--display: grid;
  --lst-li--grd-tmp-col: 1fr 1fr;
}
/* Back-to-top */
.blw-back-to-top {
  --btt-border-radius: 10px;
  --btt-border-bg-color: var(--primary-light);
  --btt-border-bg-color__hover: var(--primary-light__hover);

  --btt-icon-clr: var(--text-light);
  --btt-icon-sz: 30px;
}
.blw-bbt--rounded {
  --btt-border-radius: 50px;
  --btt-rounded-hw: 55px;
}

.bricks-button {
  &:hover {
    text-shadow:
      0.5px 0 0 currentColor,
      -0.5px 0 0 currentColor;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
  }

  &.btn--outline {
    &:hover {
      text-shadow:
        0.5px 0 0 currentColor,
        -0.5px 0 0 currentColor;
      box-shadow: none !important;
    }
  }
}