:root {
    --font-header: "Inter", sans-serif;
    --font-weight-header: 800;
    --font-weight-subheader: 700;
    --font-weight-lightheader: 400;
    --font-normal: "Inter", sans-serif;
    --font-control: "Inter", sans-serif;
    --font-weight-normal: 400;
    --font-weight-control: 400;

    --opacity-gray: rgba(38, 38, 38, 0.4);
    --opacity-dark-gray: rgba(23, 23, 23, 0.6);
    --opacity-gray-hover: rgba(38, 38, 38, 0.2);
    --black: rgb(23, 23, 23);
    --near-black: hsl(164, 64%, 13%);
    --dark-gray: rgb(120, 113, 108);
    --mid-gray: rgb(194, 191, 190);
    --light-gray: rgb(231, 229, 228);
    --near-white: rgb(245, 245, 245);
    --white: rgb(250, 250, 249);
    --background-700: rgb(38, 38, 38);
    --foreground-secondary-700: rgb(52, 216, 171);
    --foreground-secondary-100: rgb(220, 249, 241);
    --bg-accent: #1D9A79;
    --bg-tertiary: #444A4A;
    --bg-tertiary-alt: #232e2b;
    --background-primary-dark: rgb(17, 17, 17);

    --font-3xl: 4rem;
    --font-2xl: 3rem;
    --font-xl: 2.25rem;
    --font-lg: 2rem;
    --font-md: 1.4rem;
    --font-sm: 1.25rem;
    --font-xs: 1rem;

    --section-spacing: 3rem;
    --outer-content-padding: 0.5rem;
    --content-padding: 1.5rem;
    --thin-border: 0.025rem;
    --card-border: 1.5rem;
    --card-border-radius: 2rem;

    --green: rgb(34, 197, 94);
    --red: rgb(255, 87, 51);
}

@media (min-width: 360px) {
    :root {
        --section-spacing: 3rem;
        --outer-content-padding: 0.5rem;
        --content-padding: 2.5rem;
        --thin-border: 0.025rem;
    }
}

@media (min-width: 50em) {
    :root {
        --font-3xl: 3rem;
        --font-2xl: 2.5rem;
        --font-xl: 2rem;
        --font-lg: 1.5rem;
        --font-md: 1.3rem;
        --font-sm: 1.1rem;
        --font-xs: 0.75rem;

        --content-padding: 3.5rem;
        --outer-content-padding: 3.5rem;
        --card-border: 1.75rem;
    }
}

/* style resets */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

body {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

/* element stylings */
h1, h2, h3, h4, p, a {
    margin: 0;
    padding: 0;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

h1, h2, h3, h4 {
    letter-spacing: -0.025em;
}

h1 {
    font-size: var(--font-2xl);
    font-family: var(--font-header);
    font-weight: var(--font-weight-header);
    margin-bottom: 0.5em;
}

h2 {
    font-size: var(--font-xl);
    font-family: var(--font-header);
    font-weight: var(--font-weight-subheader);
    margin-bottom: 0.4em;
}

h3 {
    font-size: var(--font-lg);
    font-family: var(--font-header);
    font-weight: var(--font-weight-subheader);
    margin-bottom: 0.25em;
}

h4 {
    font-size: var(--font-lg);
    font-family: var(--font-header);
    font-weight: var(--font-weight-lightheader);
    margin-bottom: 0.25em;
}

p, span, label, textarea, input, a, ul, ol, button {
    font-family: var(--font-normal);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-normal);
}

p, ul, ol {
    margin-bottom: 1em;
    line-height: 1.4em;
}

li {
    margin-bottom: 0.6em;
    line-height: 1.25em;
}

a {
    color: var(--black);
}

ul, ol {
    margin: 0;
    padding-left: 1em;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    border-radius: 0.5em;
}

input, textarea, select {
    padding: 1em;
    border: 0.15em solid black;
    border-radius: 0.5em;
    font-size: var(--font-size-sm);
    width: 100%;
}

/* stylings */
nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 0.5em;
    background-color: var(--near-black);
    transition: height 1s;
}

