
@font-face {
    font-family: Lato;
    font-display: swap;
    font-weight: 400;
    src: local('Lato'), url("https://edkindentistry.exceleron.dev/assets/files/fonts/lato-v23-latin-regular.woff2") format('woff2');
}
@font-face {
    font-family: Lato;
    font-display: swap;
    font-weight: 700;
    src: local('Lato'), url("https://edkindentistry.exceleron.dev/assets/files/fonts/lato-v23-latin-700.woff2") format('woff2');
}
@font-face {
    font-family: Lato;
    font-display: swap;
    font-weight: 300;
    src: local('Lato'), url("https://edkindentistry.exceleron.dev/assets/files/fonts/lato-v23-latin-300.woff2") format('woff2');
}
:root {
    --bs-border-radius: 10px;
    --pad-xs: 40px;
    --pad-sm: 60px; /** These values are arbitrary, waiting on PSD */
    --pad-md: 100px;
    --pad-lg: 168px;
    --btn-fz: 18px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	--plyr-color-main: var(--bs-primary);
	--dropdown-hover-bg: hsl(210 17% 94% / 1);
}

:root {
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0px 0.5px 0.4px hsl(var(--shadow-color) / 0.21),
    0px 0.7px 0.5px -2.5px hsl(var(--shadow-color) / 0.14),
    0px 2.1px 1.6px -5px hsl(var(--shadow-color) / 0.07);
  --shadow-elevation-medium:
    0px 0.5px 0.4px hsl(var(--shadow-color) / 0.22),
    0px 0.9px 0.7px -1.7px hsl(var(--shadow-color) / 0.16),
    0.1px 3.5px 2.6px -3.3px hsl(var(--shadow-color) / 0.11),
    0.2px 10.4px 7.8px -5px hsl(var(--shadow-color) / 0.05);
  --shadow-elevation-high:
    0px 0.5px 0.4px hsl(var(--shadow-color) / 0.23),
    0px 0.8px 0.6px -0.8px hsl(var(--shadow-color) / 0.2),
    0px 2.4px 1.8px -1.7px hsl(var(--shadow-color) / 0.16),
    0.1px 7px 5.3px -2.5px hsl(var(--shadow-color) / 0.13),
    0.3px 15.8px 11.9px -3.3px hsl(var(--shadow-color) / 0.1),
    0.5px 30.5px 22.9px -4.2px hsl(var(--shadow-color) / 0.07),
    0.9px 52.2px 39.2px -5px hsl(var(--shadow-color) / 0.03);
}

* {
	-moz-osx-font-smoothing: inherit;
	-webkit-font-smoothing: inherit;
}
[id] {
    scroll-margin-top: 10ex;
}
body {
    display: flex;
    flex-flow: column;
    height: 100%;
    min-height: 100vh;
}
body > main {
    flex: 1;
}

h1, .h1 {
    line-height: calc(44 / 40);
}

h4, .h4 {
    line-height: calc(30 / 21);/** psd line-height / psd font-size */
}
/** This may be too far reaching so add the modifier .--initial-case to prevent uppercasing */
:is(h1,h2,h3,h4, .h1,.h2,.h3,.h4) {
    text-transform: uppercase;
}
section {
    /* overflow-x: hidden; */
    position:relative;
}
[role="list"]:is(ul, ol, dl) {
    list-style-type: none;
}
p:is(.vstack p) + ul {
    margin-top: unset;
}
/** So long as the first element doesn't have a gap or margin modifier */
:is(.row, .container, [class*="container-"]):not([class*="gx-"],[class*="g-"],[class*="m-"],[class*="mx-"]) {
    --bs-gutter-x: 30px;
}

[data-sal] {
    --sal-duration: 300ms;
}

html.lenis {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}
.max-h-100vh {
    max-height: 100vh;
}
.navbar-brand {
    width: clamp(200px, 16vw, 300px);
}
.navbar-brand > img {
    max-width: 100%;
}
.navbar-toggler {
    display: flex;
    align-items: center;
    gap: 1ch;
}
@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }
}
.navbar-toggler:not(.open) .show-closed,
.navbar-toggler.open .show-open {
    display: block;
}
.navbar-toggler:not(.open) .show-open,
.navbar-toggler.open .show-closed {
    display: none;
}
.navbar-toggler :is(.show-open, .show-closed) {
    min-width: 5ch;
}
.text-center {
    text-align: center !important;
}
.text-balance {
    text-wrap: balance;
}
.breadcrumb > .breadcrumb-item:first-child {
    --sal-delay: 150ms;
}
.breadcrumb > .breadcrumb-item:nth-child(2) {
    --sal-delay: 250ms;
}
.breadcrumb > .breadcrumb-item:nth-child(3) {
    --sal-delay: 350ms;
}
.breadcrumb > .breadcrumb-item:nth-child(4) {
    --sal-delay: 450ms;
}
header :is(h1, .h1) {
    font-size: 40px;
    text-align: center;
}

