/* RESETS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}
/* CUSTOM PROPERTIES */
:root {
    /* COLORS */
    --clr-light: #fafafa;
    --clr-dark: #111111;

    --clr-text-1: #444444;
    --clr-text-2: #dddddd;

    /* COLOR SCALE EXAMPLE */
    --clr-gray-50: #e7e7e7; /* lightest shade */
    --clr-gray-100: #dddddd;
    --clr-gray-200: #bbbbbb;
    --clr-gray-300: #999999;
    --clr-gray-400: #777777; /* standard shade, typically used for primary elements */
    --clr-gray-500: #555555; /* primary color */
    --clr-gray-600: #444444;
    --clr-gray-700: #333333;
    --clr-gray-800: #222222;
    --clr-gray-900: #1f1f1f; /* darkest shade */

    --clr-success: #007e33;
    --clr-success-outline: #62af81;
    --clr-success-bg: #d9ece1;

    --clr-danger: #b61212;
    --clr-danger-outline: #bb2424;
    --clr-danger-bg: #f1d3d3;

    --clr-primary-400: #5D997D;
    --clr-primary-500: #2E784C;
    --clr-primary-600: #222C26; /* footer bg */
    --clr-primary-700: #12261B; /* main bg */

    --clr-secondary-400: #FFF177;
    --clr-secondary-500: #F6E653;

    --clr-tertiary-500: #EBBC44;

    --clr-quaternary-400: ;
    --clr-quaternary-500: ;
    --clr-quaternary-600: ;



    /* MISCELLANEOUS */
    --soft-shadow: 0 0.75rem 1rem #ddd;
    --gradient-generic: linear-gradient(
        45deg,
        #ddd,
        #444
    );

    /* FONTS */
    --font-heading: 'Inter', Helvetica, sans-serif;
    --font-body: 'Inter', Helvetica, sans-serif;
    --font-accent: 'Inter', Helvetica, sans-serif;

    /* 8PT GRID SPACING */
    --gap8: 0.5rem;
    --gap16: 1rem;
    --gap24: 1.5rem;
    --gap32: 2rem;
    --gap40: 2.5rem;
    --gap48: 3rem;
    --gap56: 3.5rem;
    --gap64: 4rem;
    --gap72: 4.5rem;
    --gap80: 5rem;
    --gap88: 5.5rem;
    --gap96: 6rem;
    --gap104: 6.5rem; 
    /* --gap112: 7rem;
    --gap120: 7.5rem;
    --gap128: 8rem;
    --gap136: 8.5rem;
    --gap144: 9rem;
    --gap152: 9.5rem;
    --gap160: 10rem; */



    /* ROUNDED BORDERS */
    --rounded-corners: 0.25rem;
    --rounded: 25rem;

}
/* ------------------------------- */
/* For dark and light mode functionality */
/* @media (prefers-color-scheme: dark) {
    :root {
        insert dark mode colors here
    }
}

html {
    color-scheme: dark light;
} */
/* ------------------------------- */
/* header {
    color: var(--clr-text);
    background-color: var(--clr-base);
}

main {
    color: var(--clr-text);
    background-color: var(--clr-base);
}

footer {
    color: var(--clr-text);
    background-color: var(--clr-base);
} */
body {
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-body);
}
.body-locked {
    overflow: hidden;
}
/* uncomment for production */
main {
    display: grid;
}
/* GLOBAL FONT FAMILY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-heading);
}
p,
a,
li,
span,
input,
details,
dialog,
summary,
label,
select,
textarea,
button,
datalist,
fieldset,
legend,
meter,
optgroup,
option,
output,
progress {
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-body);
}
/* RESPONSIVE CLASSES */
body .desktop,
body .desktop-flex,
body .desktop-grid {
    display: none;
}
/* 1024px */
@media (min-width: 64rem) {

    body .desktop {
        display: block;
    }

    body .desktop-flex {
        display: flex;
    }

    body .desktop-grid {
        display: grid;
    }
    
    .mobile {
        display: none !important;
    }
    
}
/* ADDITIONAL */
.logo img,
.icon--xs,
.icon--s,
.icon--m,
.icon--lg,
.icon--xl {
    -o-object-fit: contain;
       object-fit: contain;
}
img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 112%;
}
p,
a,
li,
span,
input,
details,
dialog,
summary,
label,
select,
textarea,
button,
datalist,
fieldset,
legend,
meter,
optgroup,
option,
output,
progress {
    line-height: 1.5rem;
    letter-spacing: 0.25px;
}
.counter {
    font-size: 3rem;
    font-weight: 400;
    line-height: 100%;
}
a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #111111;
    color: var(--clr-dark);
}
.header__top a {
    color: #fafafa;
    color: var(--clr-light);
}
.--uppercase {
    text-transform: uppercase;
}
select,
input,
textarea,
button {
    font-size: 1rem;
}
.footer__link-list span,
footer h4 {
    font-weight: 600;
    font-size: 1rem;
}
.footer__link-list span,
footer .item-box-2r div span:nth-child(1) {
    color: #fafafa;
    color: var(--clr-light);
}
footer span,
footer a,
.footer__link-list a,
footer .item-box-2r div span:nth-child(2) {
    color: #dddddd;
    color: var(--clr-text-2);
}
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 2rem;
}
.big-quote {
    font-size: 2rem;
    line-height: 112%;
}
.content-box.cta span {
    font-size: 1.5rem; 
    line-height: 1.75rem;
}
.link-underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}
.accordian label {
    font-size: 1.25rem;
}
/* 768px */
@media (min-width: 48rem) {

    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }

}
.--colored-bg p,
.--colored-bg a,
.--colored-bg span,
.--colored-bg h2 {
    color: #fafafa;
    color: var(--clr-light);
}
/* 400px */
@media (max-width: 25rem) {
    .legal p,
    .legal li {
        font-size: 0.88rem;
    }
}
body:has(> aside) main,
body:has(> aside) aside {
    outline: 4px solid red;
}
.aside,
aside {
    display: grid;
    z-index: 1;
}
body:has(> aside) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding-top: 6rem;
}
main:has(> .aside-layout-container) {
    display: grid;
}
/* 1024px */
@media (min-width: 64rem) {

    body:has(> aside) {
        display: flex;
        flex-wrap: nowrap;
        padding-top: 0;
    }

    .aside,
    aside {
        flex-grow: 2;
        flex-shrink: 1;
        flex-basis: 280px; /* Base size of 280px */
        min-width: 280px;
        max-width: 360px;
        padding-top: 6rem;
        height: 100vh;
    }    

    .aside-layout-container:has(> .aside) .main,
    body:has(> aside) main {
        flex-grow: 1;
        flex-shrink: 1;
        padding-top: 6rem;

    }

}
.aside-layout-container:has(> .aside) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-between;
    /* padding-top: 6rem; */
    grid-row-gap: 1rem;
    row-gap: 1rem;
    grid-column-gap: 2rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
}
/* 1024px */
@media (min-width: 64rem) {

    .aside-layout-container:has(> .aside) {
        display: flex;
        padding-top: 0;
    }

    .aside-layout-container .aside {
        flex-grow: 2;
        flex-shrink: 1;
        flex-basis: 320px; /* Base size of 280px */
        min-width: 320px;
        max-width: 400px;
        padding-top: 6rem;
        height: 100vh;
    }    

}
/* fluid container size */
.container--fluid {
    min-width: 14rem;
    width: 90vw;
    max-width: 80rem;
    /* padding-inline: 2rem !important; */
    grid-column: 1 / -1;
    justify-self: center;
}
.aside-layout .container--fluid {
    width: 100%;
}
/* controlled container sizes */
.container {
    width: 14rem;
}
/* 320px */
@media (min-width: 20rem) {

    .container {
        width: 17.5rem;
    }
}
/* 480px */
@media (min-width: 30rem) {

    .container {
       width: 25rem;
    }
}
/* 560px */
@media (min-width: 35rem) {

    .container {
       width: 32rem;
    }
}
/* 768px */
@media (min-width: 48rem) {

    .container {
       width: 44rem;
    }
}
/* 1024px */
@media (min-width: 64rem) {

    .container--fluid {
        /* padding-inline: 4rem !important; */
    }

    .container {
       width: 56rem;
    }
}
/* 1200px */
@media (min-width: 75rem) {

    .container {
       width: 63rem;
    }
}
/* 1440px */
@media (min-width: 90rem) {

    .container {
       width: 70.5rem;
    }
}
/* 1600px */
@media (min-width: 100rem) {

    .container {
       width: 88rem;
    }
}
/* 1800px */
@media (min-width: 112.5rem) {

    .container {
       width: 100.875rem;
    }
    
}
/* 1920px */
@media (min-width: 120rem) {
    
    .container {
        width: 100.875rem;
     }
}
footer {
    display: grid;
    align-content: center;
    width: 100%;
    background-color: #222C26;
    background-color: var(--clr-primary-600);
    transition-duration: 250ms;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-top: 3rem;
    grid-gap: 3rem;
    grid-gap: var(--gap48);
    gap: 3rem;
    gap: var(--gap48);
}
.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.footer-top,
.footer-bottom {
    display: grid;
}
.footer-top .footer__container {
    flex-direction: column;
}
footer .logo img {
    height: 100%;
}
footer .logo img {
    max-width: 22rem;
}
.footer--basic-1 .footer-top .footer__container {
    flex-direction: row;
}
.footer__content-grid {
    display: flex;
    flex-direction: column;
}
.footer__content-wrapper,
.footer__content-wrapper--m-col-2,
.footer__content-wrapper--lg-col-2 {
    display: flex;
    flex-direction: column;
}
.footer--contact-1 .footer__content-wrapper-1 {
    row-gap: 1.5rem !important;
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
}
.footer--contact-1 .footer__content-wrapper-1 {
    flex-direction: row;
    flex-wrap: wrap;
}
.footer__content-wrapper--horizontal {
    display: flex;
    flex-wrap: nowrap;
}
footer ul {
    list-style: none;
}
.footer__link-list,
.footer__link-list ul {
    display: flex;
    flex-direction: column;
}
.footer--contact-1 .footer__link-list {
    width: -moz-fit-content;
    width: fit-content;
}
.footer__sm-list {
    display: flex;
}
.footer__sm-list--vertical {
    display: flex;
    flex-direction: column;
}
.footer__sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 1.5rem */
    height: 1.25rem;
    width: 1.25rem;
    -o-object-fit: contain;
       object-fit: contain;
}
.footer__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer__gallery-item-wrapper {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.footer__gallery-item {
    position: relative;
    height: 6rem;
    width: 6rem;
}
.footer__gallery-item .overlay {
    position: absolute;
    display: grid;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(17,17,17,0.46667);
    opacity: 0;
    transition: opacity 250ms;
}
.footer__gallery-item .overlay-text {
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
}
.footer__gallery-item:hover .overlay {
    opacity: 1;
}
.footer-top span {
    max-width: 40rem;
}
/* 400px */
@media (min-width: 25rem) {

    .footer__gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer--simple-1 .footer__content-wrapper {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        white-space: none;
    }

}
/* 560px */
@media (min-width: 35rem) {
    
    .footer--contact-1 .footer__content-wrapper,
    .footer__content-wrapper--m-col-2 {
        flex-direction: row;
    }

    .footer__content-wrapper--m-col-2 {
        gap: 6rem !important;
    }

    footer .logo img {
        max-width: 22rem;
    }

}
/* 680px */
@media (min-width: 42.5rem) {

    .footer--contact-1 .footer__content-wrapper {
        flex-direction: row;
    }

    .footer--complex-1 .footer__content-wrapper {
        flex-direction: column;
    }

}
/* 768px */
@media (min-width: 48rem) {

    .footer__content-grid {
        flex-direction: row;
    }

    footer .logo img {
        max-width: 20rem;
    }
    
}
/* 880px */
@media (min-width: 55rem) {
    
    .footer__content-wrapper--lg-col-2 {
        flex-direction: row;
    }

    .footer-top span {
        max-width: 25rem;
    }

}
/* 896px */
@media (min-width: 56rem) {

    .footer--simple-1 .footer__container {
        flex-direction: row;
    }

    .footer--simple-1 .footer__content-wrapper {
        width: auto;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    footer {
        padding-top: 6rem;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .footer--complex-1 .footer__container > .footer__content-wrapper {
        flex-direction: row;
    }

    .footer--complex-1 .footer__container > .footer__content-wrapper > .flex-col-1,
    .footer__content-wrapper--lg-col-2 {
        flex-grow: 1;
    }

    .footer__content-wrapper--lg-col-2 > .flex-col-1,
    .footer__content-wrapper--m-col-2 {
        flex-grow: 0;
    }

    .footer--complex-1 .iframe,
    .footer--complex-1 iframe {
        max-width: 32rem;
    }

    footer .logo img {
        max-width: 17.5rem;
    }

    .footer__content-wrapper--horizontal {
        display: flex;
        flex-direction: column;
    }

    .footer__content-wrapper--m-col-2 {
        gap: 0rem !important;
    }
    

}
/* 1440px */
@media (min-width: 90rem) {

    .footer__content-wrapper--m-col-2 {
        gap: 6rem !important;
    }

}
footer .content-centered {
    justify-content: center;
}
footer .content-right {
    justify-content: right;
}
footer .content-left {
    justify-content: left;
}
footer .content-spaced {
    justify-content: space-between;
}
header {
    position: absolute;
    display: grid;
    align-content: center;
    height: 6rem;
    width: 100%;
    background-color: #fafafa;
    background-color: var(--clr-light);
    z-index: 10;
    transition-duration: 250ms;
    border-bottom: 1px solid #dddddd;
    border-bottom: 1px solid var(--clr-gray-100);
}
.header__top {
    background-color: #12261B;
    background-color: var(--clr-primary-700);
    color: #fafafa;
    color: var(--clr-light);
    display: grid;
    align-content: center;
}
.header__bottom {
    background-color: #fafafa;
    background-color: var(--clr-light);
    color: #fafafa;
    color: var(--clr-light);
    display: grid;
    align-content: center;
}
header:has(> .container) {
    justify-content: center;
}
.header__container,
.header__content-wrapper,
.header__content-wrapper-left,
.header__content-wrapper-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__button-options {
    display: flex;
    align-items: center;
}
.header__content-wrapper-left {
    width: 100%;
    gap: 4rem;
}
.header__content-wrapper,
.header__content-wrapper-right {
    gap: 3rem;
}
.header__button-options {
    gap: 1rem;
}
/* multi-level header styles */
.header--multi-level {
    height: auto
}
.header--multi-level .header__container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.header__container-bottom {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.header__container-bottom .header__nav__options {
    width: -moz-fit-content;
    width: fit-content;
}
.header__container-top {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* -------------------------------------------- convert to utility? */
header .content-centered {
    justify-content: center;
}
header .content-right {
    justify-content: right;
}
header .content-left {
    justify-content: left;
}
header .content-spaced {
    justify-content: space-between;
}
/* additional styles */
.header--transparent {
    background-color: rgba(0,0,0,0.00392);
}
.header--fixed {
    position: fixed;
    top: 0;
}
header .logo img {
    height: 3.5rem;
}
.header__sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 1.5rem */
    height: 1.25rem;
    width: 1.25rem;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Currently for single level headers ONLY */
.header--shrink {
    height: 4rem;
}
/* Optional change for shrinking headers */
.header--shrink .logo img {
    height: 1.75rem;
}
/* 1024px */
@media (min-width: 64rem) {

    .header--multi-level .header__container {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .header__content-wrapper-left {
        width: -moz-fit-content;
        width: fit-content;
    }

    .header__content-wrapper-right {
        flex-direction: row;
    }

    .header__sm-list {
        display: flex;
        gap: 1.25rem;
    }
}
.img-container {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    gap: 1rem;
    gap: var(--gap16);
}
.img-container--2-col .img-wrapper,
.img-container--3-col .img-wrapper {
    aspect-ratio: 1.5/1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}
.img-container--3-col .img-wrapper {
    aspect-ratio: 1.5/1;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}
/* 480px */
@media (min-width: 30rem) {
    .img-container {
        flex-direction: row;
    }
    
    .img-container--2-col .img-wrapper,
    .img-container--3-col .img-wrapper {
        width: 50%;
    }
    
    .img-container--3-col .img-wrapper {
        aspect-ratio: 1/1.5;
        width: 30%;
    }
}
/* 928px */
@media (min-width: 58rem) {
    .img-container--3-col .img-wrapper {
        aspect-ratio: 1.5/1;
    }
}
/* 1024px */
@media (min-width: 64rem) {

    .img-container--2-col {
        width: 45%;
        max-width: 35rem;
    }

    .img-container--2-col .img-wrapper {
        aspect-ratio: 1/1.5;
        flex-grow: 1;
        flex-shrink: 1;
        width: 50%;
    }

}
.section__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.aside__container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.aside__container {
    width: 100%;
    grid-column: 1 / -1;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* flex and grid layouts */
/* ------------------------------------------------------------------------------------------------------------------------------ */
.grid-col-1 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid-col-2 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid-col-3--grow {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid-col-4--grow {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.grid--fluid {
    display: flex;
    flex-wrap: wrap;
}
.flex-col-1 {
    display: flex;
    flex-direction: column;
}
.flex-col-2,
.flex-col-2--v2 {
    display: flex;
    flex-direction: column;
    justify-content: left;
}
.flex-col-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-col-left {
    align-items: start;
}
.hero__layout--v1 {
    display: flex;
    flex-direction: column;
    justify-content: left;
}
.grid--fluid.cta {
    justify-content: center;
}
.flex-col-2--custom {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}
/* 560px */
@media (min-width: 35rem) {

    .flex-col-3 {
        flex-direction: row;
        align-items: center;
    }

}
/* 640px */
@media (min-width: 40rem) {

    .grid-col-3--grow {
        display: grid;
        grid-template-columns: repeat(1, minmax(240px, 480px));
    }

    .grid-col-4--grow {
        display: grid;
        grid-template-columns: repeat(1, minmax(240px, 480px));
    }

    .flex-col-2--v2 {
        display: flex;
        flex-direction: row;
    }
}
/* 768px */
@media (min-width: 48rem) {

    .flex-col-2 {
        flex-wrap: nowrap;
    }

    .grid-col-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        justify-content: center;
    }

    .grid-col-3 {
        grid-template-columns: repeat(3, minmax(360px, 1fr));
    }

    .grid-col-3--grow {
        display: grid;
        grid-template-columns: repeat(3, minmax(160px, 480px));
    }

    .grid-col-4--grow {
        display: grid;
        grid-template-columns: repeat(2, minmax(160px, 480px));
    }

    .grid--fluid.cta {
        justify-content: space-between;
    }

}
/* 880px */
@media (min-width: 55rem) {

    .hero__layout--v1 {
        flex-direction: row;
        align-items: center;
        align-items: end;
        justify-content: space-between;
    }
    

}
/* 1024px */
@media (min-width: 64rem) {

    .flex-col-2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
/* 
    .flex-col-2 .flex-col-1:nth-child(1),
    .flex-col-2 .flex-col-1:nth-child(2) {
        min-width: 25rem;
    } */

    .grid-col-3--grow {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
    }

    .grid-col-4--grow {
        grid-template-columns: repeat(4, minmax(240px, 1fr));
    }

    .flex-col-2--custom > .grid--fluid {
        max-width: 58rem;
    }


}
/* best for galleries & portfolios */
.fluid-grid--grow,
.fluid-grid--grow4 {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
/* 640px */
@media (min-width: 40rem) {

    .fluid-grid--grow,
    .fluid-grid--grow4 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

}
/* 768px */
@media (min-width: 48rem) {

    
    .fluid-grid--grow {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .fluid-grid--grow4 {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

}
/* 1312px */
@media (min-width: 82rem) {

    .flex-col-2--custom {
        flex-direction: row;
        -moz-column-gap: 3rem;
             column-gap: 3rem;
    }

    .flex-col-2--custom .grid--fluid {
        width: 60%;
    }

    .flex-col-2--custom .item-box {
        width: 45%;
    }

    .fluid-grid--grow4 {
        grid-template-columns: repeat(4, minmax(280px, 1fr));
    }

    .flex-col-2--custom .fluid-grid--grow4 {
        width: 60%;
    }

    .flex-col-2--custom .fluid-grid--grow4 {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .flex-col-2--custom .fluid-grid--grow4 .item-box {
        width: 100%;
    }

}
/* 1440px */
@media (min-width: 90rem) {

    /* limit to three columns */
    .fluid-grid--grow {
        grid-template-columns: repeat(3, minmax(320px, 1fr));
    }

}
/* image text layouts */
/* ------------------------------------------------------------------------------------------------------------------------------ */
.image-text .content-box,
.image-text--reverse .content-box {
    max-width: 40rem;
}
.image-text--reverse .flex-col-2 {
    flex-direction: column-reverse;
}
.image-text .flex-col-2,
.image-text--reverse .flex-col-2 {
    row-gap: 4rem;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
}
/* 1024px */
@media (min-width: 64rem) {

    .image-text--reverse .flex-col-2,
    .image-text .flex-col-2 {
        flex-direction: row;
    }

    .image-text .content-box,
    .image-text--reverse .content-box {
        max-width: 27rem;
    }

    .image-text .img-wrapper,
    .image-text--reverse .img-wrapper,
    .image-text .slideshow,
    .image-text--reverse .slideshow {
        max-width: 27rem;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .image-text .content-box,
    .image-text--reverse .content-box {
        max-width: 30rem;
    }
    
    .image-text .img-wrapper,
    .image-text--reverse .img-wrapper,
    .image-text .slideshow,
    .image-text--reverse .slideshow {
        max-width: 30rem;
    }

}
/* 1440px */
@media (min-width: 90rem) {

    .image-text .content-box,
    .image-text--reverse .content-box {
        max-width: 35rem;
    }

    .image-text .img-wrapper,
    .image-text--reverse .img-wrapper,
    .image-text .slideshow,
    .image-text--reverse .slideshow {
        max-width: 35rem;
    }

}
/* complex layouts */
/* ------------------------------------------------------------------------------------------------------------------------------ */
section:has(> .bg-blend--left) {
    padding-top: 0;
}
.bg-blend--left {
    position: relative;
    aspect-ratio: 1.75/1;
}
/* 560px */
@media (min-width: 35rem) {

    section:has(> .bg-blend--left) {
        padding-top: 4rem;
    }

    .bg-blend .flex-col-1 {
        align-items: end;
    }

    .bg-blend--left {
        position: absolute;
        height: 100%;
        width: 50%;
        overflow: hidden;
    }

    .bg-blend .content-box.cta {
        max-width: 45%;
    }
    
}
/* 1024px */
@media (min-width: 64rem) {
    
    section:has(> .bg-blend--left) {
        padding-top: 8rem;
    }

}
section {
    position: relative;
    display: grid;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
    grid-row-gap: 4rem;
    row-gap: 4rem;
    background-color: #fafafa;
    background-color: var(--clr-light);
}
section:has(> .container) {
    justify-content: center;
}
section:has(> .slideshow) {
    padding-top: 0 !important;
}
section:has(> .slideshow) {
    padding-bottom: 0;
}
.thin--slider {
    padding: 0 !important;
}
.thin--slider {
    position: relative;
    height: 70vh;
    width: 100%;
}
.thin--slider .slideshow {
    z-index: 1;
}
/* 1024px */
@media (min-width: 64rem) {

    .thin--slider {
        padding: 0 !important;
    }

    .thin--slider {
        height: 60vh;
        width: 100%;
    }

}
/* created for scroller as it cannot function inside a normal section */
.section {
    position: relative;
    display: grid;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
    grid-row-gap: 4rem;
    row-gap: 4rem;
    background-color: #fafafa;
    background-color: var(--clr-light);
}
.thin-section {
    padding: 4rem 0 !important;
}
.hero--landing {
    padding-top: 12rem !important;
}
.hero--landing {
    min-height: 80vh; /* adjust with header size */
}
.hero {
    min-height: auto;
    padding-top: 12rem;
    padding-bottom: 7rem; 
}
.hero--img-bg {
    color: #fafafa;
    color: var(--clr-light);
    background-image: linear-gradient(
        to right,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.5)
        ), url('/assets/im-tree-trimming.webp');
    background-position: center;
    background-size: cover;
}
.--img-bg,
.--img-bg--dark {
    color: #fafafa;
    color: var(--clr-light);
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.66),
        rgba(0,0,0,0.33)
        ), url('/assets/im-tree-stump-grinding-02.jpg');
    background-position: center;
    background-size: cover;
}
.--img-bg--light {
    color: #111111;
    color: var(--clr-dark);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.66),
        rgba(255, 255, 255, 0.66)
        ), url('/assets/placeholder-image.png');
    background-position: center;
    background-size: cover;
}
.banner-image,
.banner-video {
    width: 100%;
    aspect-ratio: 2 / 1;
}
.banner-image {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50),
        rgba(0,0,0,0.25)
        ), url('/assets/placeholder-image.png');
    background-position: center;
    background-size: cover;
}
.banner-video {
    position: relative;

}
.--colored-bg {
    background-image: none;
    background-color: #12261B;
    background-color: var(--clr-primary-700);
    color: #fafafa;
    color: var(--clr-light);
}
.--video-bg {
    color: #fafafa;
    color: var(--clr-light);
    position: relative;
    background-color: transparent;
    background-image: none;
}
.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        );
}
.--video-bg video,
.--video-bg iframe,
.banner-video video {
    position: absolute;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -2;
    top: 0;
    left: 0;
}
section .container--fluid:has(> .divider) section {
    padding: 0;
}
/* 1024px */
@media (min-width: 64rem) {
    
    section {
        /* padding: 7.5rem 0; */
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .hero {
        padding-top: 16rem;
        padding-bottom: 8rem; 
    }

    .hero--landing {
        padding-top: 16rem !important;
    }

    .banner-image,
    .banner-video {
        aspect-ratio: 4 / 1;
    }

}
.divider {
    height: 1px;
    width: 100%;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
.heading-underline {
    height: 0.1875rem;
    width: 5rem;
    background: #5D997D;
    background: var(--clr-primary-400);
}
.ltr-fill {
    width: 0;
    animation-name: accent-fill;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
@keyframes accent-fill {
    from {width: 0}
    to {width: 5rem}
}
/* list styles */
.vertical-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1rem;
}
.--no-style {
    padding-left: 0;
    list-style: none;
}
.list--table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    list-style: none;
}
/* 640px */
@media (min-width: 40rem) {
    .list--table {
        width: 45%;
    }
}
.list--basic-2-col {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    row-gap: 0.25rem;
    justify-items: left;
    max-width: 40rem;
}
.list--basic-2-col .vertical-list {
    width: 100%;
}
/* 648px */
@media (min-width: 40.5rem) {

    .list--basic-2-col .vertical-list {
        width: 40%;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    .list--basic-2-col {
        max-width: 27rem;
    }

    .list--basic-2-col .vertical-list {
        width: 55%;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .list--basic-2-col {
        max-width: 40rem;
    }

    .list--basic-2-col .vertical-list {
        width: 47.5%;
    }

}
/* miscellaneous */
.price {
    font-weight: 600;
    font-size: 1.5rem;
}
/* star ratings */
.star-rating--s {
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: #EBBC44;
    color: var(--clr-tertiary-500);
}
.star-rating--lg {
    font-size: 2rem;
    letter-spacing: 4px;
    color: #EBBC44;
    color: var(--clr-tertiary-500);
}
.accordion-wrapper {
    display: flex;
    flex-direction: column;
}
.accordion-group {
    display: flex;
    flex-direction: column;
}
.accordion {
    padding-bottom: 0.5rem !important;
    padding-top: 1rem !important;
}
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.accordion__title {
    position: relative;
    display: inline;
}
.accordion__intro {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    cursor: pointer;
}
.accordion__arrow,
.accordion__plus {
    height: 1.5rem;
    width: 1.5rem;
    position: relative;
}
.accordion__arrow:before {
    content: '';
    position: absolute;
    border-left: 2px solid #777777;
    border-left: 2px solid var(--clr-gray-400);
    border-top: 2px solid #777777;
    border-top: 2px solid var(--clr-gray-400);
    width: 1rem;
    height: 1rem;
    transform: rotate(-135deg);
    right: 3px;
    top: -4px;
    transition-duration: 200ms;
}
.accordion__active .accordion__arrow:before {
    transform: rotate(-225deg);
    right: 8px;
    top: 3px;
}
.accordion__plus:before {
    content: '';
    position: absolute;
    background-color: #777777;
    background-color: var(--clr-gray-400);
    width: 1.5rem;
    height: 2px;
    right: 0px;
    top: 9px;
    transition-duration: 200ms;
    border: none;
}
.accordion__plus:after {
    content: '';
    position: absolute;
    background-color: #777777;
    background-color: var(--clr-gray-400);
    width: 2px;
    height: 1.5rem;
    right: 10px;
    top: -2px;
    transition-duration: 200ms;
}
.accordion__active .accordion__plus:after {
    opacity: 0;
}
.accordion img {
    width: 100%;
    aspect-ratio: 1.5/1;
}
.accordion__images {
    position: relative;
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.2)
        ), url('/assets/placeholder-image.png');
        background-position: center;
        background-size: cover;
}
@media (max-width: 768px) {
    .accordion__images {
        display: none;
    }
}
.accordion__images img {
    opacity: 0;
    transition: 0.3s;
    aspect-ratio: 1.5/1;
}
.accordion__images img:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}
.accordion__images img.active {
    opacity: 1;
}
.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: all 0.25s ease-out;
    opacity: 0;
}
.accordion__content p {
    padding-bottom: 1rem;
}
@media (min-width: 768px) {
    .accordion__content .accordion__image {
        display: none;
    }
}
@media (max-width: 768px) {
    .accordion__content .accordion__image {
        display: block;
        margin-bottom: 1rem;
    }
}
.accordion__active .accordion__content {
    opacity: 1;
}
/* 768px */
@media (min-width: 48rem) {

    .accordion-wrapper:has(> .accordion__images) .accordion-group {
        width: 50%;
    }

    .accordion-wrapper {
        flex-direction: row;
    }

}
.alert-wrapper {
    /* position: absolute; */
}
.alert {
    position: relative;
    display: inline-flex;
    padding: 1rem 1.5rem;
}
.alert span {
    line-height: 1.5rem;
}
.alert--1r {
    align-items: start;
    gap: 1rem;
}
.alert-header {
    display: flex;
    justify-content: space-between;
}
.alert--2r {
    flex-direction: column;
    gap: 0.5rem;
}
.alert span:nth-child(1) {
    font-weight: 600;
}
.success {
    /* color: var(--clr-light); */
    border: 1px solid #62af81;
    border: 1px solid var(--clr-success-outline);
    background-color: #d9ece1;
    background-color: var(--clr-success-bg);
}
.danger {
    /* color: var(--clr-light); */
    border: 1px solid #bb2424;
    border: 1px solid var(--clr-danger-outline);
    background-color: #f1d3d3;
    background-color: var(--clr-danger-bg);
}
.alert-close {
  color: #111111;
  color: var(--clr-dark);
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}
.alert--1r .alert-close {
    margin-left: 1rem;
}
.alert--2r .alert-close {
    position: absolute;
    right: calc(0% + 1.5rem);
}
/* 
Syntax and order for button classes:
class="btn btn--hierarchy-level btn--style hover-effect" 
*/
/* Base Styling */
button {
    position: relative;
    cursor: pointer;
    background-color: transparent;
}
.btn-wrapper {
    position: relative; 
    width: -moz-fit-content; 
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.btn {
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    transition: 400ms;
    overflow: hidden;
}
.btn img {
    width: 0.88rem;
    height: 0.88rem;
    -o-object-fit: contain;
       object-fit: contain;
}
#backToTop {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 7;
  }
/* Button Hierarchy */
/* 
btn--primary
btn--secondary
btn--tertiary 

These classes exist to define hierarchy for semantic purposes. They hold no visual styles.
*/
.btn--primary { /* No visual styles here */ }
.btn--secondary { /* No visual styles here */ }
.btn--tertiary { /* No visual styles here */ }
/* Button Styling */
.btn--default {
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    background-color: #2E784C;
    background-color: var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--default2 {
    color: #111111 !important;
    color: var(--clr-dark) !important;
}
.btn--default2 {
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
    border: 1px solid #fafafa;
    border: 1px solid var(--clr-light);
    background-color: #fafafa;
    background-color: var(--clr-light);
}
.btn--outline {
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    color: #111111;
    color: var(--clr-dark);
}
.btn--outline2 {
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
    border: 1px solid #fafafa;
    border: 1px solid var(--clr-light);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--link {
    padding: 0;
    overflow: visible;
}
/* 
A ghost button in this template is a button with padding that is transparent and is revealed on hover with a fill or outline.
*/
.btn--ghost { /* No visual styles here */ }
/* Icon Button Styles */
/* 
Remember to include aria-labels when creating icon buttons. Icon buttons exist outside the typical button hierarchy.
*/
.btn--icon {
    height: -moz-fit-content !important;
    height: fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}
.btn--icon {
    border-radius: 5rem;
    background-color: #F6E653;
    background-color: var(--clr-secondary-500);
}
.btn--icon.icon--xs {
    padding: 0.75rem;
}
.btn--icon.icon--s {
    padding: 1.125rem;
}
.btn--icon.icon--s2 {
    padding: 1.5rem;
}
.btn--icon.icon--xs img {
    width: 1rem;
    height: 1rem;
}
.btn--icon.icon--s img {
    width: 1.5rem;
    height: 1.5rem;
}
.btn--icon.icon--s2 img {
    width: 1.75rem;
    height: 1.75rem;
}
.btn-slider .btn--icon {
    padding: 0.75rem;
}
/* arrows w/ hover effects */
.arrow-img--right { /* default */ }
.arrow-img--left { 
    transform: rotate(180deg); 
}
.arrow-img--up { 
    transform: rotate(-90deg); 
}
.arrow-img--down { 
    transform: rotate(90deg); 
}
.arrow,
.arrow-right {
    height: 1rem;
    width: 1rem;
}
.arrow::after {
    display: inline-block;
    position: absolute;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
}
.right::after {
    transform: rotate(-45deg);
    top: 40%;
    right: 45%;
}
.left::after {
    transform: rotate(135deg);
    top: 40%;
    right: 35%;
}
.up::after {
    transform: rotate(-135deg);
    top: 46%;
    right: 38%;
}
.down::after {
    transform: rotate(45deg);
    top: 36%;
    right: 38%;
}
.arrow-right::after {
    display: inline-block;
    position: absolute;
    top: 42%;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
    transition: transform 0.3s ease-out;
    transform: rotate(-45deg);
}
.btn:hover .arrow-right::after,
.btn:focus .arrow-right::after {
    transform: translateX(0.25rem) rotate(-45deg);
}
.arrow-right-2::after {
    display: inline-block;
    content: "➞";
    transition: transform 0.3s ease-out;
}
.btn:hover .arrow-right-2::after,
.btn:focus .arrow-right-2::after {
    transform: translateX(0.5rem);
}
.btn--icon .arrow-right::after {
    top: 40%;
    right: 42%;
}
.btn--link .arrow-right {
    margin-right: 0.75rem;
}
.btn--link .arrow-right::after {
    top: 33%;
}
.arrow-right-3 {
    position: relative;
    width: 1.25rem;
    transition-duration: 250ms;
    padding-bottom: 5px;
}
.arrow-right-3:after {
    border: none;
}
.btn:hover .arrow-right-3,
.btn:hover .arrow-right-3 div:first-child,
.card:hover .card__body .arrow-right-3,
.card:hover .card__body .arrow-right-3 div:first-child {
    width: 1.75rem;
}
/* line */
.arrow-right-3 div:first-child {
    margin-top: 4px;
    width: 1.25rem;
    background: #111111;
    background: var(--clr-dark);
    height: 2px;
    float: left;
    transition-duration: 250ms;
}
/* point */
.arrow-right-3 div:last-child {
    position: absolute;
    width: 0.66rem;
    height: 0.66rem;
    border-bottom: 2px solid #111111;
    border-bottom: 2px solid var(--clr-dark);
    border-right: 2px solid #111111;
    border-right: 2px solid var(--clr-dark);
    transform: rotate(-45deg);
    right: 5%;
}
.card {
    display: inline-flex;
    /* border: 1px solid var(--clr-gray-100); */
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
    box-shadow: 0 0.75rem 1rem #ddd;
    box-shadow: var(--soft-shadow);
    background-color: #fff;
    height: 100%;
}
.card--padded {
    padding: 1.5rem;
    gap: 1rem;
}
.card--horizontal {
    flex-direction: row;
}
.card--vertical {
    flex-direction: column;
}
.card__body {
    display: inline-flex;
    flex-direction: column;
    gap: 1rem;
}
.card__header,
.card__body,
.card__footer {
    padding: 1rem;
}
.card--padded .card__header,
.card--padded .card__body,
.card--padded .card__footer {
    padding: 0;
}
.card__img {
    width: 100%;
    /* height: 100%; */
}
.card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.card--filled {
    background-color: #fafafa;
    background-color: var(--clr-light);
    color: #111111;
    color: var(--clr-dark);
}
.carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.carousel-content {
    position: relative;
    width: 100%;
    aspect-ratio: 2/1;
}
.carousel-content figure {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2/1;
}
.carousel-content figure .flex-col-1 {
    position: relative;
    width: 100%;
}
.carousel-content figure .flex-col-1 .content-box {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition-duration: 300ms;
    transition-property: opacity;
    opacity: 0;
}
.carousel-content figure.show .flex-col-1 .content-box {
    opacity: 1;
}
.carousel-content figure img {
    width: 100%;
    aspect-ratio: 2/1;
    transform-origin: center;
    transition-duration: 300ms;
    transition-property: transform, opacity;
    transform: scale(1.3);
    opacity: 0;
}
.carousel-content figure.show img {
    transform: scale(1);
    opacity: 1;
}
.carousel-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 1.5rem;
}
.carousel-nav .btn-carousel {
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
}
.carousel-nav .btn-carousel.disabled {
    pointer-events: none;
}
/* item box */
/* item boxes are meant for small pieces of content, max-width: 360px  */
.item-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
footer .item-box {
    white-space: nowrap;
}
.item-box {
    display: flex;
    max-width: 22.5rem;
}
.grid-col-3--grow .item-box,
.fluid-grid--grow .item-box {
    max-width: none;
}
.item-box img {
    -o-object-fit: cover;
       object-fit: cover;
}
.item-box-1r {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.item-box-2r {
    flex-direction: row;
    align-items: start;
    gap: 1rem;
}
.item-box-2r div,
.item-box-3r div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
header .item-box-2r div {
    gap: 0.25rem;
}
.item-box-2r div span:nth-child(1),
.item-box-3r div span:nth-child(1),
.content-box > div > span:nth-child(1) {
    font-size: 1rem;
    font-weight: 600;
}
.item-box-2r .reverse-weight span:nth-child(1) {
    font-size: 1rem;
    font-weight: 400;
}
.item-box-2r .reverse-weight span:nth-child(2),
.item-box .star-rating--inline span:nth-child(1) {
    font-size: 1rem;
    font-weight: 600;
}
.item-box-3r {
    flex-direction: column;
    gap: 1rem;
}
.item-box--centered {
    align-items: center;
    text-align: center;
}
/* content box */
/* content boxes are meant for larger pieces of content such as the text content in sections,  max-width: ~560px */
.content-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
.content-box {
    display: flex;
    flex-direction: column;
    max-width: 35rem;
    gap: 1.5rem;
}
.content-box img {
    -o-object-fit: cover;
       object-fit: cover;
}
.content-box > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.content-box--centered {
    align-items: center;
    text-align: center;
}
.item-box .star-rating--inline {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.counter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}
.counter-wrapper--centered {
    align-items: center;
}
.dropdown {
    position: relative;
}
.dropdown__menu {
    list-style: none;
}
.dropdown::after,
.dropdown__submenu::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 30%;
    transition: 100ms;
}
.dropdown__submenu::after {
    margin-right: 1rem;

}
.dropdown:hover::after,
.dropdown__submenu:hover::after {
    top: 40%;
}
.dropdown__item {
    padding: 1.125rem 1rem;
    padding-left: 0rem;
}
.dropdown__menu,
.dropdown__submenu .dropdown__menu {
    opacity: 0;
    position: absolute;
    display: none;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 10rem;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
}
.dropdown__submenu {
    position: relative;
}
.dropdown__submenu .dropdown__menu {
    position: absolute;
    transform: translateX(99%);
    top: 0%;
}
.dropdown__menu,
.dropdown__item {
    border-radius: 0.5rem;
}
.dropdown__menu .dropdown__item {
    display: block;
    padding: 0.75rem 1rem;
    transition-duration: 250ms;
}
.dropdown__menu .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
.dropdown:hover > .dropdown__menu,
.dropdown:focus-within > .dropdown__menu,
.dropdown__submenu:hover > .dropdown__menu,
.dropdown__submenu:focus-within > .dropdown__menu  {
    display: grid;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
@keyframes dropdownopen  {
    from {opacity: 0}
    to {opacity: 1}
  }
/* mega menu */
.dropdown-mega,
.dropdown__mega-sub-nav {
    list-style: none;
}
.dropdown-mega {
    position: static !important;
}
.dropdown-mega__toggle {
    position: relative;
}
.dropdown-mega__toggle::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 43%;
    transition: 100ms;
}
.dropdown-mega__toggle:hover::after {
    top: 45%;
}
.dropdown__mega-menu {
    opacity: 0;
    position: absolute;
    display: none;
    justify-content: center;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 100%;
    left: 0;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
    padding: 2rem;
}
.dropdown__mega-content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;    /* adjust on preference */
    flex-wrap: wrap;
    row-gap: 2rem;
}
.dropdown-mega:hover > .dropdown__mega-menu,
.dropdown-mega:focus-within > .dropdown__mega-menu {
    display: flex;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
.dropdown__mega-sub-nav {
    display: flex;
    flex-direction: column;
}
.dropdown__mega-sub-title {
    color: #111111;
    color: var(--clr-dark);
    font-weight: 600;
    padding: 0.75rem 1rem;
    padding-left: 0.65rem;
}
.dropdown__mega-sub-nav .dropdown__item {
    display: block;
    padding: 0.5rem 0.75rem;
    transition-duration: 250ms;
    min-width: 12rem;
}
.dropdown__mega-sub-nav .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
.dropdown__mega-sub-title,
.dropdown__mega-menu .dropdown__item {
    font-size: 0.875rem;
}
/* 1200px */
@media (min-width: 75rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 13rem;
    }
}
/* 1440px */
@media (min-width: 90rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 14rem;
    }
}
form {
    gap: 1.5rem;
}
/* input[type="range"] */
select,
input,
textarea {
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    background-color: transparent;
    padding: 0.5rem;
    transition: 250ms;
    color: #111111;
    color: var(--clr-dark);
}
.input--textfield {
    -moz-appearance: textfield;
}
.input--textfield::-webkit-outer-spin-button,
.input--textfield::-webkit-inner-spin-button  {
    -webkit-appearance: none;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
input::placeholder,
textarea::placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
textarea {
    width: 100%;
    height: 7.25rem;
    resize: none;
}
input[type="date"] {
    cursor: text;
}
select {
    cursor: pointer;
}
.form-supergroup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* add form layouts here ?  */
.input-group,
.option-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.check-option,
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* floating label */
.input-group--label-float,
.input-group--label-float-2 {
    position: relative;
}
.input-group--label-float input,
.input-group--label-float-2 input {
    width: 100%;
    color: #111111;
    color: var(--clr-dark);
    border: none;
    outline: none;
    background: transparent;
}
.input-group--label-float input {
    border-bottom: 1px solid #999999;
    border-bottom: 1px solid var(--clr-gray-300);
    padding: 0.5rem 0;
}
.input-group--label-float label,
.input-group--label-float-2 label {
    position: absolute;
    font-size: 1rem;
    color: #999999;
    color: var(--clr-gray-300);
    pointer-events: none;
    transition: 500ms;
}
.input-group--label-float label {
    top: 0;
    left: 0;
    padding: 0.5rem 0;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label,
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    color: #999999;
    color: var(--clr-gray-300);
    font-size: 0.75rem;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label {
    top: -1.25rem;
    left: 0;
}
.input-group--label-float-2 input {
    border: 1px solid #999999;
    border: 1px solid var(--clr-gray-300);
    padding: 0.5rem;
}
.input-group--label-float-2 label {
    top: 0.5rem;
    left: 0.25rem;
    padding: 0rem 0.325rem;
    background-color: #fff;
}
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    top: -0.5rem;
    left: 0.5rem;
}
/* custom radio button */
.custom-radio input[type="radio"] {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid #111111;
    border: 1px solid var(--clr-dark);
    border-radius: 50%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    outline: none;
}
.custom-radio input[type="radio"]:checked {
    border-color: #111111;
    border-color: var(--clr-dark);
    background-color: #111111;
    background-color: var(--clr-dark);
    background-clip: content-box;
    padding: 2px;
    background-image: radial-gradient(
      circle,
      #111111 0%,
      #111111 50%,
      transparent 60%,
      transparent 100%
    );
    background-image: radial-gradient(
      circle,
      var(--clr-dark) 0%,
      var(--clr-dark) 50%,
      transparent 60%,
      transparent 100%
    );
}
/* switch toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.25rem;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #111111;
    border: 2px solid var(--clr-dark);
    transition: 400ms;
    border-radius: 2rem;
}
.toggle-switch__slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0;
    bottom: 0;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    transition: 400ms;
    border-radius: 50%;
}
input:checked + .toggle-switch__slider {
    background-color: #111111;
    background-color: var(--clr-dark);
}
input:checked + .toggle-switch__slider:before {
    transform: translateX(1.175rem);
}
/* pill style options */
.option-group--pill {
    display: flex;
    flex-direction: row;
    padding: 0.25rem;
    gap: 0.25rem;
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    width: -moz-fit-content;
    width: fit-content;
}
.pill-option label { 
    display: inline-block; 
    padding: 0.5rem 1rem;
}
.pill-option input[type="radio"],
.pill-option input[type="checkbox"] { 
    display: none; 
}
.pill-option input[type="radio"]:checked + label,
.pill-option input[type="checkbox"]:checked + label  { 
    border: none;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
/* range inputs */
.range-number-input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    gap: 1rem;
    max-width: 40rem;
}
.range-number-input__field {
    display: flex;
    align-items: center;
}
.range-number-input__field input {
    width: 100%;
    margin-left: 0.75rem;
    text-align: center;
}
.range-slider {
    height: 0.25rem;
    position: relative;
    background: #dddddd;
    background: var(--clr-gray-100);
    max-width: 40rem;

}
.range-slider__progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    background: #111111;
    background: var(--clr-dark);
}
.range-input {
    position: relative;
}
.range-input--1pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -20px;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
  }
.range-input--2pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -20px;
    background: none;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
}
input[type="range"]::-webkit-slider-thumb {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -moz-appearance: none;
}
/* multi-step form styles */
.form-steps {
    display: inline-flex;
    flex-direction: row;
    gap: 1rem; 
}
.step-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* required for each instance */
#step-1,
#step-2,
#step-3 {
    position: relative;
}
.step {
    position: relative;
    height: 1.25rem;
    width: 1.25rem;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    color: #111111;
    color: var(--clr-dark);
    border: none;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}