.nav-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    flex-basis: 100%;
}

nav a {
    color: var(--white);
}

.nav-home {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    justify-content: center;
    align-items: center;
    text-decoration: none; 
}

.nav-home-text {
    display: inline-block;
    word-wrap: break-word;
    display: none;
}

.nav-home-text * {
    margin: 0;
}

.nav-home .brand {
    letter-spacing: -0.025em;
    text-transform: uppercase;
    font-size: var(--font-md);
    font-family: var(--font-header);
    font-weight: var(--font-weight-subheader);
}

.nav-logo {
    width: 100px;
    height: auto;
    margin-right: 10px;
}

.nav-collapser {
    --nav-btn-color: lightgray;
    background-color: var(--opacity-dark-gray);
    border-radius: 1rem;
    border: 5px solid var(--nav-btn-color);
    transition: all 0.25s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em;
}

.nav-collapser:hover {
    --nav-btn-color: white;
}

.nav-collapser .nav-line {
    transition: transform 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
    transform-origin: center;
}

.nav-collapser[aria-expanded="true"] .nav-line {
    transition: transform 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
}

.nav-collapser[aria-expanded="true"] .top {
    rotate: 45deg;
    transform: translateY(25px);
}

.nav-collapser[aria-expanded="true"] .middle {
    opacity: 0;
}

.nav-collapser[aria-expanded="true"] .bottom {
    rotate: -45deg;
    transform: translateY(-25px);
}

#links {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 100%;
    gap: 0 1.5em;
    padding: 0.5rem;
    z-index: 100;
}

#links[data-visible="true"] {
    display: flex;
}

#links .btn {
    padding: 0.75em 1.25em;
    text-align: center;
}

@media (min-width: 380px) {
    .nav-home-text {
        display: block;
    }
}

@media (min-width: 500px) {
    .nav-home .brand {
        font-size: var(--font-xl);
    }

    .nav-logo {
        width: 100px;
    }
}


@media (min-width: 700px) {
    nav {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #links {
        display: flex;
        flex-grow: 2;
        flex-basis: auto;
    }

    .nav-collapser {
        display: none;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
    padding-block: 15px;
}

.dropdown-content {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 2.75rem;
    transform: translate(-50%, 0);
    background: var(--near-black);
    z-index: 10;
    padding: 0.5em;
    width: 100%;
    min-width: 15em;
    transition: opacity 0.25s ease-in-out, visibility 0.25s;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 0px 0.5em var(--foreground-secondary-700);
}

.dropdown-content * {
    display: block;
    text-align: center;
    text-decoration: none;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content a {
    transition: all 0.25s ease-in;
    border-radius: 0.25em;
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dropdown-content a .svg {
    transition: all 0.25s;
    width: 30px;
    height: 30px;
    flex-grow: 10;
    flex-shrink: 0;
    margin-right: 0.25em;
}

.dropdown-content a:hover .svg {
    transform: rotate(10deg) scale(1.2, 1.2);
}

.dropdown-content a:hover {
    background-color: var(--black);
    color: var(--white);
}

section {
    width: 100%;
    margin-bottom: var(--section-spacing);
    position: relative;
}

.vertical-split-section {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
    gap: 1em;
}

.vertical-split-section > div {
    flex-basis: 50%;
    padding: 2em;
}

.split-restricted {
    max-width: 50em;
}

.vertical-split-section > .split-image {
    padding: 0px;
    order: -1;
}

.split-image img {
    width: 100%;
    height: auto;
    /* min-height: 50vh; */
    object-fit: contain;
    border-radius: 0;
}

@media (min-width: 50em) {
    .vertical-split-section {
        flex-direction: row;
    }

    .vertical-split-section > .split-image {
        order: 0;
    }

    .split-image img {
        height: 100%;
        max-height: 100%;
    }
}

#contact-us-form > div {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}

#user-action-section {
    text-align: center;
    min-height: 60rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

#user-action-section h1 {
    margin: 0;
}

#user-action-section .section {
    padding: 4rem;
    background-color: var(--foreground-secondary-700);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    position: relative;
}

#user-action-section .section.clear {
    background-size: cover;
    background-color: #00000000;
    background-image: url("../images/gym_equipment_large.jpeg");
    background-position: 0 50%;
    background-repeat: no-repeat;
    flex-grow: 10;
}