/** Wrapping in the media query so that we can still use the built in RFS in bootstrap */
@media (min-width: 768px) {
    header :is(h1, .h1) {
        font-size: 60px;
    }
}
@media (min-width: 1200px) {
    header :is(h1, .h1) {
        font-size: 86px;
    }
}
main {
    position: relative;
}
.main--contact {
    min-height: 75vh;
}
.h-75vh {
    height: 100%;
    min-height: 75vh;
}
.map-container {
    position: absolute;
    width: 45%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}
.header-text-white {
    --bs-heading-color: var(--bs-white)
}

/** Modifiers */
.--initial-case {
    text-transform: initial !important;
}
.--color-body {
    color: var(--bs-body-color) !important;
}
.--icons-white path {
    fill: var(--bs-white) !important;
}
.--flow-1 > * + * {
    margin-top: 0.25em;
}
.--flow-2 > * + * {
    margin-top: 0.5em;
}
.--flow-3 > * + *,
.--flow > * + * {
    margin-top: 1em;
}
.fa-ul.--flow > * + * {
    margin-top: 0.5ch;
}
.--fixed-radius {
    border-radius: 1.9rem !important;
}
@media (min-width: 1200px) {
    /** Changes the --bs-body-font-size variable to match the related heading element */
    .--body-h4 {
        --bs-body-font-size: 24px;
        font-size: var(--bs-body-font-size);
    }
    .--body-h5 {
        /** Some elements use the variable directly, but most inherit the font-size property */
        --bs-body-font-size: 21px;
        font-size: var(--bs-body-font-size);
    }
}
.h1-large {
    font-weight: 700;
    font-size: clamp(50px, 6vw, 86px);
}
/** Utilities **/
.pt-sm,
.py-sm {
    padding-top: var(--pad-sm);
}
.pb-sm,
.py-sm {
    padding-bottom: var(--pad-sm);
}
.pt-md,
.py-md {
    padding-top: var(--pad-md);
}
.pb-md,
.py-md {
    padding-bottom: var(--pad-md);
}
.pt-lg,
.py-lg {
    padding-top: var(--pad-lg);
}
.pb-lg,
.py-lg {
    padding-bottom: var(--pad-lg);
}
.mt-sm,
.my-sm {
    margin-top: var(--pad-sm);
}
.mb-sm,
.my-sm {
    margin-bottom: var(--pad-sm);
}    
.mt-md,
.my-md {
    margin-top: var(--pad-md);
}
.mb-md,
.my-md {
    margin-bottom: var(--pad-md);
}
.mt-lg,
.my-lg {
    margin-top: var(--pad-lg);
}
.mb-lg,
.my-lg {
    margin-bottom: var(--pad-lg);
}
@media (min-width: 576px) {
    .pt-sm-mob,
    .py-sm-mob {
        padding-top: var(--pad-sm);
    }
    .pb-sm-mob,
    .py-sm-mob {
        padding-bottom: var(--pad-sm);
    }
    .pt-md-mob,
    .py-md-mob {
        padding-top: var(--pad-md);
    }
    .pb-md-mob,
    .py-md-mob {
        padding-bottom: var(--pad-md);
    }
    .pt-lg-mob,
    .py-lg-mob {
        padding-top: var(--pad-lg);
    }
    .pb-lg-mob,
    .py-lg-mob {
        padding-bottom: var(--pad-lg);
    }
    .mt-sm-mob,
    .my-sm-mob {
        margin-top: var(--pad-sm);
    }
    .mb-sm-mob,
    .my-sm-mob {
        margin-bottom: var(--pad-sm);
    }    
    .mt-md-mob,
    .my-md-mob {
        margin-top: var(--pad-md);
    }
    .mb-md-mob,
    .my-md-mob {
        margin-bottom: var(--pad-md);
    }
    .mt-lg-mob,
    .my-lg-mob {
        margin-top: var(--pad-lg);
    }
    .mb-lg-mob,
    .my-lg-mob {
        margin-bottom: var(--pad-lg);
    }
}
@media (min-width: 768px) {
    .pt-sm-tab,
    .py-sm-tab {
        padding-top: var(--pad-sm);
    }
    .pb-sm-tab,
    .py-sm-tab {
        padding-bottom: var(--pad-sm);
    }
    .pt-md-tab,
    .py-md-tab {
        padding-top: var(--pad-md);
    }
    .pb-md-tab,
    .py-md-tab {
        padding-bottom: var(--pad-md);
    }
    .pt-lg-tab,
    .py-lg-tab {
        padding-top: var(--pad-lg);
    }
    .pb-lg-tab,
    .py-lg-tab {
        padding-bottom: var(--pad-lg);
    }
    .mt-sm-tab,
    .my-sm-tab {
        margin-top: var(--pad-sm);
    }
    .mb-sm-tab,
    .my-sm-tab {
        margin-bottom: var(--pad-sm);
    }    
    .mt-md-tab,
    .my-md-tab {
        margin-top: var(--pad-md);
    }
    .mb-md-tab,
    .my-md-tab {
        margin-bottom: var(--pad-md);
    }
    .mt-lg-tab,
    .my-lg-tab {
        margin-top: var(--pad-lg);
    }
    .mb-lg-tab,
    .my-lg-tab {
        margin-bottom: var(--pad-lg);
    }
}
@media (min-width: 992px) {
    .pt-sm-lap,
    .py-sm-lap {
        padding-top: var(--pad-sm);
    }
    .pb-sm-lap,
    .py-sm-lap {
        padding-bottom: var(--pad-sm);
    }
    .pt-md-lap,
    .py-md-lap {
        padding-top: var(--pad-md);
    }
    .pb-md-lap,
    .py-md-lap {
        padding-bottom: var(--pad-md);
    }
    .pt-lg-lap,
    .py-lg-lap {
        padding-top: var(--pad-lg);
    }
    .pb-lg-lap,
    .py-lg-lap {
        padding-bottom: var(--pad-lg);
    }
    .mt-sm-lap,
    .my-sm-lap {
        margin-top: var(--pad-sm);
    }
    .mb-sm-lap,
    .my-sm-lap {
        margin-bottom: var(--pad-sm);
    }    
    .mt-md-lap,
    .my-md-lap {
        margin-top: var(--pad-md);
    }
    .mb-md-lap,
    .my-md-lap {
        margin-bottom: var(--pad-md);
    }
    .mt-lg-lap,
    .my-lg-lap {
        margin-top: var(--pad-lg);
    }
    .mb-lg-lap,
    .my-lg-lap {
        margin-bottom: var(--pad-lg);
    }
}
@media (min-width: 1200px) {
    .pt-sm-desk,
    .py-sm-desk {
        padding-top: var(--pad-sm);
    }
    .pb-sm-desk,
    .py-sm-desk {
        padding-bottom: var(--pad-sm);
    }
    .pt-md-desk,
    .py-md-desk {
        padding-top: var(--pad-md);
    }
    .pb-md-desk,
    .py-md-desk {
        padding-bottom: var(--pad-md);
    }
    .pt-lg-desk,
    .py-lg-desk {
        padding-top: var(--pad-lg);
    }
    .pb-lg-desk,
    .py-lg-desk {
        padding-bottom: var(--pad-lg);
    }
    .mt-sm-desk,
    .my-sm-desk {
        margin-top: var(--pad-sm);
    }
    .mb-sm-desk,
    .my-sm-desk {
        margin-bottom: var(--pad-sm);
    }    
    .mt-md-desk,
    .my-md-desk {
        margin-top: var(--pad-md);
    }
    .mb-md-desk,
    .my-md-desk {
        margin-bottom: var(--pad-md);
    }
    .mt-lg-desk,
    .my-lg-desk {
        margin-top: var(--pad-lg);
    }
    .mb-lg-desk,
    .my-lg-desk {
        margin-bottom: var(--pad-lg);
    }
}
section,
.section-sm {
    padding-block: var(--pad-sm);
}

