/*--------------------------------------------------------------
  >> : Buttons
--------------------------------------------------------------*/
.btn {
  position:relative !important;
  padding: unset;
  z-index: 1;
  border-radius: 100px;
}


/* Icons for buttons */
.btn-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn-icon .bi {
  font-size: 1.3rem;
  line-height: 1;
}

.btn-icon-start {
  padding-left: 19px    
}

.btn-icon-start .bi {
  margin-right: 7px;
}

.btn-icon-end {
  padding-right: 19px    
}

.btn-icon-end .bi {
  margin-left: 7px;
}

.btn.btn-white span {
  background: #fff;
}

.btn.btn-black span {
  background: var(--brand-black);
  color:#fff
}




.btn span {
  position:relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-width: 3px;
  color: #000;
  background: #fff;
  background-clip: padding-box !important;
  border: solid 3px transparent;
  margin: auto;
  padding: 20px 24px 18px 24px;
  line-height: 1em;
  border-radius: 100px;
}

.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    height: 100%;
    margin: 0px;
    z-index: -1;
    border-radius: inherit;
    background: -webkit-gradient(linear, left top, right top, from(var(--brand-blue)), to(var(--brand-red)));
    background: -o-linear-gradient(left, var(--brand-blue), var(--brand-red));
    background: linear-gradient(to right, var(--brand-blue), var(--brand-red));
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
            clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    -webkit-transition:all 300ms ease;
    -o-transition:all 300ms ease;
    transition:all 300ms ease;
}


.btn:hover:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  transition:all 300ms ease;
}

.btn.btn-black-outline span {
  border: 2px solid black;
  -webkit-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}


.btn.btn-black-outline:hover span {
  border: 2px solid transparent;
  -webkit-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}

[data-bg-color="color-light-grey"] .btn.btn-black-outline span {
  background-color: #f7f7f7;
}

[data-bg-color="color-dark"] .btn.btn-black-outline span {
  background-color: var(--brand-black);
  border: 2px solid #fff);
}

.btn span svg,
.btn span img {
  height: 20px;
  width: 20px;
  margin-left: 7px;
  margin-bottom: 1px;
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  transition:all 300ms ease;
}

.btn:hover span svg,
.btn:hover span img {
  margin-left: 10px;
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  transition:all 300ms ease;
}

.btn.btn-blue span {
  color: #fff;
  background: var(--brand-blue);
}

.btn.btn-blue:before {
  background: -webkit-gradient(linear, left top, right top, from(#014986), to(var(--brand-red)));
  background: -o-linear-gradient(left, #014986, var(--brand-red));
  background: linear-gradient(to right, #014986, var(--brand-red));
}

.btn.btn-white-outline {
    background:transparent;
}
.btn.btn-white-outline span {
    border: 2px solid #ffffff;
    background:var(--brand-black);
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    color:#fff;
}

.btn.btn-white-outline:hover span {
    border: 2px solid transparent;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

/*--------------------------------------------------------------
>> : Modals
--------------------------------------------------------------*/


/*--------------------------------------------------------------
>> : Accordian
--------------------------------------------------------------*/

.accordion-item {
  border: none;
}

.accordion-button {
  border-radius: 0px !important;
  padding: 20px 0;
  font-variation-settings: "wght" 600;
  font-size: 1.2em;
  border-top: 1px solid black;
}

.accordion-button:not(.collapsed) {
  color: var(--brand-black);
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.accordion-body {
  padding: 0 1.75rem 1.75rem 0;
}

.accordion-button:not(.collapsed)::after {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

h2.accordion-header {
    font-size: 1em;
    line-height: 1em;
    display: block;
}

h2.accordion-header button.accordion-button {
    padding-bottom: 1em;
    padding-top: 1em;
}