#user-action-section .section:last-child {
    bottom: 0;
}

#user-action-section .background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}

#card-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    min-width: 150px;
}

.card p {
    margin: 0;
}

.card:first-child {
    background-color: #f5f5f5;
}

.card:nth-child(2) {
    background-color: #d4d4d4;
}

.card:last-child {
    background-color: #a3a3a3;
}

.card svg {
    width: 50px;
    height: 50px;
}

#brands-section {
    text-align: center;
    padding: 2.5rem 1.25rem;
    background-color: white;
    box-shadow: 0 0 5rem white;
}

#slideshow {
    margin: 3rem auto;
    max-width: 60rem;
}

#slideshow-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 2em;
}

#slideshow-pages {
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
}

#slideshow-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25em;
}

#slideshow-pages::-webkit-scrollbar {
    display: none;
}

#slideshow-pages img {
    width: 200px;
    height: auto;
    object-fit: contain;
}

.dot {
    width: 1.25em;
    height: 1.25em;
    margin-inline: 0.25em;
    display: inline-block;
    background-color: var(--light-gray);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.25s;
}

.dot:hover {
    background-color: var(--dark-gray);
}

.dot.active {
    background-color: black;
    border-radius: 0.25em;
}

.service-wrapper {
    width: 100%;
    max-width: 100em;
    margin: 0 auto;
    padding: 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: 0rem;
    margin-top: 3rem;
}

.service-option {
    --padding: calc(var(--card-border) / 1.25) var(--card-border);
    --small-padding: calc(var(--card-border) / 2.25) calc(var(--card-border) / 2);
    --_hover-color: var(--opacity-gray-hover);
    --_background-color: var(--background-color, black);

    box-shadow: 0.25rem 0.25rem 1rem var(--opacity-gray);
    min-height: 30rem;
    position: relative;
    display: grid;
    transition: all 0.1s;
    text-decoration: none;
}

.service-option:hover {
    --_hover-color: var(--opacity-dark-gray);
}

.service-option::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--_background-color);
}

.service-option::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: hsla(180, 4%, 13%, 1);
    background: linear-gradient(90deg, hsla(180, 4%, 13%, 1) 0%, rgba(255, 255, 255, 0) 55%);
    background: -moz-linear-gradient(90deg, hsla(180, 4%, 13%, 1) 0%, rgba(255, 255, 255, 0) 55%);
    background: -webkit-linear-gradient(90deg, hsla(180, 4%, 13%, 1) 0%, rgba(255, 255, 255, 0) 55%);
}

.service-text {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: end;
    width: 100%;
    height: 100%;
    padding: var(--padding);
    border-radius: inherit;
    transition: all 0.1s;
    z-index: 10;
    background-color: var(--_hover-color);
}

.service-option span {
    text-align: right;
    z-index: 1;
    color: var(--white);
    font-size: var(--font-lg);
}

.service-option img {
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (min-width: 30em) {
    .service-grid {
        --columns: 2;
    }
}

@media (min-width: 50em) {
    .service-grid {
        --columns: 3;
    }
}

@media (min-width: 70em) {
    .service-grid {
        --columns: 4;
    }
}

.service-option.secondary {
    --background-color: var(--foreground-secondary-700);
}

.service-option.accent {
    --background-color: var(--bg-accent);
}

.service-option.tertiary {
    --background-color: var(--bg-tertiary);
}

.service-option.tertiary-alt {
    --background-color: var(--bg-tertiary-alt);
}

.service-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em;
    margin: 1em 3em 0 3em;
}