.section-md {
    padding-block: var(--pad-md);
}
.section-lg {
    padding-block: var(--pad-lg)
}
/** If there is not text-bg- util, make sure the headings are black */
section:not([class*="text-bg-"]) {
    --bs-heading-color: var(--bs-black);
}
.text-bg-black {
    color: var(--bs-white) !important;
    background-color: rgba(var(--bs-black-rgb), var(--bs-opacity, 1)) !important;
    --bs-heading-color: var(--bs-white);
}
.text-bg-warning {
    color: var(--bs-warning-text) !important;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-opacity, 1)) !important;
    --bs-heading-color: var(--bs-black);
}
.text-bg-light {
    color: var(--bs-black) !important;
    --bs-heading-color: var(--bs-black);
    background-color: rgba(var(--bs-light-rgb), var(--bs-opacity, 1)) !important;
}
/** Defer spacing to gap utilities instead of trying to mix the two */
.vstack:is([class*="gap-"],[class*="row-gap-"]) > * {
    margin-bottom: 0;
}

.text-bg-black .alert-dark {
    --bs-alert-color: rgba(var(--bs-white-rgb), var(--bs-opacity, 0.55));
    --bs-alert-bg: rgba(var(--bs-white-rgb), var(--bs-opacity, 0.15));
    --bs-alert-border-color: transparent;
}

