/* Vars for colors */
:root {
    --background: #282828;
    --text-color: #ffffff;
    --nav-color: #bb87ff;
    --rgb-green: #01ff88;
    --rgb-blue: #5ef0fd;
    --rgb-red: #ff6455;
    --rgb-yellow: #fff43a;
    --rgb-pink: #ff85e6;
    --rgb-orange: #ffc562;
    --chelsea-market: 'chelsea market', fantasy, Arial, sans-serif;
    --font-basic: Basic, Arial, sans-serif;
}
/* Reset and base styles */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body {
    font-family: var(--font-basic);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--text-color);
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
}

nav {
    background: var(--nav-color);
    padding: 10px;
    font-size: 28px;
    font-family: var(--chelsea-market);
}
nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
nav .logo {
    align-self: flex-start;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    text-shadow: #ffffff -1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #ffffff 1px -1px 0px;
}

nav .logo {
    position: relative;
    display: inline-block;
    font-family: var(--chelsea-market);
    font-size: 50px;
    font-weight: bold;
}
nav .logo .logo-image {
    position: relative;
    z-index: 2;
    display: inline-block;
    vertical-align: middle;
    width: 120px;
}
nav .logo .logo-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
nav .logo .logo-image svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 130px;
    height: 89px;
    transform: rotate(12.339594856448457deg);
    vertical-align: middle;
    pointer-events: none;
}
nav .logo .logo-image svg path {
    fill: var(--background);
}

nav ul {
    list-style: none;
    display: flex;
    flex: 1 1 0;
    justify-content: flex-end;
    gap: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav ul li {
    display: inline-block;
    text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828;
    font-weight: 700;
    width: 100%;
    max-width: 150px;
}
nav ul li:nth-child(1) a {
    border-color: var(--rgb-yellow);
    background: var(--rgb-green);
    transform: rotate(355.73366780761944deg);
}
nav ul li:nth-child(2) a {
    border-color: var(--rgb-red);
    background: var(--rgb-blue);
    transform: rotate(4.844515707958294deg);
}
nav ul li:nth-child(3) a {
    border-color: var(--rgb-green);
    background: var(--rgb-orange);
    transform: rotate(356.8970997119477deg);
}
nav ul li a:hover {
    border-color: white;
}
nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
    letter-spacing: 0.05em;
    border: 5px solid white;
    border-radius: 10px;
}
.text-green {
    color: var(--rgb-green);
}
.text-blue {
    color: var(--rgb-blue);
}
.text-red {
    color: var(--rgb-red);
}
.text-yellow {
    color: var(--rgb-yellow);
}
.text-pink {
    color: var(--rgb-pink);
}
.text-orange {
    color: var(--rgb-orange);
}
.bg-green {
    background: var(--rgb-green);
}
.bg-blue {
    background: var(--rgb-blue);
}
.bg-red {
    background: var(--rgb-red);
}
.bg-yellow {
    background: var(--rgb-yellow);
}
.bg-pink {
    background: var(--rgb-pink);
}
.bg-orange {
    background: var(--rgb-orange);
}
main {
    position: relative;
    overflow: hidden;
    font-size: 16px;
}
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2em;
    background: url("data:image/svg+xml,%3Csvg id='comp-mbmnao9y-top' preserveAspectRatio='none' data-bbox='0 100 1920 200' viewBox='0 100 1920 200' height='100%25' width='100%25' xmlns='http://www.w3.org/2000/svg' data-type='shape'%3E%3Cdefs%3E%3Cstyle%3E%23comp-mbmnao9y-top %7B fill: %23BB87FF; %7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath d='M1914.392 288.326c-110.231-4.798-134.428-121.68-301.124-121.68s-190.894 116.883-301.124 121.68h-15.779c-132.623-3.764-163.287-72.283-366.071-72.283s-233.445 68.519-366.071 72.283h-8.154C384.543 282.678 408.027 100 281.156 100c-123.98 0-102.173 182.678-274.845 188.326H0V300h1920v-11.674h-5.608z'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 4;
    transform: scaleY(-1) scaleX(2);
    background-size: 21em 100%;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("Group\ 21.svg");
    background-repeat: no-repeat;
    z-index: 2;
    background-position-x: calc(50% + 30vw);
    background-size: 353%;
    background-position-y: calc(50% + 8vh);
}