.service-card {
    position: relative;
    display: block;
    /* width: 300px;
    height: 300px; */
    border-radius: 1em;
    box-shadow: 0.5rem 0.5rem 1rem var(--light-gray);
    transition: border-radius 0.25s, box-shadow 0.75s ease-in-out;
}

.service-card:hover {
    border-radius: 0.5em;
    box-shadow: 0.5rem 0.5rem 2rem var(--mid-gray);
}

.service-card::after {
    content: "";
    position: absolute;
    background-color: var(--opacity-gray);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: background-color 0.25s ease-in-out;
    border-radius: inherit;
}

.service-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}

.service-card:hover::after {
    background-color: var(--opacity-gray-hover);
}

.service-card span {
    position: absolute;
    padding: var(--card-border);
    bottom: 0px;
    color: var(--white);
    font-size: var(--font-lg);
    background-color: var(--opacity-dark-gray);
    border-radius: inherit;
    z-index: 2;
    width: 100%;
}

.service-card span span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--font-size-md);
}

body:has(#contact-form)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -100;
    background: hsla(60, 5%, 96%, 1);
}

#contact-form {
    text-align: center;
    max-width: 30em;
    width: 100%;
    padding: 0.5rem;
    margin: 1rem auto 1rem auto;
}

#contact-form form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 375px) {
    #contact-form form {
        grid-template-columns: 1fr;
    }
}

#contact-form form > * {
    max-width: 100%;
}

#contact-form form > .nonfield {
    grid-column: span 2;
}

form ul:not(.nonfield) {
    list-style: none;
    margin: 0;
    padding: 0;
}

#thanks {
    text-align: center;
    max-width: 30em;
    width: 100%;
    padding: 0.5rem;
    margin: 2rem auto 0 auto;
}

main:has(#thanks) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

footer {
    background-color: var(--background-primary-dark);
    padding: 2em var(--section-spacing);
    color: var(--near-white);
    margin-top: var(--section-spacing);
}

footer a {
    color: var(--white);
    word-break: break-all;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: space-around;
    max-width: 80em;
    margin: 0 auto;
}

.copyright {
    display: inline-block;
    vertical-align: top;
    padding-top: 0.75em;
    margin-top: 2em;
    text-align: center;
    position: relative;
    width: 100%;
}

.copyright:after {
    content: "";
    position: absolute;
    border-top: 0.05em solid var(--near-white);
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: inherit;
    margin: 0 auto;
}

/* posts */
#service-post {
    border: var(--thin-border) solid rgb(235, 235, 235);
    box-shadow: 0px 0px 1em var(--light-gray);
    width: 100%;
    max-width: 80em;
    padding-block: var(--content-padding);
}

#service-post section {
    --_section-bg-color: var(--section-bg-color, transparent);
    background-color: var(--_section-bg-color);
    padding-inline: var(--content-padding);
    padding-block: var(--content-padding);
    margin: 0;
    border-radius: 0.25em;
}

#service-post section > *:last-child:not(div) {
    margin-bottom: 0;
}

.split-content {
    --section-bg-color: var(--foreground-secondary-700);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.split-content img, .split-content svg {
    flex-grow: 1;
    object-fit: cover;
    order: 9;
}

.split-content svg {
    width: 40%;
    min-width: 10em;
    max-width: 15em;
    max-height: 12.5em;
}

.split-content > div {
    flex-grow: 10;
    order: 10;
}

@media (min-width: 60em) {
    .split-content {
        flex-direction: row;
    }

    .split-content img {
        flex-grow: 1;
        height: auto;
        width: 30%;
    }

    .split-content img, .split-content svg {
        order: 10;
    }
}

main:has(> #service-post) {
    display: flex;
    justify-content: center;
    padding: var(--outer-content-padding);
    transition: padding 0.25s;
}

.vertical-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-bottom: 1em;
}

.vertical-split .visual {
    width: 50%;
    max-width: 25em;
    border-radius: 0.25em;
}