.alert--disclaimer {
    font-style: italic;
}

/** Section Modifiers */


scroll-to-top .btn {
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-border-width: 2px;
    position: fixed;
    z-index: 10;
    bottom: 2.5vh;
    right: 1.5vw;
    aspect-ratio: 1;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 1rem;
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-white);
    background-color: rgba(var(--bs-dark-rgb), 0.7);
    transition: all 0.25s ease;
    transition-property: background-color, color, opacity;
}
scroll-to-top .btn:hover {
    background-color: var(--bs-black);
    color: var(--bs-white);
}
scroll-to-top:not([active]) .btn {
    opacity: 0;
}
.cta-section.cta-section--bg-img {
    height: auto;
    padding-block: var(--pad-md);
}
.cta-section.cta-section--bg-img .cta-bg-img {
    object-fit: cover;
}
.cta-section > *:not(.cta-bg-img) {
    position: relative;
    z-index: 2;
}

.cta-section > .cta-bg-img ~ * {
    color: var(--bs-white);
}
.parallax-img {
    width: 100%;
    object-fit: cover;
}
/** Navigation **/
.navbar {
    --bs-navbar-color: var(--bs-white);
    --bs-navbar-hover-color: rgba(var(--bs-white-rgb), 0.5);
    --bs-navbar-focus-color: rgba(var(--bs-white-rgb), 0.75);
    --bs-navbar-brand-color: var(--bs-white);
    background-color: var(--bs-black);
}

.navbar-nav {
    container-type: inline-size;
}
@media (max-width: 1200px) {
    .nav-item {
        transform: translateX(20px);
        opacity: 0;
        transition: all 0s var(--ease);
        transition-property: transform, opacity;
    }
    .show:not(.hidden) .nav-item {
        transform: translateX(0);
        opacity: 1;
        transition-duration: 0.5s;
        transition-delay: calc(0.1s * var(--i));
    }
    .offcanvas .btn {
        opacity: 0;
        transition: opacity 0s var(--ease);
    }
    .show:not(.hidden) .btn {
        opacity: 1;
        transition-duration: 0.5s;
        transition-delay: calc(0.1s * (var(--i) + 1));
    }
}
@media (min-width: 1200px) {
    .nav-link {
        font-size: clamp(14px, 2cqi, 18px);
    }
}

.nav-item.dropdown.active:has(.active) > .nav-link.dropdown-toggle {
    text-decoration: unset;
}
.dropdown-toggle > .icon-wrapper {
    min-width: 1ch;
}
.scroll-btn svg {
    min-width: 1ch;
}
.btn-prev, .btn-next {
    min-width: 38px;
}
.splide__cards .icon-wrapper {
    min-width: 1em;
}
.offcanvas {
    --bs-offcanvas-bg: var(--bs-black);
    --bs-offcanvas-color: var(--bs-white);
    --bs-offcanvas-padding-y: var(--pad-md);
}
.btn {
    --shine-color: var(--bs-white);
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: calc(1000000000 * 1em);
    --bs-btn-padding-y: 17px;
    --bs-btn-padding-x: calc(var(--bs-btn-padding-y) * 2);
    --bs-btn-line-height: 14px; /** Tries to remove the weird spacing that line-height generates, and use padding instead */
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-white-rgb), 0.25);
    text-transform: uppercase;
}
.btn-dark{
    --shine-color: var(--bs-white);
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: var(--bs-black-rgb);
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-black-rgb), 0.7625);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-black);
    --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(105deg, var(--bs-btn-bg) 50%, var(--shine-color) 50%);
    background-size: 220%;
    background-position-x: 1%;
    transition: all .25s ease-in-out;
    transition-property: background-position-x, color;
}