.active-step span:last-child {
    color: #777777;
    color: var(--clr-gray-400);
}
.active-step .step {
    background-color: #bbbbbb;
    background-color: var(--clr-gray-200);
    border: 0.25rem solid #777777;
    border: 0.25rem solid var(--clr-gray-400);
}
.form--1i {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 1rem;
    align-items: start;
}
.form--1i .btn,
.form--1i input {
    height: 3rem;
}
.form--1i input {
    padding-left: 1rem;
    padding-right: 1rem;
}
.form--1i input,
.form--1i .input-group {
    width: 100%;
    max-width: 22.5rem;
}
.icon--xs,
.img--xs {
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1/1;
}
.icon--s,
.img--s {
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1/1;
}
.icon--m,
.img--m {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
}
.icon--lg,
.img--lg {
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1/1;

}
.icon--xl,
.img--xl {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1;
}
/* ------------------------ Default Menu Button and Animation */
.menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}
.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: #111111;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0), opacity 550ms ease;
}
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
.menu-toggle.active span {
    opacity: 1;
    transform: rotate(-45deg) translate(0.1rem, 0);
    background: #111111;
    background: var(--clr-dark);
}
.menu-toggle.active span:nth-last-child(3) {
    transform: rotate(45deg) translate(-0.1rem, -0.425rem);
}
.menu-toggle.active span:nth-last-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/* ------------------------ v2 Menu Button and Animation */
/* .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    width: 50%;
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
    width: 50%;
    align-self: flex-end;
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}

.menu-toggle.active {
    transform: rotate(-45deg);
}
   
.menu-toggle.active span:first-child {
    transform: rotate(-90deg) translateX(1px);
}
   
.menu-toggle.active span:last-child {
    transform: rotate(-90deg) translateX(-1px);
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* ------------------------ v4 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    background-color 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}


.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background-color: transparent;
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) translate(0px, 0px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) translate(0px, 0px);
    transition-delay: 500ms;
} */
/* ------------------------ v5 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
    transform: scaleX(0.5);
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    opacity: 0;
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    opacity: 0;
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) scaleX(0.5) translate(-6px, 11px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-6px, -11px);
    transition-delay: 500ms;
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
    transform: rotate(180deg)
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms ease-out;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}

.menu-toggle.active {
    transform: rotate(0deg)
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* mobile menu */
.mobile-menu {
    position: fixed;
    align-content: start;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 3.25rem;
    padding-top: 6rem;
    top: 0;
    right: 0;
    list-style: none;
    background: #fafafa;
    background: var(--clr-light);
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: none;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0);
    animation-name: menuopen;
    animation-duration: 300ms;
    z-index: 2;
}
@keyframes menuopen {
    from {transform: translate(100%, 0)}
    to {transform: none}
}
.mobile-menu li {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
}
.mobile-menu__item-group,
.mobile-menu__accordion-group {
    list-style: none;
}
.mobile-menu__accordion-group {
    padding-left: 1.25rem;
}
.mobile-menu__item-group li,
.mobile-menu__accordion-group li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
    font-size: 1.25rem;
}
.mobile-menu__accordion-group li {
    padding-left: 0rem;
}
/* mobile menu accordion */
.mobile-menu__accordion {
    padding-bottom: 0.5rem !important;
}
.mobile-menu__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-menu__accordion label {
    position: relative;
    display: block;
    width: 100%;
    max-width: 25rem;
}
.mobile-menu__accordion-group {
    visibility: hidden;
    opacity: 0;
    height: 0;
}
.accordion-toggle {
    width: 100%;
    max-width: 25rem;
    display: none;
}
.mobile-menu__accordion label:before {
    content: '';
    position: absolute;
    border-left: 2px solid #777777;
    border-left: 2px solid var(--clr-gray-400);
    border-top: 2px solid #777777;
    border-top: 2px solid var(--clr-gray-400);
    width: 1rem;
    height: 1rem;
    transform: rotate(-135deg);
    right: 0%;
    transition-duration: 200ms;
}
.accordion-toggle:checked ~ .mobile-menu__accordion-group {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.accordion-toggle:checked ~ label:before {
    transform: rotate(-225deg);
    right: 1%;
}
.mobile-menu__accordion-group li:has(> .mobile-menu__subitem) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.modal {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: rgba(62,62,62,0.33);
    z-index: 30;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
}
.modal__content-wrapper {
    position: relative;
    display: flex;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    border: 1px solid #777777;
    border: 1px solid var(--clr-gray-400);
    overflow: hidden;
}
.modal__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-content: start;
}
.modal__header,
.modal__body {
    padding: 1rem
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
}
.modal__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.modal-close {
    color: #111111;
    color: var(--clr-dark);
    font-size: 2rem;
    line-height: 2rem;
    cursor: pointer;
  }