.vertical-split .content {
    flex-grow: 3;
}

#horizontal_line {
    width: 90%;
    margin: 1em auto;
    border-top: max(1px, 0.01em) solid lightgray;
}

#service-post h1 {
    margin-bottom: 0.5em;
}

#service-post h2 {
    margin-bottom: 0.4em;
}

#service-post h3 {
    margin-bottom: 0.5em;
}

#service-post p, #service-post ul{
    margin-bottom: 1em;
    font-size: var(--font-md);
}

.contact-cta {
    padding: 1em min(10%, 10em);
}

.contact-cta > * {
    text-align: center;
}

.contact-cta .btn {
    display: block; 
    margin: 0 auto; 
    width: fit-content;
}

/* custom styles */
.emphasis {
    text-transform: uppercase;
    letter-spacing: 0.025rem;
}

/* custom elements */
/* buttons */
.btn {
    --_btn-color: var(--btn-color, --black);
    --_hover-color: var(--hover-color, white);
    --_bg-color: var(--bg-color, var(--neutral-100));
    --_bg-hover-color: var(--bg-hover-color, black);

    position: relative;
    z-index: 0;
    padding: 0.75em 2em;
    border: 0.25em solid var(--_bg-hover-color);
    border-radius: 0.5em;
    color: var(--_btn-color);
    background-color: var(--_bg-color);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    font-size: var(--font-sm);
    font-family: var(--font-control);
    font-weight: var(--font-weight-control);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    color: var(--_hover-color);
}

.btn::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: var(--_bg-hover-color);
    transition: all 0.3s;
}

.btn:disabled, .btn.disabled {
    background-color: var(--_bg-hover-color);
    width: 0%;
}

.btn:hover::after {
    width: 100%;
}

.btn.green {
    --hover-color: var(--black);
    --bg-hover-color: var(--green-500);
}

.btn.red {
    --hover-color: var(--black);
    --bg-hover-color: var(--red-500);
}

.btn.blue {
    --hover-color: var(--black);
    --bg-hover-color: var(--blue-500);
}

.btn.white {
    --hover-color: var(--black);
    --bg-hover-color: var(--white);
}

.btn.inverted-white {
    --btn-color: var(--black);
    --bg-color: var(--foreground-secondary-700);
    --hover-color: var(--black);
    --bg-hover-color: var(--white);
    font-weight: bold;
}

.btn-svg {
    stroke: var(--dark-gray);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
}

.dropdown-list strong {
    display: block;
    margin-bottom: 0.25em;
}

.dropdown-list strong::after {
    content: ": ";
}

@media (max-width: 45em) {
    .dropdown-list span {
        display: none;
    }

    .visible {
        display: block !important;
    }

    .dropdown-list strong {
        position: relative;
        cursor: pointer;
    }

    .dropdown-list strong::after {
        content: " \002335";
        display: inline-block;
        position: relative;
        left: 10px;
        font-weight: bold;
        transform: translateY(-10%) rotateX(0deg);
        transition: transform 0.25s ease-in;
    }

    .dropdown-list strong.visible::after {
        transform: translateY(10%) rotateX(180deg);
    }
}

.btn-svg:hover {
    stroke: var(--black);
}

/* generic classes */
.text-md {
    font-size: var(--font-md);
}

.accent-color {
    color: var(--foreground-secondary-700);
}

.bg-primary-700 {
    background-color: var(--foreground-secondary-700);
}

.emphasis {
    font-weight: bold;
}

.centered {
    text-align: center;
}

/* grid */
div:has(.grid-parent-span-2), .grid-span-2 {
    grid-column: span 2;
}

div:has(.grid-parent-row-span-2), .grid-row-span-2 {
    grid-row: span 2;
}

@media (max-width: 375px) {
    div:has(.grid-parent-span-2), .grid-span-2 {
        grid-column: span 1;
    }
}