.btn-label input:checked ~ .btn-dark,
.btn-label:hover > .btn-dark,
.btn-dark:hover {
    background-position: 99%;
}
.--shine-black {
    --shine-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-white);
}
.--shine-white {
    --shine-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-black);
}
.--shine-primary {
    --bs-btn-hover-color: var(--bs-black);
    --shine-color: var(--bs-white);
    --bs-btn-hover-border-color: var(--shine-color);
}

/** Buttons **/
.btn-light {
    --bs-btn-bg: var(--bs-white);
    --bs-btn-color: var(--bs-black);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
    --bs-btn-disabled-color: var(--bs-black);
    --bs-btn-disabled-bg: var(--bs-white);
    --shine-color: var(--bs-black);
    --bs-btn-disabled-border-color: transparent;
    transition: opacity .25s ease;
    background-image: linear-gradient(105deg, var(--bs-btn-bg) 50%, var(--shine-color) 50%);
    background-size: 220%;
    background-position-x: 1%;
    transition: all 0.25s ease-in-out;
    transition-property: background-position-x, color;
}
.btn-light:hover,
.btn-light:focus,
.btn-light:disabled{
    opacity:1
}

:is(.bg-black, .text-bg-black, .navbar) .btn-light {
    --bs-btn-hover-border-color: var(--bs-white);
}

.btn-light:hover {
    background-position-x: 99%;
    color: var(--bs-white);
}
input:is([type="checkbox"],[type="radio"],[type="range"]) {
    accent-color: var(--bs-primary);
}
.form[multipart] .btn-container {
    container-type: inline-size;
}
.form[multipart] .btn-container .btn {
    --bs-btn-padding-x: var(--bs-btn-padding-y);
    font-size: clamp(1rem, 1rem + 0.75cqi, 24px);
}
.form-control {
    border-radius: var(--bs-border-radius-pill);
    padding: 1rem 1.5rem;
    font-weight: 600;
}
.form-control:focus {
    --bs-border-color: var(--bs-white);
    --bs-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary), 0.25);
    border-color: var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
}
.form-floating > .form-control,
.form-floating > label {
    padding: 1rem 1.5rem;
    font-size: 15px;
}

.form-floating > textarea.form-control {
    height: auto;
}
.text-bg-black .form-control {
    color: var(--bs-white);
    --bs-form-control-bg: rgba(var(--bs-white-rgb), var(--bs-opacity, 0.35));
    --bs-border-color: rgba(var(--bs-white-rgb), var(--bs-opacity, 0.35));
    --bs-border-width: 2px;
}
.text-bg-black .form-control.form-select{
    --bs-form-control-bg: #616161;
    --bs-form-select-bg-img: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="fill:rgb(255,255,255);"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}
.text-bg-black select.form-control{
    --bs-form-control-bg: #616161;
}
.text-bg-black .form-control:focus {
    --bs-border-color: var(--bs-white);
    
}
.text-bg-black .form-floating label {
    color: var(--bs-white);
    font-weight: 600;
}
.text-bg-black .form-control:is(:-webkit-autofill, :autofill) {
    border: none !important;
    -webkit-box-shadow: 0 0 0 10000px rgba(var(bs-white-rgb), 0.35) inset;
    -webkit-text-fill-color: var(--bs-white);
    transition: background-color 5000s ease-in-out 0s;
    outline: 1px solid var(--bs-border-color);
    outline-offset: -1px;
}
.form-control:is(:-webkit-autofill, :autofill) {
    border: none !important;
    -webkit-box-shadow: 0 0 0 10000px rgba(var(bs-white-rgb), 0.35) inset;
    -webkit-text-fill-color: var(--bs-black);
    transition: background-color 5000s ease-in-out 0s;
    outline: 1px solid var(--bs-border-color);
    outline-offset: -1px;
}
.appointment-section img {
    min-height: 900px;
}
.appointment-section .btn-list {
    container-type: inline-size;
}
.appointment-section button {
    width: 100%;
    font-size: clamp(1rem, 3vw, 24px);
    font-size: clamp(1rem, 4.5cqi, 24px);
}
.btn-list {
    list-style-type: none;
    padding-left: 0;
}
.btn-list .btn {
    --bs-btn-bg: var(--bs-white);
    --bs-btn-font-size: 24px;
    --bs-btn-padding-x: 1em;
    --bs-btn-padding-y: 0.75em;
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--bs-black);
    --bs-btn-border-radius: 4px;
    --bs-btn-hover-border-color: currentcolor;
    --bs-btn-hover-bg: var(--bs-white);
    text-align: start;
    display: inline-flex;
    justify-content: space-between;
    text-transform: initial;
}
.btn-list > * + * {
    margin-top: 1em;
}
.btn-list small {
    font-size: 0.8rem;
}
fieldset.section:not(.current) {
    display: none;
}