.header__nav__options {
    list-style: none;
}
.header__nav__options li {
    position: relative;
}
@media (min-width: 64rem) {
    
    .header__nav__options {
        display: flex;
        gap: 2rem;
    }
}
/* active-item styling */
.header__nav__options .active::before {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #2E784C;
    background: var(--clr-primary-500);
    position: absolute;
    left: 0;
    bottom: -0.75rem;
    opacity: 0;
    animation: activeslideup 1000ms forwards;
    z-index: 2;
}
.header__nav__options .dropdown .active::before,
.header__nav__options .dropdown-mega .active::before {
    bottom: 0.25rem;
}
@keyframes activeslideup {
    from {
      opacity: 0;
      transform: translateY(15%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
/* page navigation styles */
.page__nav__wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.page__nav {
  position: relative;
  display: grid;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 2;
  grid-gap: 2rem;
  gap: 2rem;
}
.page__nav__bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #5D997D;
  background-color: var(--clr-primary-400);
  opacity: 0.8;
  z-index: 0;
}
.page__nav__options {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  justify-content: center;
}
.page__nav a {
  color: #fafafa;
  color: var(--clr-light);
}
.page__nav .grid--fluid {
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    width: 100%;
}
.scroller__wrapper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4rem;
    background-color: #fafafa;
    background-color: var(--clr-light);
}
/* 1024px */
@media (min-width: 64rem) {
    
    .scroller__wrapper {
        padding-bottom: 6rem;
    }

}
.scroller {
    width: 625rem;
    overflow: hidden;
}
.scroller__inner {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 2rem;
    padding: 0.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    flex-wrap: nowrap;
}
/* scroller w/ 240px width slides */
.scroller__inner:has(> .slide--240) {
    animation: scroller240 25000ms forwards linear infinite;
    animation: scroller240 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller240 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-18.2% - 5.25rem));
    }
}
/* scroller w/ 280px width slides */
.scroller__inner:has(> .slide--280) {
    animation: scroller280 50000ms forwards linear infinite;
    animation: scroller280 50000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller280 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-21% - 5.25rem));
    }
}
/* scroller w/ 320px width slides */
.scroller__inner:has(> .slide--320) {
    animation: scroller320 25000ms forwards linear infinite;
    animation: scroller320 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller320 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-23.8% - 5.25rem));
    }
}
/* scroller w/ 348px width slides */
.scroller__inner:has(> .slide--348) {
    animation: scroller348 25000ms forwards linear infinite;
    animation: scroller348 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller348 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-25.75% - 5.25rem));
    }
}
/* scroller w/ 360px width slides */
.scroller__inner:has(> .slide--360) {
    animation: scroller360 25000ms forwards linear infinite;
    animation: scroller360 25000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroller360 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-26.60% - 5.25rem));
    }
}
/* scroller slides */
.slide--240,
.slide--240 img {
    width: 240px; 
    height: 160px;
}
.slide--280,
.slide--280 img {
    width: 280px; 
    height: 304px;
}
.slide--320,
.slide--320 img {
    width: 320px; 
    height: 192px;
}
.slide-348,
.slide--348 img {
    width: 348px; 
    height: 208px;
}
.slide--360,
.slide--360 img {
    width: 360px; 
    height: 208px;
}
.slideshow {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero .slideshow {
  height: 100vh;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
  align-items: center;
  justify-content: center;
  /* box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); */
}
.hero .slide {
  width: 100vw;
  height: 100vh;
}
.hero .slide:nth-of-type(1) {
  background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.50),
      rgba(0,0,0,0.25)
      ), url('/assets/placeholder-image.png');
  background-position: center;
  background-size: cover;
}
.hero .slide:nth-of-type(2) {
  background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.50),
      rgba(0,0,0,0.25)
      ), url('/assets/placeholder-image.png');
  background-position: center;
  background-size: cover;
}
.hero .slide:nth-of-type(3) {
  background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.50),
      rgba(0,0,0,0.25)
      ), url('/assets/placeholder-image.png');
  background-position: center;
  background-size: cover;
}
.hero .slide:nth-of-type(4) {
  background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.50),
      rgba(0,0,0,0.25)
      ), url('/assets/placeholder-image.png');
  background-position: center;
  background-size: cover;
}
.flex-col-2 .slideshow {
  aspect-ratio: 1.5/1;
  min-height: 25rem;
  height: 100%;
}
.slide:nth-of-type(1) {
  background: rgb(201, 154, 25);
}
.slide:nth-of-type(2) {
  background: rgb(255, 100, 100);
}
.slide:nth-of-type(3) {
  background: rgb(94, 30, 168);
}
.slide:nth-of-type(4) {
  background: rgb(36, 39, 187);
}
.slideshow img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  -o-object-fit: cover;
     object-fit: cover;
}
.active-slide {
  z-index: 10;
  display: flex;
  /* box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); */
  animation: blurIn 1000ms cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
}
.prev-slide {
  display: flex;
  /* animation: slideoutleft 1750ms ease-in 250ms forwards; */
}
@keyframes slideoutleft {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  75% {
    opacity: 1;
    transform: translateX(-200%);
  }
  100% {
    opacity: 0;
  }
}
.dot-nav {
  position: absolute;
  z-index: 11;
  bottom: 1.5rem;
  width: 100px;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 10px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.dot:hover {
  cursor: pointer;
  background: #fafafa;
  background: var(--clr-light);
}
.active-dot {
  background: #fafafa;
  background: var(--clr-light);
  animation: dotfade 1000ms cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
}
.slideshow .btn-slider {
  position: absolute;
  z-index: 11;
}
.slideshow .btn-slider .btn--icon {
  color: #fafafa;
  color: var(--clr-light);
  border: 1px solid #e7e7e7;
  border: 1px solid var(--clr-gray-50);
  background-color: #e7e7e7;
  background-color: var(--clr-gray-50);
}
.slideshow .btn-slider .btn--icon:hover {
  opacity: 0.75;
}
.slideshow .btn-slider:nth-last-child(2) {
  left: 8px;
}
.slideshow .btn-slider:last-child {
  right: 8px;
}
@keyframes slideIn {
  0% {
    transform: translate(-100vw, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes dotfade {
  0% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: #fafafa;
    background: var(--clr-light);
  }
}
.table--simple-1 {
    margin: 1rem 0;
    min-width: 17.5rem;
}
.table--simple-1 tr {
      border-bottom: 1px solid #5D997D;
      border-bottom: 1px solid var(--clr-primary-400);
}
.table--simple-1 th {
    display: none;
    border-bottom: 1px solid #5D997D;
    border-bottom: 1px solid var(--clr-primary-400);
    padding: 0.5rem 0;
}
.table--simple-1 td {
    display: flex;
    border-bottom: 1px solid #5D997D;
    border-bottom: 1px solid var(--clr-primary-400);
    padding: 0.5rem 0;
    justify-content: space-between;
}
.table--simple-1 td:first-child {
    padding-top: 1rem;
    justify-content: center;
}
.table--simple-1 td {
     padding-bottom: 1rem;
}
.table--simple-1 td:before {
    content: attr(data-th);
    font-weight: bold;
    /* width: 6.5rem; */
    display: inline-block;
    text-align: left;
}
.table--simple-1 th,
.table--simple-1 td {
    text-align: right;
}
.table--simple-1 td:first-child {
     text-align: left;
}
.table--simple-1 {
    border-radius: 0.4rem;
    overflow: hidden;
}
.table--simple-1 tr {
     border-color: #46637f;
}
.table--simple-1 th,
.table--simple-1 td {
    margin: 0.5rem 1rem;
}
@media (min-width: 480px) {
  .table--simple-1 td:before {
        display: none;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        text-align: left;
  }

  .table--simple-1 td {
        min-width: 6.5rem;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        display: table-cell;
        padding: 0.5rem 0;
  }
  .table--simple-1 th:first-child,
  .table--simple-1 td:first-child {
        padding-left: 0;
  }
  .table--simple-1 th:last-child,
  .table--simple-1 td:last-child {
        padding-right: 0;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        padding: 1rem 0;
  }
}
/* tabs */
.tab {
    display: none;
    gap: 2rem;
}
.tab.active {
    display: grid;
}
.tab-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.tab-options:has(> .underline) {
    gap: 1rem;
}
.tab-button {
    display: inline-flex;
}
.tab-button.underline {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.tab-button.pill {
    padding: 0.75rem 1rem;
}
.tab-button.underline.active {
    border-bottom: 2px solid #777777;
    border-bottom: 2px solid var(--clr-gray-400);
}
.tab-button.pill.active {
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
/* 512px */
@media (min-width: 32rem) {

    .tab-options:has(> .underline) {
        gap: 2rem;
    }

}
.form-tab {
    display: none;
}
.tab-group.flex-col-2 {
    flex-wrap: nowrap;
}
.tabs-options--vertical {
    flex-direction: column;
}
.tab-select {
    padding: 1rem 1.25rem;
    text-align: left;
    flex-direction: column;
    gap: 0.5rem;
}
.tab-select.active {
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
.timeline {
    padding: 0 1rem;
}
.timeline__item,
.timeline__finish {
    list-style-type: none;
    position: relative;
    width: 2px;
    background-color: #111111;
    background-color: var(--clr-dark);
}
.timeline__item::after,
.timeline__finish::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #fafafa;
    background-color: var(--clr-light);
    border: 2px solid #111111;
    border: 2px solid var(--clr-dark);
    z-index: 1;
}
.timeline__item-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    bottom: 0;
    width: 100%;
    min-width: 16rem;
    padding-top: 0.25rem;
    padding-left: 2.25rem;
    padding-bottom: 1.5rem;
}
.timeline__finish {
    display: block;

}
.timeline__finish::after {
    display: block;
    background-image: url('/assets/ic-check.png');
    background-position: center;
    background-size: 66%;
    background-repeat: no-repeat;
}
@media (min-width: 35rem) {

    .timeline__item-content {
        min-width: 25rem;
    }

}
@media (min-width: 48rem) {

    .timeline__item-content {
        min-width: 30rem;
    }

}
@media (min-width: 60rem) {

    .timeline__item-content {
        min-width: 36.5rem;
    }

}
.hidden {
  opacity: 0;
  visibility: hidden;
}
.fade {
  opacity: 1;
  transition-duration: 1000ms;
}
.slide-up {
  opacity: 0;
  animation: loadslideup 1000ms forwards;
}
@keyframes loadslideup {
  from {
    opacity: 0;
    transform: translateY(15%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.slide-right {
  opacity: 0;
  animation: loadslideright 1000ms forwards;
}
@keyframes loadslideright {
  from {
    opacity: 0;
    transform: translateX(-25%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}
.slide-left {
  opacity: 0;
  animation: loadslideleft 1000ms forwards;
}
@keyframes loadslideleft {
  from {
    opacity: 0;
    transform: translateX(25%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}
.slide-down {
  opacity: 0;
  animation: loadslidedown 1000ms forwards;
}
@keyframes loadslidedown {
  from {
    opacity: 0;
    transform: translateY(-25%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.zoom-in {
  opacity: 0;
  animation: zoomin 1000ms forwards;
}
@keyframes zoomin {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.blur-in {
  opacity: 0;
  animation: blurin 1000ms forwards;
}
@keyframes blurin {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
/* Underline Hover Effects */
/* 
Can be used for list options and btn-links.
For buttons, be sure to wrap inner text with a <span> element to assign hover effect class. 
*/
.underline-ltr::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-ltr:hover::after,
.underline-ltr:focus-within::after {
    width: 100%;
}
.underline-ltr-2::after {
    content: "";
    height: 0.75rem;
    width: 0;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    left: 0;
    bottom: -0.7rem;
    transition: 250ms;
}
.underline-ltr-2:hover::after,
.underline-ltr-2:focus-within::after {
    bottom: -0.5rem;
    height: 0.1875rem;
    width: 100%;
}
.underline-rtl::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-rtl:hover::after,
.underline-rtl:focus-within::after {
    width: 100%;
}
.underline-middle-expand::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-middle-expand:hover::after,
.underline-middle-expand:focus-within::after {
    width: 100%;
    left: 0;
}
.underline-fade::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
    opacity: 0;
}
.underline-fade:hover::after,
.underline-fade:focus-within::after {
    opacity: 1;
}
.underline-up::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    left: 0;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-up:hover::after,
.underline-up:focus-within::after {
    opacity: 1;
    bottom: -0.5rem;
}
.underline-expand-up::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #5D997D;
    background: var(--clr-primary-400);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-expand-up:hover::after,
.underline-expand-up:focus-within::after {
    width: 100%;
    left: 0;
    bottom: -0.5rem;
    opacity: 1;
}
/* Button Hover Effects */
/* Round Corners */
.round-corners:hover,
.round-corners:focus {
    border: 1px solid #5D997D;
    border: 1px solid var(--clr-primary-400);
    border-radius: 1.5rem;
}
/* Lighten */
.lighten:hover,
.lighten:focus {
    border: 1px solid #5D997D;
    border: 1px solid var(--clr-primary-400);
    background-color: #5D997D;
    background-color: var(--clr-primary-400);
}
.lighten2:hover,
.lighten2:focus {
    background-color: #FFF177;
    background-color: var(--clr-secondary-400);
}
/* Darken */
.darken:hover,
.darken:focus {
    border: 1px solid #222C26;
    border: 1px solid var(--clr-primary-600);
    background-color: #222C26;
    background-color: var(--clr-primary-600);
}
/* Unfill Basic */
.unfill-fade:hover,
.unfill-fade:focus {
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    background-color: transparent;
}
/* Fill Fade */
.fill-fade:hover,
.fill-fade:focus {
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    background-color: #2E784C;
    background-color: var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right */
.fill-right:hover,
.fill-right:focus {
    color: #111111;
    box-shadow: inset 14rem 0 0 0 #2E784C;
    box-shadow: inset 14rem 0 0 0 var(--clr-primary-500);
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right Bezier*/
.fill-right-bez {
    transition: 1000ms cubic-bezier(0.77,0.2,0.05,1.0);
}
.fill-right-bez:hover,
.fill-right-bez:focus {
    color: #111111;
    box-shadow: inset 13rem 0 0 0 #2E784C;
    box-shadow: inset 13rem 0 0 0 var(--clr-primary-500);
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right Diagonal*/
.fill-right-diag:hover,
.fill-right-diag:focus {
    color: #fafafa;
    color: var(--clr-light);
}
.fill-right-diag:before {
    content: "";
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #2E784C;
    border-bottom: 80px solid var(--clr-primary-500);
    transform: translateX(-100%);
    transition-duration: 500ms;
    z-index: -1;
}
.fill-right-diag:hover:before,
.fill-right-diag:focus:before {
    transform: translateX(0);
}
/* Fill Inward */
.fill-in:hover,
.fill-in:focus {
    color: #111111;
    box-shadow: inset 0 0 0 2rem #2E784C;
    box-shadow: inset 0 0 0 2rem var(--clr-primary-500);
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Up */
.fill-up:hover,
.fill-up:focus {
  box-shadow: inset 0 -4rem 0 0 #fafafa;
  box-shadow: inset 0 -4rem 0 0 var(--clr-light);
  color: #111111;
  color: var(--clr-dark);
}
/* Fill Up 2 */
.fill-up-2 {
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px #2E784C;
    box-shadow: inset 0 0 0 1px var(--clr-primary-500);
    transform: translateZ(0);
}
.fill-up-2:hover,
.fill-up-2:focus {
    border: 1px solid #2E784C;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.fill-up-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 120%;
    width: 120%;
    border-radius: 20%;
    background-color: #2E784C;
    background-color: var(--clr-primary-500);
    scale: 0 0;
    translate: 0 140%;
    transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fill-up-2:hover::before,
.fill-up-2:focus::before {
    scale: 1.5 1.5;
    translate: 0 0;
    border-radius: 50%;
}
/* Fill Aware */
/* 
Ensure <span> element is inside designated buttons. Link btn-aware.js file to HTML.
*/
.fill-aware span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #2E784C;
    background-color: var(--clr-primary-500);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.fill-aware:hover span {
    width: 225%;
    height: 562.5px;
}
.fill-aware:hover {
    color: #fafafa;
    color: var(--clr-light);
}
/* Close */
.close:hover,
.close:focus {
  box-shadow: inset -7rem 0 0 0 #2E784C, inset 7rem 0 0 0 #2E784C;
  box-shadow: inset -7rem 0 0 0 var(--clr-primary-500), inset 7rem 0 0 0 var(--clr-primary-500);
  color: #fafafa;
  color: var(--clr-light);

}
/* Diagonal Close */
.close-diag:before, 
.close-diag:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition-duration: 500ms;
}
.close-diag:before {
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #2E784C;
    border-bottom: 80px solid var(--clr-primary-500);
    transform: translateX(-100%);
}
.close-diag:after {
    left: -50px;
    border-left: 50px solid transparent;
    border-top: 80px solid #2E784C;
    border-top: 80px solid var(--clr-primary-500);
    transform: translateX(100%);
}
.close-diag:hover:before,
.close-diag:focus:before {
    transform: translateX(-49%);
}
.close-diag:hover:after,
.close-diag:focus:after {
    transform: translateX(49%);
}
.close-diag:hover,
.close-diag:focus { 
    color: #fafafa; 
    color: var(--clr-light);
}
/* Glow */
.glow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.glow:hover,
.glow:focus {
    box-shadow: 0 0 8px #2E784C;
    box-shadow: 0 0 8px var(--clr-primary-500);
}
/* Shadow */
.shadow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.shadow:hover,
.shadow:focus {
    box-shadow: 0 4px 4px #2E784C;
    box-shadow: 0 4px 4px var(--clr-primary-500);
}
/* Outline Inset */
.outline-inset {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.outline-inset:hover,
.outline-inset:focus {
    box-shadow: inset 0 0 0 4px #5D997D, 0 0 1px transparent;
    box-shadow: inset 0 0 0 4px var(--clr-primary-400), 0 0 1px transparent;
}
/* Outline Change */
.outline-change:hover,
.outline-change:focus {
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
}
/* Outline Outward */
.outline-outward {
    overflow: visible;
}
.outline-outward:before {
    content: '';
    position: absolute;
    border: #2E784C solid 4px;
    border: var(--clr-primary-500) solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-outward:hover:before,
.outline-outward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
/* Outline Inward */
.outline-inward {
    overflow: visible;
}
.outline-inward:before {
    content: '';
    position: absolute;
    border: #2E784C solid 4px;
    border: var(--clr-primary-500) solid 4px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-inward:hover:before,
.outline-inward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
/* Lift */
.lift {
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}
.lift:hover,
.lift:focus {
    transform: translateY(-5px);
}
/* Float */
.float {
    transition-property: transform, box-shadow;
}
.float:hover,
.float:focus {
    box-shadow: 0 0.5em 0.75rem -0.5rem #2E784C;
    box-shadow: 0 0.5em 0.75rem -0.5rem var(--clr-primary-500);
    transform: translateY(-0.25rem);
}
/* Pulse */
.pulse:hover,
.pulse:focus {
    animation: pulse 750ms;
    box-shadow: 0 0 0 2rem transparent;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 #222C26; box-shadow: 0 0 0 0 var(--clr-primary-600); }
}
/* Corners */
.corners {
    border: none;
}
.corners::after,
.corners::before {
  content: '';
  display: block;
  position: absolute;
  width: 20%;
  height: 50%;
  border: 1px solid;
  transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
  border-radius: 2px;
}
.corners::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #5D997D;
  border-bottom-color: var(--clr-primary-400);
  border-right-color: #5D997D;
  border-right-color: var(--clr-primary-400);
}
.corners::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #5D997D;
  border-top-color: var(--clr-primary-400);
  border-left-color: #5D997D;
  border-left-color: var(--clr-primary-400);
}
.corners:hover:after,
.corners:hover:before,
.corners:focus:after,
.corners:focus:before {
  width: 100%;
  height: 100%;
}
.corners:hover,
.corbers:focus {
    border: none;
}
/* Overlapping Outlines */
.overlap {
    overflow: visible;
    border: none;
}
.overlap::after,
.overlap::before {
      content: '';
      display: block;
      position: absolute;
      width: 20%;
      height: 50%;
      border: 1px solid;
      transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
      border-radius: 2px;
}
.overlap::after {
      bottom: 0;
      right: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: #5D997D;
      border-bottom-color: var(--clr-primary-400);
      border-right-color: #5D997D;
      border-right-color: var(--clr-primary-400);
}
.overlap::before {
      top: 0;
      left: 0;
      border-bottom-color: transparent;
      border-right-color: transparent;
      border-top-color: #5D997D;
      border-top-color: var(--clr-primary-400);
      border-left-color: #5D997D;
      border-left-color: var(--clr-primary-400);
}
.overlap:hover:after,
.overlap:hover:before,
.overlap:focus:after,
.overlap:focus:before {
      border-bottom-color: #5D997D;
      border-bottom-color: var(--clr-primary-400);
      border-right-color: #5D997D;
      border-right-color: var(--clr-primary-400);
      border-top-color: #5D997D;
      border-top-color: var(--clr-primary-400);
      border-left-color: #5D997D;
      border-left-color: var(--clr-primary-400);
      width: 102%;
      height: 104%;
}
.overlap:hover,
.overlap:focus {
    border: none;
}
/* Infinite Bounce */
.bounce {
    animation: .7s down infinite alternate;
    -webkit-animation: .7s down infinite alternate;
}
@keyframes down {
    0% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(20px)
    }
}
.parallax {
    background-attachment: fixed;
}
.overflow {
    position: relative;
    height: 100%;
}
/* 1200px */
@media (min-width: 75rem) {

    .overflow > div {
        position: absolute;
        z-index: 2;
    }

}
.--no-whitespace {
    white-space: nowrap;
}
/* miscellaneous */
.--text-centered {
    text-align: center;
}
.--full-width {
    width: 100%;
}
.--full-width-mobile {
    width: 100%;
}
/* 680px */
@media (min-width: 42.5rem) {
    .--full-width-mobile {
        width: auto;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    .nowrap {
        flex-wrap: nowrap;
    }

}
/* 8pt grid spacing */
.--gap8 {
    gap: 0.5rem;
}
.--gap16 {
    gap: 1rem;
}
.--gap24 {
    gap: 1.5rem;
}
.--gap32 {
    gap: 2rem;
}
.--gap40 {
    gap: 2.5rem;
}
.--gap48 {
    gap: 3rem;
}
.--gap56 {
    gap: 3.5rem;
}
.--gap64 {
    gap: 4rem;
}
.--gap72 {
    gap: 4.5rem;
}
.--gap80 {
    gap: 5rem;
}
.--gap88 {
    gap: 5.5rem;
}
.--gap96 {
    gap: 6rem;
}
.--gap104 {
    gap: 6.5rem;
}
/* justify and align styles */
.--content-centered {
    justify-content: center;
}
.--content-right {
    justify-content: right;
}
.--content-left {
    justify-content: left;
}
.--content-spaced {
    justify-content: space-between;
}
.--content-even {
    justify-content: space-evenly !important;
}
.--align-center {
    align-items: center;
}
.--align-top {
    align-items: start;
}
.--align-bottom {
    align-items: end;
}
.--align-right {
    align-items: end;
}
.--justify-right {
    justify-self: end;
}
.--center-to-left {
    text-align: center;
}
.--left-to-center {
    text-align: left;
}
.--reverse-wrap {
    flex-wrap: wrap-reverse;
}
.--wrap-reverse {
    flex-direction: column-reverse;
}
/* 560px */
@media (min-width: 35rem) {

    .--left-to-center {
        text-align: center;
        align-items: center;
    }

}
/* 880px */
@media (min-width: 55rem) {

    .--center-to-left {
        text-align: left;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .--wrap-reverse {
        flex-direction: inherit;
    }

}
/* img wrappers */
.img-wrapper {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
}
.img-clickable img {
    transition-duration: 250ms;
}
.img-clickable:hover img {
    transform: scale(1.1);
}
.img-wrapper .im-overlay {
    position: absolute;
    display: grid;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,0.10),
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.5));
        align-items: end;
        padding: 0.75rem 1.25rem;
}
.im-overlay__item-wrapper {
    position: absolute;
    display: grid;
    justify-content: left;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 0.75rem;
}
.img-wrapper .im-overlay span {
    color: #fafafa;
    color: var(--clr-light);
}
.img-wrapper--full {
    width: 100%;
    aspect-ratio: 1.75/1;
    min-height: 25rem; 
}
.img-wrapper--175-1 {
    aspect-ratio: 1.75/1;
}
.img-wrapper--15-1 {
    aspect-ratio: 1.5/1;
}
.img-wrapper--1-1 {
    aspect-ratio: 1/1;
}
/* 768px */
@media (min-width: 48rem) {

    .img-wrapper--full {
        aspect-ratio: 4/1;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    .img-wrapper--full {
        aspect-ratio: 3/1;
    }
}
/* max-widths */
/* 560px */
@media (min-width: 35rem) {

    .--maxwidth400 {
        max-width: 25rem;
    }

}
/* 768px */
@media (min-width: 48rem) {

    .--maxwidth480 {
        max-width: 30rem;
    }

}
/* 1024px */
@media (min-width: 64rem) {

    .--maxwidth280 {
        max-width: 17.5rem;
    }

    .--maxwidth320 {
        max-width: 20rem;
    }

    .--maxwidth400 {
        max-width: 25rem;
    }

    .--maxwidth432 {
        max-width: 27rem;
    }

    .--maxwidth440 {
        max-width: 27.5rem;
    }

    .--maxwidth480 {
        max-width: 30rem;
    }

    .--maxwidth512 {
        max-width: 32rem;
    }
    
    .--maxwidth520 {
        max-width: 32.5rem;
    }

    .--maxwidth560 {
        max-width: 35rem;
    }

    .--maxwidth640 {
        max-width: 40rem;
    }

    .--maxwidth680 {
        max-width: 42.5rem;
    }

    .--maxwidth720 {
        max-width: 45rem;
    }

    .--maxwidth768 {
        max-width: 48rem;
    }

    .--maxwidth800 {
        max-width: 50rem;
    }

    .--maxwidth880 {
        max-width: 55rem;
    }

    .--maxwidth1024 {
        max-width: 64rem;
    }

    .--maxwidth1200 {
        max-width: 75rem;
    }

    .--maxwidth1440 {
        max-width: 90rem;
    }

}
#insurance-partner .img--lg {
    width: auto;
    height: 3rem;
    aspect-ratio: unset;
}
#insurance-partner .img--lg img {
    -o-object-fit: contain;
       object-fit: contain;
}
/* 1024px */
@media (max-width: 64rem) {

    .desktop-view {
        display: none !important;
    }

}
#callBtn {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    z-index: 7;
}
.credit {
    font-weight: 700;
    color: #fafafa;
    color: var(--clr-light);
}
/* IFRAME STYLES */
iframe {
    width: 100%;
    height: 30rem;
    border-radius: 0.25rem;
    border-radius: var(--rounded-corners);
}
footer iframe {
    width: 100%; 
    height: 19rem;
}
/* 680px */
@media (min-width: 42.5rem) {

    footer iframe {
        min-width: 32rem;
    }
}
.legal section div ul {
    padding-left: 1rem !important;
}
.legal section div ul {
    display: grid;
    grid-gap: 0.25rem;
    gap: 0.25rem;
}
.legal section div {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
}