h1 {
    font-size: 45px;
    font-weight: 700;
    z-index: 3;
}
header {
    min-height: 68vh;
    display: flex;
    background: url(white_grid_2024x101212312.png);
    background-size: 200%;
    position: relative;
}
header .container {
    display: flex;
    align-items: center;
    width: 100%;
}
header h1 {
    width: 50%;
    max-width: 600px;
    text-align: left;
    line-height: 1.1;
    letter-spacing: 0.45px;
    border: 2px solid white;
    padding: 1em;
    background: var(--background);
}
section.careers {
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 400;
}
section.careers .container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
}
section.careers h1{
    font-size: 64px;
    line-height: 1.2em;
    font-family: var(--chelsea-market);
    margin-top: 1em;
}
section.careers p {
    margin-top: 1em;
    margin-bottom: 2em;
    line-height: 1.6em;
}

section.careers .contact-card {
    max-width: 580px;
    width: 100%;
    background: var(--nav-color);
    border: 4px solid white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    padding: 2em 1em;
    margin: 0 auto;
    margin-top:6em;
    margin-bottom: 8em;
    font-size: 18px;
    font-family: var(--font-basic);
    font-weight: 700;
    line-height: 27px;
    color: black;
}

section.careers .contact-card h2 {
    font-size: 42px;
    line-height: 1em;
    margin-bottom: .6em;
    text-align: left;
    font-family: var(--chelsea-market);
    /* text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828; */
    color: black;
}

section.careers .contact-card input,
section.careers .contact-card textarea {    
    background: white;
    color: black;
    border: 5px solid var(--background);
    border-radius: 5px;
    padding: 3px;
    padding-left: 10px;
    margin-bottom: 1em;
    margin-top: 4px;
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    resize: none;
}

section.careers .contact-card label {
    font-family: var(--chelsea-market);
    color: black;
    font-weight: 400;
    margin-bottom: 9px;
}

section.careers .contact-card button {
    background: var(--rgb-green);
    color: white;
    border: 5px solid var(--rgb-yellow);
    border-radius: 5px;
    padding: 0.2em 2.5em;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin:0;
    margin-left: auto;
    display: block;
    margin-top: 1em;
}

section.mission {
    background: var(--nav-color);
    border: 8px solid var(--rgb-yellow);
    border-radius: 5px;
    padding: 60px;
}
section.mission .wide-background {
    background: var(--background);
}
section.mission .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.mission .container > div:first-child{
    flex: 1;
}

section.mission h2 {
    color: var(--text-color);
    font-size: 56px;
    font-weight: 700;
    font-family: var(--chelsea-market);
    text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828;
    display: inline-block;
    background: var(--nav-color);
    border: 5px solid white;
    padding: 0px 5px;
    margin-top: 1em;
}
section.mission p {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.8em;
    margin-top: 20px;
    max-width: 30vw;
    margin: 2em;
    margin-bottom: 6em;
}
section.mission .image {
    max-width: 50%;
    min-width: 300px;
}
section.services {
    text-align: center;
}
section.services .container {
    max-width: 1400px;
}
section.services h2 {
    color: var(--text-color);
    font-size: 56px;
    font-weight: 700;
    font-family: var(--chelsea-market);
    text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828;
    display: inline-block;
    background: var(--nav-color);
    border: 5px solid white;
    padding: 0px 5px;
    margin: 0 auto;
    margin-top: 1em;
}
section.services ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    justify-content: center;
    padding: 0;
    list-style: none;
    margin-top: 2em;
}
section.services ul li {
    border: 4px solid white;
    border-radius: 16px;
    padding: 2em 1.5em;
    margin: 0;
    font-size: 18px;
    font-family: var(--font-basic);
    font-weight: 700;
    line-height: 27px;
    color: var(--text-color);
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: center;
    min-height: 220px;
    transition: box-shadow 0.2s;
}