fieldset.section {
    margin-bottom: 15px;
}
.btn-label {
    width: 100%;
    cursor: pointer; 
}
.btn-label > input {
    display: none;
}
.btn-label button {
    pointer-events: none;
} 
.btn-label input:checked ~ .btn-dark,
.btn-label:hover .btn-dark {
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}
.btn-label:hover button {
    border-color: var(--bs-btn-hover-border-color);
}
.appointment-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.appointment-section .form-control {
    --bs-border-width: 2px;
    --bs-border-color: transparent;
}
.appointment-section .form-control + label {
    font-size: 24px;
}
.appointment-section .form-floating > :is(
    .form-control-plaintext~label,
    .form-control:focus~label,
    .form-control:not(:placeholder-shown)~label,
    .form-select~label
) {
    transform: scale(0.6) translate(0.5rem, 0rem);
}

.appointment-section :is(.form-check-input, .form-control):focus {
    --bs-border-color: var(--bs-black);
    border-color: var(--bs-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-black-rgb), var(--bs-opacity, 0.25));
}
.form-check-input {
    --bs-border-color: transparent;
}
.form-check-input:checked {
    background-color: var(--bs-black);
    border-color: var(--bs-black);
}
.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: unset;
}


/** Card **/
.card {
    --bs-card-border-color: transparent;
    --bs-card-color: var(--bs-black);
}
.card--offset {
    --offset-base: 20px;
    --offset-x: 0;
    --offset-y: 0;
    --offset-bg: transparent;
}
@supports selector(*:has(a:hover)) {
    .card--offset:has(a)::after {
        background-size: 300%;
        background-image: linear-gradient(105deg, var(--offset-bg) 50%, var(--bs-primary)50%);
        background-position-x: 1%;
        transition: background-position-x 0.25s ease;
    }
    .card--offset:has(a:hover)::after {
        background-position-x: 100%;
    }
}
.card--offset > * {
    position: relative;
    z-index: 1;
}
.card--offset::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translate(var(--offset-x), var(--offset-y));
    background-color: var(--offset-bg);
    z-index: 0;
    border-radius: inherit;
}
.card--offset img.parallax-img,
.card--offset .simpleParallax {
    border-radius: var(--bs-card-border-radius);
}

.card--offset__black {
    --offset-bg: var(--bs-black);
}
.card--offset__secondary {
    --offset-bg: var(--bs-secondary-bg);
}
.card--offset[data-dir*="top"] {
    --offset-y: calc(var(--offset-base) * -1);
    margin-block-start: var(--offset-base);
}
.card--offset[data-dir*="right"] {
    --offset-x: calc(var(--offset-base));
    margin-inline-end: var(--offset-base);
}
.card--offset[data-dir*="bottom"] {
    --offset-y: calc(var(--offset-base));
    margin-block-end: var(--offset-base);
}
.card--offset[data-dir*="left"] {
    --offset-x: calc(var(--offset-base) * -1);
    margin-inline-start: var(--offset-base);
}


.card-icon {
    position: relative;
}
.card-icon > img,
.card-icon > svg{
    max-width: 120px;
    max-height: 80px;
}
.card-icon::after {
    content: '';
    position: absolute;
    right: calc(var(--bs-card-spacer-x) * -1);
    transform: translateY(-50%);
    top: 50%;
    margin-right: -2px;
    height: 30px;
    border-right: 2px solid var(--bs-black);
}
.card:hover .card-icon::after {
    border-right-color: var(--bs-black);
}