/* svgs */
.hammer-and-wrench {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4h54.1l109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7H352c-8.8 0-16-7.2-16-16V102.6c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.hammer-and-wrench-white {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4h54.1l109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7H352c-8.8 0-16-7.2-16-16V102.6c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.database-white {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.electrical-plug-white {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 0C78.3 0 64 14.3 64 32v96h64V32c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32v96h64V32c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32v32c0 77.4 55 142 128 156.8V480c0 17.7 14.3 32 32 32s32-14.3 32-32V412.8C297 398 352 333.4 352 256V224c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.lightbulb-white {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.sewing-needle-white {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="white" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M3 21c-.667 -.667 3.262 -6.236 11.785 -16.709a3.5 3.5 0 1 1 5.078 4.791c-10.575 8.612 -16.196 12.585 -16.863 11.918z"/><path d="M17.5 6.5l-1 1"/><path d="M17 7c-2.333 -2.667 -3.5 -4 -5 -4s-2 1 -2 2c0 4 8.161 8.406 6 11c-1.056 1.268 -3.363 1.285 -5.75 .808"/><path d="M5.739 15.425c-1.393 -.565 -3.739 -1.925 -3.739 -3.425"/><path d="M19.5 9.5l1.5 1.5"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.flooring-white {
    background-image: url('data:image/svg+xml;utf8,<svg stroke="none" fill="white" viewBox="0 0 138.211 104.647" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path d="m 60.621782,1.8750012 -17.320507,9.9999998 34.641016,20 L 95.262797,21.875 Z"/><path d="M 79.02483,32.500002 113.66586,52.500001 130.98636,42.5 96.345336,22.500001 Z"/><path d="M 43.301279,33.125002 77.942293,53.125001 95.2628,43.125 60.621785,23.125001 Z"/><path d="M 79.024828,53.750003 113.66585,73.750002 130.98636,63.750001 96.345334,43.750002 Z"/><path d="m 7.5777215,33.750003 34.6410155,20 L 59.539255,43.750002 24.898229,23.750003 Z"/><path d="m 8.6602617,55.625003 34.6410143,20 L 60.621794,65.625002 25.980768,45.625003 Z"/><path d="m 44.383808,76.250003 34.641014,19.99999 17.320518,-9.99999 -34.641026,-20 z"/><path d="m 130.98636,65.000003 v 5 l -16.77925,9.6875 v -5 z"/><path d="m 59.539255,50.000003 -11.90785,6.874999 -4.330127,-2.5 16.237977,-9.375 z"/><path d="m 96.345336,87.500004 v 5 L 79.566093,102.1875 v -5 z"/><path d="m 130.98636,43.750002 v 5.000001 l -11.90785,6.874999 -4.33013,-2.5 z"/><path d="m 43.301278,13.125001 v 5.000001 l 11.90785,6.874999 4.330127,-2.5 z"/><path d="m 7.5777284,35.000001 17.3205076,9.999998 -4.330127,2.5 -12.9903806,-7.499998 z"/><path d="m 8.6602602,56.875002 v 5.000001 L 43.301276,81.875002 v -5 z"/><path d="M 44.383813,82.500005 78.483561,102.1875 v -5 L 44.383813,77.500005 Z"/><path d="M 60.621789,49.375002 77.942295,59.375003 V 54.375002 L 60.621789,44.375001 Z"/><path d="m 79.024822,60.000004 34.099758,19.687499 v -5 l -34.099758,-19.6875 z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}

.assembly-white {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M465 7c-8.5-8.5-22-9.4-31.6-2.1l-104 80c-5.9 4.5-9.4 11.6-9.4 19l0 54.1-85.6 85.6c6.7 4.2 13 9.3 18.8 15.1s10.9 12.2 15.1 18.8L353.9 192l54.1 0c7.5 0 14.5-3.5 19-9.4l80-104c7.4-9.6 6.5-23.1-2.1-31.6L465 7zM121.4 281.4l-112 112c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l112-112c30.2-30.2 30.2-79.1 0-109.3s-79.1-30.2-109.3 0z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
}