section.services ul li .card-image {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1em;
    border: 5px solid white;
    background: var(--background);
    aspect-ratio: 1 / 1;
    max-width: 250px;
}

section.services ul li .card-text {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 4em;
    text-align: left;
}
section.services ul li h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-family: var(--chelsea-market);
    text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828;
}
section.contact .contact-card {
    background: var(--rgb-green);
    border: 4px solid white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    padding: 2em 3em;
    margin: 0 auto;
    margin-bottom: 3em;
    font-size: 18px;
    font-family: var(--font-basic);
    font-weight: 700;
    line-height: 27px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 520px;
}
section.contact .contact-card h2 {
    font-size: 56px;
    line-height: 1em;
    margin-bottom: .6em;
    font-family: var(--chelsea-market);
    text-shadow: 1px 0 #282828, -1px 0 #282828, 0 1px #282828, 0 -1px #282828;
    color: var(--text-color);
}
section.contact .contact-card input,
section.contact .contact-card textarea {
    background: var(--background);
    color: var(--text-color);
    border: 2px solid white;
    border-radius: 5px;
    padding: 3px;
    padding-left: 10px;
    margin-bottom: 1em;
    margin-top: 4px;
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    resize: none;
}
section.contact .contact-card label {
    font-family: var(--chelsea-market);
    font-weight: 400;
    margin-bottom: 9px;
}
section.contact .contact-card button {
    background: var(--rgb-red);
    color: var(--background);
    border: 2px solid white;
    border-radius: 5px;
    padding: 0.2em 2.5em;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    float: right;
}
section.contact .contact-card button:hover {
    background: var(--background);
    color: var(--rgb-green);
}
footer {
    background: var(--nav-color);
    padding: 20px;
    text-align: center;
    font-size: 14px;
    border-top: 5px solid var(--rgb-yellow);
}
footer .wordmark {
    font-family: var(--chelsea-market);
    font-weight: 700;
    font-size: 50px;
    text-shadow: #ffffff -1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #ffffff 1px -1px 0px;
    color: var(--text-color);
}

@media (max-width: 900px) {
    nav {
        text-align: center;
    }
    nav .container {
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
    }
    nav .logo {
        line-height: 1.2em;
    }
    nav .logo-image {
        margin: .7em auto
    }
    nav ul {
        flex-direction: column;
        gap: 0.5em;
        align-items: stretch;
        justify-content: flex-start;
        text-align: left;
        width: 60%;
        margin: 0 auto;
    }
    nav ul li {
        text-align: center;
        font-size: 34px;
        width: auto;
        max-width: 100%;
        line-height: 1.2em;
    }

    header {
        min-height: 50vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    header h1 {
        width: 100%;
        max-width: 100%;
        font-size: 36px;
        line-height: 1.2em;
        margin-bottom: 1em;
        text-align: center;
    }

    section.mission {
        padding: 2em 0;
        text-align: center;
    }

    section.mission p {
        max-width: 100%;
        margin-bottom: 3em;
    }

    section.mission .image {
        display: none;
    }

    section.services ul {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }
    section.services ul li {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 1.5em 1em;
    }
    section.services ul li .card-image,
    section.services ul li .card-text {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding: 0;
    }
    section.services ul li .card-text {
        padding-top: 1em;
        padding-left: 0;
        align-items: center;
        text-align: center;
    }
    section.services ul li .card-image {
        margin: 0 auto;
        aspect-ratio: 1 / 1;
        max-width: 220px;
    }
    section.contact .contact-card {
        max-width: 98vw;
        padding: 1.5em 0.5em;
    }
    header::after {
        background-position-x: -1921px;
        background-size: 1102%;
        background-position-y: -1178px;
    }
}