.card--gallery {
    --bs-card-color: var(--bs-white);
    --bs-card-bg: var(--bs-black);
    --bs-card-border-width: 0;
    --bs-border-radius: 0;
}

.card--gallery .card-body {
    text-align: center;
}

/** Aspect Ratio Boxes */
[style*="--aspect-ratio"] {
    position: relative;
}
[style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > img {
    height: auto;
}
[style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}  

/** Count Up */
.countup--wrapper {
    font-size: 72px;
    font-weight: 300;
    width: 2.7em; /** ~195px */
    aspect-ratio: 1;
    display: grid;
    position: relative;
    place-items: center;
    border-radius: calc(100000000 * 1em);
    opacity: 1;
    transition: opacity 0.25s ease;
}
.countup--wrapper:not(.is-visible) {
    opacity: 0;
}
.countup--wrapper__black {
    background-color: var(--bs-black);
    color: var(--bs-white);
}
.countup--wrapper > .countup {
    padding: 0;
    margin: 0;
    grid-area: 1 / 1 / -1 / -1;
}

/** Animations: Use with animInOut inside of utils.esm */
.fade-out {
    opacity: 0;
    transition: opacity 0.25s linear;
}

.dropdown-menu{
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-hover-color: var(--bs-black);
    --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg);
    --bs-dropdown-link-active-bg: var(--dropdown-hover-bg);
}
/** Megamenu Alterations */
.dropdown-megamenu {
    --bs-gutter-y: 0.75rem;
    border: unset;
    box-shadow: var(--shadow-elevation-high);
    padding-inline: var(--bs-gutter-y);
    
}
.dropdown-megamenu > .row {
    padding-left: 0;
}
.dropdown-megamenu li {
    list-style-type: none;
}
.dropdown-megamenu .dropdown-title {
    font-size: 1.1rem;
    color: var(--bs-black);
    padding-inline: var(--bs-dropdown-item-padding-x);
    text-decoration: unset;
}
.dropdown-megamenu a:hover{
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}
[rel="category"] + .dropdown-menu .dropdown-menu {
    display: block;
    position: static;
    border: unset;
    padding-block: 0;
}
.dropdown-item.active:hover, .dropdown-item:active:hover,
.dropdown-item.active:focus, .dropdown-item:active:focus{
    color:var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
}


/** Accordion */
.accordion {
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: inherit;
    --bs-accordion-border-color: currentColor;
    --bs-accordion-active-bg: var(--bs-white);
    --bs-accordion-active-color: inherit;
    --bs-accordion-body-padding-x: 0;
}
.accordion-item {
    border: unset;
    border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-button {
    font-size: inherit;
    padding-block: var(--pad-xs);
    padding-right:30px;
}
.accordion-button:not(.collapsed) {
    box-shadow: unset;
}
.accordion-button:focus {
    border-color: transparent;
    box-shadow: unset;
}
.accordion-body {
    padding-block-start: 0;
}


/* Animations for hero slider */
.splide__hero .splide__animate {
    --transition-properties: opacity, transform;
    transition: all 0.35s ease-out;
    transition-property: var(--transition-properties);
    opacity: 0;
    transform: translateX(20px);
}
.splide__hero .splide__animate:is(.btn) {
    --transition-properties: opacity, transform, background-position-x, color;
    /** We still want the splide animations to have a delay, but not the "shine" */
    transition-delay: 0.3s, 0.3s, 0s, 0s;
}

.splide__hero .splide__title {
    transition-delay: 0.1s;
}
.splide__hero .splide__content {
    transition-delay: 0.2s;
}
.splide__hero .splide__link {
    transition-delay: 0.3s;
}

.splide__slide:is(.is-active, .is-visible) .splide__animate {
    transform: translate(0);
    opacity: 1;
}

/** Splide Cards */

.splide__cards .card {
    transition: border-color 0.25s ease;
}
.splide__cards .card:hover {
    border-color: var(--bs-black);
}
.splide__section--google:not(.active) {
    min-height: 600px;
}
/** Burger Icon */
.burger {
  height: 3em;
  width: 3em;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  transition: .2s all;
  -webkit-tap-highlight-color: transparent; }
  .burger .burger-lines:after {
    left: 0;
    top: -1em; }
  .burger .burger-lines:before {
    left: 1em;
    top: 1em; }
  .burger:after {
    content: '';
    display: block;
    position: absolute;
    height: 150%;
    width: 150%;
    top: -25%;
    left: -25%; }
  .burger .burger-lines {
    top: 50%;
    margin-top: -0.125em; }
    .burger .burger-lines, .burger .burger-lines:after, .burger .burger-lines:before {
      pointer-events: none;
      display: block;
      content: '';
      width: 100%;
      border-radius: 0.25em;
      background-color: white;
      height: 0.25em;
      position: absolute;
              transform: rotate(0); }
    .burger .burger-lines:after {
      left: 0;
      top: -1em; }
    .burger .burger-lines:before {
      left: 0em;
      top: 1em; }
.burger.burger-squeeze .burger-lines,
.burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze .burger-lines:before {
  transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s; }

.burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze .burger-lines:before {
  width: 3em; }

.open > .burger.burger-squeeze .burger-lines,
.open > .burger.burger-squeeze .burger-lines:after,
.open > .burger.burger-squeeze .burger-lines:before,
.burger.burger-squeeze.open .burger-lines,
.burger.burger-squeeze.open .burger-lines:after,
.burger.burger-squeeze.open .burger-lines:before {
  transition: .2s background-color, .2s top, .2s left, .2s transform .15s; }

.open > .burger.burger-squeeze .burger-lines,
.burger.burger-squeeze.open .burger-lines {
  background-color: transparent; }

.open > .burger.burger-squeeze .burger-lines:before,
.open > .burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze.open .burger-lines:before,
.burger.burger-squeeze.open .burger-lines:after {
  left: 0em;
  top: 0px; }
.open > .burger.burger-squeeze .burger-lines:before,
.burger.burger-squeeze.open .burger-lines:before {
          transform: rotate(-45deg); }
.open > .burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze.open .burger-lines:after {
          transform: rotate(45deg); }


/** Insurance Logos */
.insurance-logos {
    display: flex;
    flex-wrap: wrap;
}
.insurance-logo {
    /** whatever would go on a .col-* class */
    --columns: 6;
    border-width: 0;
    --dimensions: 50px;
    --image-size: calc(var(--dimensions) * 2);
    flex: 0 1 auto;
    /* flex: 1 1 max(var(--image-size) + (var(--dimension) * 2), auto); */
    /* max-width: max(var(--image-size) + (var(--dimension) * 2), auto); */
    flex-basis: 50%;
    width: 50%;
    padding: var(--dimensions);
    aspect-ratio: 1;
    background-color: var(--bs-white);
    border-bottom: 1px solid var(--bs-black);
    display: flex;
    align-items:center;
}
@media (min-width: 768px) {
    .insurance-logo {
        flex-basis: calc(100% / 12 * var(--columns));
        --columns: 4; /* 3 items */
    }
    /** Custom Sal animations */
    /** add to the  */
    [data-sal|="offset"] {
        transition: transform var(--sal-duration) var(--sal-easing, ease-out) var(--sal-delay, 0s);
        transform: translate(var(--x, 0), var(--y, 0));
    }
    [data-sal|="offset"]:not(.sal-animate) {
        /** Offset the same amount as the cards offset */
        --x: var(--offset-x);
        --y: var(--offset-y);
    }
    
    [data-sal-section] [data-sal-item="slide-up"]:not([data-sal]) {
        opacity: 0;
        transform: translateY(20%);
    }
    [data-sal^="blur"] {
        filter: blur(5px);
        transition: filter var(--sal-delay) var(--sal-easing);
    }
    
    .sal-animate[data-sal^="blur"] {
        filter: blur(0);
    }
}
@media (min-width: 992px) {
    .insurance-logo {
        --columns: 3; /* 4 items */
    }
}
@media (min-width: 1200px) {
    .insurance-logo {
        --columns: 2.4; /* 5 / 12, 5 items should fit per row, so we have to math it */
    }
}
@media (min-width: 1500px) {
    .insurance-logo {
        --columns: 2; /* 6 items */
        /* flex-basis: calc(100% / 12 * var(--columns)); */
    }
}
.insurance-logo[data-final-row="overflow"],
.insurance-logo:not([data-row-end]) {
    border-right: 1px solid var(--bs-black);
}
.insurance-logo[data-row-index="0"] {
    border-top: 1px solid var(--bs-black);
}
.insurance-logo img {
    width: 100%;
    min-width: calc(var(--dimensions) * 2);
}

