@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700;800&display=swap");

:root {
    --primary: rgba(252, 252, 252, 1);
    --secondary: rgba(224, 224, 224, 0.6);
    --third: rgba(229, 229, 238, 0.8);
    --main: rgb(21, 21, 44);
    --accent: rgba(102, 16, 242, 0.8);
    --accent-alt: rgba(102, 16, 242, 0.05);
    --active: rgba(128, 135, 226, 0.9);
    --alt: rgba(27, 27, 27, 0.7);
    --line: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
}

* {
    font-family: "Inter", sans-serif !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    /* border: 1px solid red; */
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--main);
}

::selection {
    background: var(--accent);
}

.no-scroll {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important; 
}

.no-scroll::-webkit-scrollbar {
    display: none !important;
}

.scroll {
    overflow-y: visible !important;
    max-height: 100% !important;
    height: 100% !important;
}

.menu-container {
    box-sizing: border-box;
    padding: 2rem;
    min-width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

header {
    position: fixed;
    justify-content: space-between !important;
    align-items: flex-end !important;
    overflow: visible !important;
    padding: 1.5rem 2rem !important;
    top: 0;
    background: linear-gradient(var(--main), transparent);
    transition: opacity 2s ease, transform 2s ease;
}

header.menu-container {
    position: fixed !important;
    z-index: 10 !important;
}

.menu a:not(.logo-menu, .gradient-text) {
    color: var(--third);
    background: linear-gradient(to right, transparent, transparent),
    linear-gradient(to right, var(--accent-alt), var(--active));
    background-size: 100% 0.2rem, 0 0.2rem;
    background-position: 85% 85%, 0 85%;
    background-repeat: no-repeat;
    font-size: 1.1rem;
    white-space: nowrap;
    padding-bottom: 0.5rem !important;
}

.menu a:not(.logo-menu, .gradient-text):hover {
    color: var(--primary) !important;
    background-size: 0 0.2rem, 100% 0.2rem;
}

header svg {
    fill: var(--third) !important;
    cursor: pointer;
    transition: all 0.5s ease;
}

header svg:hover {
    fill: var(--primary) !important;
    transform: translateY(4px);
}

footer {
    justify-content: center !important;
    cursor: default !important;
    overflow: hidden;
}

footer .menu {
    width: 100% !important;
    max-width: 1200px !important;
    padding: 1rem;
    padding-top: 2rem;
    box-sizing: border-box;
}

footer .nav-container {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 3rem;
    width: 100%;
    margin-bottom: 4rem;
}

footer .nav {
    gap: 0.1rem !important;
}

footer a {
    font-size: 1rem !important;
} 

footer .box {
    border-radius: 0;
    padding-top: 1.5rem;
}

footer .box .gradient-text {
    font-weight: 600;
    padding: 0 !important;
}

footer .box .gradient-text:hover {
    letter-spacing: 0.0005em;
}

.nav-title {
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.menu-items {
    width: 100%;
    gap: 1.25rem;
    align-items: flex-start !important;
}

.img {
    background-position: 50% 50% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.logo-menu {
    background: url("../assets/SPARKHS-DARK-TRANSPARENT-CROPPED.png");
    width: 10rem;
    height: 2.5rem;
}

.logo-menu:hover {
    transform: translateX(4px);
}

.nav {
    gap: 1rem;
    align-items: flex-start !important;
}

.separator {
    font-weight: 200;
    color: var(--primary);
    opacity: 0.5;
    pointer-events: none !important;
}

.extend-menu:hover .lower-menu {
    display: flex !important;
}

.lower-menu {
    position: absolute;
    align-items: flex-start !important;
    transform: translateX(-1rem);
    padding: 0.75rem 1rem;
    gap: 0;
    margin-top: 0.5rem;
    background-color: var(--main);
}

.hidden {
    display: none !important;
}

.hidden-false {
    opacity: 0 !important;
    pointer-events: none !important;
}

.hidden-false.transform {
    transform: translateY(-2rem);
}

.primary {
    color: var(--primary) !important;
    cursor: pointer;
}

.secondary {
    color: var(--secondary) !important;
}

.third {
    color: var(--third) !important;
}

.active {
    color: var(--active) !important;
    cursor: pointer !important;
}

.card .active:hover {
    color: var(--accent) !important;
}

.content {
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow: hidden !important;
}

.section-content {
    padding: 0 1.5rem;
    gap: 4rem;
}

section:not(.home) .section-content {
    width: 100% !important;
    max-width: 1200px !important;
}

.section-content.padded {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    box-sizing: border-box;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row {
    flex-direction: row !important;
    justify-content: space-between;
}

.left {
    align-items: flex-start !important;
    text-align: left !important;
}

.shadow {
    box-shadow: 10px 10px 30px rgba(15, 13, 32, 0.5);
}

.background {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.grid-background {
    min-height: 100% !important;
    background-size: 2rem 2rem;
    background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 0.75px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0.75px, transparent 1px);
}

.overlay-background {
    background: linear-gradient(transparent 0%, var(--main) 100%);
    z-index: 0;
}

.gradient-text {
    text-align: center;
    background: linear-gradient(to left, var(--primary) 20%, var(--accent) 40%, var(--active) 60%, var(--primary) 80%);
    background-size: 200% auto;
    width: 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    animation: text-wipe 10s linear infinite;
    padding: 0 0.1rem;
}

.gradient-text:hover {
    animation-play-state: paused;
}

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

span {
    font-weight: inherit;
}

.hero {
    text-align: center;
    max-width: 1000px;
    gap: 1rem;
    transition: opacity 1s ease, transform 1s ease;
}

.hero-icon {
    cursor: pointer;
    fill: var(--active) !important;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.hero-icon svg {
    width: 3rem !important;
    height: 3rem !important;
}

.hero-caption {
    font-weight: 600;
    font-size: 1.1rem;
}

.hero-title {
    color: var(--primary);
    padding: 0 2rem;
    font-weight: 800;
    font-size: 4rem;
    line-height: 4rem;
}

.hero-title.h2 {
    font-size: 3rem;
    line-height: 3rem;
    padding: 0;
}

.hero-title.h3 {
    font-size: 2.5rem !important;
    line-height: 2.5rem !important;
    padding: 0;
    cursor: pointer;
}

.hero-title.h4 {
    font-size: 2rem !important;
    line-height: 2rem !important;
    padding: 0;
    cursor: pointer;
}

.hero-title.h4.no-outline {
    padding: 0;
    background-color: transparent;
    border-radius: none;
}

.hero-title.h5 {
    font-size: 1rem !important;
    line-height: 1rem !important;
    padding: 0;
    cursor: pointer;
    font-weight: 700;
}

.hero-title .bg {
    background-color: var(--accent);
    padding: 0.25rem;
    border-radius: 0.2rem;
}

.hero-sub {
    max-width: 600px;
    font-size: 1.15rem;
    line-height: 1.5rem;
}

.hero-sub.caption {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 600;
}

p {
    margin: 0;
    padding: 0;
}

.hero.left .hero-sub, .hero-sub.extended {
    max-width: 800px;
}

.button-container {
    gap: 1rem;
    z-index: 2;
    transition: opacity 1.75s ease, transform 1.5s ease;
}

.error-text {
    margin-top: 0.75rem;
    align-self: flex-start !important;
    transition: all 0.3s ease;
}

.error-text.third:hover {
    color: var(--third) !important;
}

.error-text::before {
    content: "*";
    color: var(--active) !important;
}

.hero .button-container {
    margin-top: 1rem;
}

.box {
    border-radius: 0.4rem;
    border-top: var(--line) 1px solid;
    box-sizing: border-box;
    cursor: pointer;
}

.relative {
    z-index: 2 !important;
    position: relative !important;
}

.button.rounded, input.rounded {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.button.rounded a {
    padding: 0.75rem 1rem !important;
}

.arrow {
    color: var(--secondary);
    font-size: 0.9rem;
    margin-left: 0.25rem;
    font-weight: 800;
    transition: all 0.5s ease;
}

.dot {
    margin: 0 !important;
}

.button:hover:has(.arrow) .arrow {
    color: var(--primary) !important;
}

.border {
    border-top: var(--line) 0.5px solid;
}

.button, input, details {
    padding: 1rem 1.5rem;
    background-color: var(--accent);
    line-height: 1rem;
    transition: opacity 0.5s ease;
}

.button {
    padding: 0 !important;
    display: flex;
    justify-content: center;
}

.button a {
    padding: 1rem 1.5rem !important;
    width: 100% !important;
}

.disabled {
    opacity: 0.7;
    pointer-events: none !important;
}

code {
    background-color: var(--line);
    padding: 0.15rem;
    border-radius: 0.2rem !important;
    font-family: courier, monospace !important;
    font-weight: bold !important;
}

input {
    border: none;
    outline: none;
    cursor: text;
    transition: transform 0.5s ease;
}

input:focus {
    transform: translateY(4px);
}

input.smaller {
    padding: 0.5rem 0.75rem;
}

.button, header, .hero-caption, .option-text {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover, input:hover {
    filter: brightness(1.2);
}

.button.line:hover, input.line:hover {
    filter: brightness(2) !important;
}

.button.main a {
    font-weight: 500 !important;
}

.button.second, input.second {
    background-color: var(--main);
}

.button.alt, .input.alt {
    background-color: var(--alt) !important;
}

.button.third, input.third {
    color: var(--primary) !important;
    background-color: var(--active) !important;
    opacity: 0.8;
}

.button.third:hover, input.third:hover {
    opacity: 1;
}

.third:hover {
    color: var(--primary) !important;
}

.button.line, input.line {
    background-color: var(--line) !important;
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: all 0.5s ease;
}

.card-container {
    height: 100%;
    position: relative;
    z-index: 2 !important;
    position: relative !important;
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.card-container.small, .card-container.alt {
    display: block;
    column-count: 3;
    gap: 1.5rem;
    max-width: 1200px !important;
    align-items: start !important;
}

.card-container.alt {
    /* max-width: 1400px !important; */
    overflow-y: visible !important;
}

.cards-small {
    max-height: 500px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-top: -1.5rem;
    box-sizing: border-box;
    overflow-y: hidden;
    justify-content: flex-start !important;
}

.cards-small .button-container {
    position: absolute;
    bottom: 6rem;
    z-index: 5;
}

.card-img {
    filter: grayscale(1);
    object-fit: cover !important;
    width: 100%;
    transition: all 0.5s ease;
}

.card:not(.card.alt) .card-img { 
    max-height: 100%;
    max-width: 600px;
}

.card-img-container {
    overflow: hidden;
    box-sizing: border-box;
    max-width: 300px;
    max-height: 250px;
    height: 100%;
    border-radius: 0.4rem 0 0 0.4rem;
}

.card:hover .card-img {
    filter: none !important;
    transform: rotate3d(2, -1, 1, 0.015turn);
    scale: 1.1;
}

.card-container.alt .card-img-container {
    max-width: 100% !important;
    overflow: hidden;
    border-radius: 0 0 0.5rem 0.5rem;
}

.card-container.alt .card-img-container .card-img {
    max-width: 100%;
}

.card-container.smaller .card-img-container {
    max-height: 200px;
}

.card-container.smaller .card-img-container .card-img {
    aspect-ratio: 1 / 1;
}

.card {
    background-color: var(--accent-alt);
    max-width: 500px;
    max-height: 250px;
    transition: all 0.5s ease;
    height: 100%;
    overflow: hidden;
    position: relative !important;
    z-index: 2 !important;
}

.card.small, .card.alt {
    background-color: var(--accent-alt);
    max-height: 100% !important;
    margin-bottom: 1.5rem;
}

.card.alt {
    background-color: var(--accent-alt);
    margin: 0 auto;
    margin-bottom: 1.5rem;
    align-items: flex-start;
    width: 100% !important;
    flex-direction: column !important;
}

.card.small .card-text {
    font-size: 0.9rem !important;
    line-height: 1.5rem !important;
}

.card.small .card-content {
    padding: 1.75rem !important;
}

.card-container:not(.smaller) .card.alt .card-content {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.card-container.smaller {
    column-count: 5 !important;
    max-width: 1200px !important;
}

.card-container.smaller .card {
    background-color: var(--line);
}

.card.alt .overlay-background {
    background: linear-gradient(transparent 60%, var(--main) 100%) !important;
    transition: all 0.5s ease;
}

.card.alt .card-text {
    font-size: 0.95rem !important;
    line-height: 1.3rem;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 2.6rem;
    transition: all 0.5s ease;
}

.card.alt:hover .card-text {
    max-height: 10rem;
}

.card.alt:hover .overlay-background {
    opacity: 0;
}

.card.alt .card-title {
    font-size: 1.25rem !important;
}

.card.alt .card-sub {
    font-size: 1.1rem !important;
}

.card-container.smaller .card.alt .card-title {
    font-size: 1.1rem !important;
}

.card-container.smaller .card.alt .card-sub {
    font-size: 1rem !important;
}

.card:hover {
    transform: rotate3d(-2, 1, -1, -0.015turn);
    scale: 0.9 !important;
}

.active-card {
    /* transform: rotate3d(-2, 1, -1, -0.05turn) translateY(-2rem); */
    scale: 0.9;
    /* transform: translateY(-2rem); KEYWORD CHANGE? */
    filter: brightness(1.2);
}

.active-card:hover, .focused-card {
    transform: none !important;
    scale: 1 !important;
}

.card:not(.active-card, .small, .alt) {
    opacity: 0.7;
    filter: blur(1px) !important;
    transform: translateY(-1rem);
    scale: 0.9;
}

.card:not(.active-card, .alt) .card-img {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.card:not(.active-card, .small, .alt):last-of-type {
    opacity: 0.5;
    filter: blur(1.2px) !important;
}


.card-content {
    padding: 2rem;
    align-items: flex-start;
    color: var(--primary);
    gap: 1rem;
}

.card-text {
    color: var(--third);
    font-size: 1.15rem;
    line-height: 1.75rem;
}

.card-title {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: -1rem;
}

.card-icon {
    cursor: pointer;
    opacity: 0.8;
}

.card-icon svg {
    fill: var(--primary) !important;
    height: 5rem;
    width: 5rem;
    margin-bottom: -1rem;
}

.button:hover a {
    letter-spacing: 0.005em;
}

.options-container {
    gap: 0.5rem;
    box-sizing: border-box;
}

.option {
    cursor: pointer;
    gap: 1rem;
    padding: 0 1.5rem;
    transition: all 0.5s ease;
}

.options-container.alt {
    display: block;
    column-count: 3;
    gap: 0rem !important;
    max-width: 30% !important;
    padding-top: 3rem;
}

.options-container.alt .hero {
    position: absolute !important;
    top: 0;
    width: 100%;
    font-style: italic;
}

.options-container.alt .option {
    margin-bottom: 1rem;
    scale: 0.8;
}

.option.clicked .option-icon {
    fill: var(--active) !important;
}

.option.clicked .option-text {
    color: var(--active) !important;
}

.option:not(.clicked):hover svg, .option:not(.clicked):hover .option-text {
    color: var(--primary) !important;
    fill: var(--primary) !important;
}

.option-icon {
    fill: var(--third);
    padding: 0;
}

.option-icon svg {
    height: 4rem !important;
    width: 4rem !important;
}

.option-icon img {
    filter: brightness(0.01) saturate(0%) invert(1);
    max-height: 6rem;
    max-width: 6rem;
    transition: 0.5s ease all;
    opacity: 0.8;
}

.option-icon img:hover {
    /* filter: none !important; */
    transform: translateY(4px);
    opacity: 1;
}

.option-text {
    font-weight: 600;
    text-align: center;
}

.option-icon, .option-text {
    transition: all 0.5s ease;
}

.window-container {
    gap: 2rem;
    width: 100%;
    transition: 0.5s ease all;
}

.window-container .window:not(:has(.hero)) {
    max-height: 400px;
    max-width: 400px;
}

.window-container .window:not(:has(.hero)) img, .window-container .window:not(:has(.hero)) iframe {
    max-width: 400px;
}

.window {
    max-height: 600px;
    width: 100%;
    max-width: 600px;
    background-color: var(--accent-alt);
    border: 1px solid var(--line);
    justify-self: flex-end;
    justify-content: flex-start;
    border-radius: 1rem;
    transition: 0.5s ease all;
    z-index: 5;
}

.window-bar {
    width: 100%;
    height: 2.5rem;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0.3rem;
    background-color: var(--accent-alt);
    cursor: default;
}

.window-icon {
    background-color: var(--third);
    height: 0.7rem;
    width: 0.7rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    opacity: 0.6;
}

.window-search {
    justify-self: flex-end !important;
    color: var(--third);
    border: 1px solid var(--line);
    border-radius: 0.3rem;
    padding: 0.75rem;
    box-sizing: border-box;
    height: 0.75rem;
    width: 100%;
    max-width: 400px;
    justify-content: center;
    text-align: center;
    margin-left: 2rem;
}

.window-search a {
    color: var(--third);
}

.window-content {
    overflow-y: scroll;
    justify-content: flex-start;
    opacity: 0.7;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    transition: 0.5s ease all;
}

.window-content:has(iframe) {
    overflow: hidden !important;
}

.window-content:has(.hero) {
    overflow: hidden;
}

.window-content .hero {
    padding: 1.5rem;
}

/* .window-content .hero-sub {
    font-size: 1.1rem;
    line-height: 1.4rem;
} */

.window:hover {
    scale: 1.05;
}

.window:hover a {
    color: var(--primary);
}

.window:hover .window-content {
    opacity: 1;
}

.window iframe {
    width: 600px;
    height: 600px;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

.table {
    align-self: flex-start;
    border: 0.25px solid var(--line);
    border-radius: 0.2rem;
    max-width: 600px;
    width: 100%;
}

.table-column {
    width: 100%;
    border: 0.1px solid var(--line);
    overflow: hidden;
    box-sizing: border-box;
    justify-content: flex-start;
}

.table-item {
    width: 100%;
    border-right: 0.25px solid var(--line);
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-item:last-of-type {
    border-right: none;
}

.table-item:hover {
    overflow: visible;
    text-overflow: none;
}

.table-item.header {
    font-weight: 700;
    text-align: left;
}

.home {
    background: url("../assets/design/hero-dark.png") 50% 50% no-repeat, var(--main);
    background-size: cover;
    gap: 1rem;
    overflow: hidden !important;
    max-height: 1600px !important;
}

.home .background {
    pointer-events: all !important;
    transition: opacity 3s ease;
}

.home .section-content {
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
    min-height: 100vh !important;
    box-sizing: border-box;
}

.about {
    background-color: var(--main);
    max-height: 1000px !important;
}

.about .section-content {
    gap: 3rem;
}

.demo, .join-grid {
    background: url("../assets/design/about-dark.png") 0% 50% no-repeat, var(--main);
    background-size: cover;
    gap: 1rem;
    overflow: visible !important;
    align-items: center;
    justify-content: space-around;
}

/* .demo .section-content {
    display: block;
    column-count: 2;
} */

.mission {
    /* max-height: 1400px !important; */
    background-color: var(--main);
    overflow: visible !important;
}

.mission .section-content {
    overflow: visible !important;
}

.cards-small .overlay-background {
    z-index: 4 !important;
    max-height: 500px;
}

.mission > .background {
    position: fixed;
    z-index: 6;
    pointer-events: all;
    max-height: 150px;
    bottom: 0;
    opacity: 100%;
    transition: 0.3s all ease;
}

.mission > .background .overlay-background, .team-grid .overlay-background {
    pointer-events: none !important;
    background: linear-gradient(transparent 0%, var(--main) 80%) !important;
}

.team {
    background-color: var(--main);
    scroll-margin-top: 4rem !important;
}

.team .section-content {
    padding-top: 2rem !important;
    align-items: center !important;
}

.team-grid {
    background: url("../assets/design/team-dark.png") 50% 50%, var(--main);
    background-size: cover;
    gap: 1rem;
    overflow: hidden !important;
}

.team-grid .card-container, .faq-grid .card-container {
    column-count: 4;
    width: 100% !important;
    padding: 1.5rem 0;
    margin: -1.5rem 0;
}

.team-grid .section-content > .card-container .card-img-container {
    max-height: 300px !important;
}

.team-grid .section-content > .card-container .card {
    display: block !important;
}

.team-grid .hero:first-of-type {
    margin-top: 0;
}

.team-grid .hero {
    margin: -2.5rem 0 -2rem;
    width: 100%;
    max-width: 1200px;
    opacity: 0.9;
}

.team-grid .cards-small {
    width: 100% !important;
    max-height: 350px;
    padding: 1rem;
    margin: -1rem;
} 

.team-grid .overlay-background {
    background: linear-gradient(transparent 0%, var(--main) 60%) !important;
}

.team-grid .button-container {
    bottom: 4rem;
}

.faq-grid {
    background: url("../assets/design/faq-dark.png") 50% 50%, var(--main);
    background-size: cover;
    gap: 1rem;
    overflow: hidden !important;
}

.faq-grid .card-container {
    column-count: 3;
    gap: 2rem;
    margin-bottom: -3rem;
    max-width: 100% !important;
}

.faq-grid .card, .faq-grid .card-content {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.faq-grid .card {
    /* background-color: var(--line) !important; */
    width: 300px;
    height: 300px;
    aspect-ratio: 1 / 1;
    margin-bottom: 2rem;
    position: relative;
}

/* .faq-grid .card:hover {
    transform: rotate3d(0, 1, 0, -0.5turn) scaleX(-1) !important;
    transition: all 0.5s ease;
} */

.faq-grid .card:hover .card-icon {
    opacity: 1 !important;
}

.faq-grid .card:hover .card-text {
    color: var(--active) !important;
}

.faq-grid .card-icon {
    margin-top: 1.5rem;
}

.faq-grid .card-title {
    margin-bottom: -0.5rem;
}

.join .gradient-text {
    padding: 0;
    font-weight: 600;
}

.join-grid .section-content {
    overflow-x: scroll;
    justify-content: center !important;
}

.join-grid .window-content {
    overflow: hidden !important;
}

.join-grid .section-content > .window:first-of-type {
    transform: rotate3d(0.5, 1, -0.15, 15deg);
}

.join-grid .window-container .window:last-of-type {
    transform: rotate3d(0, -5, 0.25, 15deg);
}

.join-grid .window:last-of-type .window-content img.img {
    margin-top: -1.5rem;
}

@keyframes text-wipe {
    to {
        background-position: 200% center;
    }
  }

@media (max-width: 1280px) {
    .section-content {
        padding: 0 4rem;
    }
    
    .hero-title {
        font-size: 3rem !important;
        line-height: 3rem !important;
    }
    
    .card {
        max-height: 300px;
    }
}

@media (max-width: 1024px) {
    .card-container.small, .card-container.alt {
        column-count: 2 !important;
    }

    .card {
        flex-direction: column !important;
        max-height: 100%;
    }

    .card.small {
        align-items: flex-start !important;
    }

    .card.alt {
        align-items: center !important;
    }

    .card.alt .card-content {
        align-items: center !important;
    }

    .card-img-container {
        margin: 1rem 0 -1rem 0;
    }

    .card-img {
        aspect-ratio: 1 / 1 !important;
        width: 6rem !important;
        height: 6rem !important;
        border-radius: 20%;
        filter: grayscale(0.7);
    }

    .card-container.smaller .card-img {
        width: 4rem;
        height: 4rem;
    }

    .card-img-container {
        width: 100%;
        height: 100%;
        padding: 1rem;
        overflow: visible !important;
    }

    .card:not(.active-card, .small, .alt):first-of-type {
        display: none !important;
    }

    .card:first-of-type.active-card:not(.small, .alt) + .card + .card {
        display: none !important;
    }

    .team .section-content {
        flex-direction: column !important;
    }

    .options-container.alt {
        max-width: 100% !important;
    }

    .option-icon img {
        max-height: 5rem;
        max-width: 5rem;
    }

    .options-container.alt .option {
        scale: 1 !important;
    }

    .section-content:has(.window) {
        flex-direction: column-reverse !important;
        gap: 2.5rem;
    }

    .team-grid .overlay-background {
        background: linear-gradient(transparent 0%, var(--main) 35%) !important;
        min-height: 100% !important;
    }

    footer .nav-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    /* .card-container {
        margin-top: 2rem;
    } */

    /* .section-content {
        min-width: 100% !important;
    } */

    .section-content {
        padding: 0 1.5rem;
    }

    header {
        padding: 1rem 1.5rem;
        gap: 2rem;
        align-items: center !important;
    }

    br {
        display: none !important;
    }

    .menu-items {
        display: none;
    }
    
    .card:not(.active-card, .small, .alt) {
        display: none !important;
    }

    .card:not(.small, .alt) .card-content {
        align-items: center !important;
    }

    .options-container {
        display: grid !important;   
        margin: 0 auto;
        grid-template-columns: repeat(2, 1fr);
    }

    .options-container.alt {
        max-width: 100% !important;
        grid-template-columns: repeat(3, 1fr);
    }

    .about .option {
        margin-bottom: 1.5rem;
    }

    .about .options-container {
        margin-bottom: -1.5rem;
    }

    .card-container.small, .card-container.alt {
        width: 100% !important;
        max-width: 550px !important;
        column-count: 1 !important;
        gap: 1rem !important;
    }

    .card.small, .card.alt {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .hero-sub.center {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .window-search {
        margin-left: 0.5rem;
    }

    .home .section-content {
        gap: 2rem !important;
        margin-top: 2rem;
    }

    .text-grid .hero .hero-title.h3 {
        font-size: 2.25rem !important;
        width: 100% !important;
    }

    .text-grid .hero .hero-title.h4 {
        font-size: 1.9rem !important;
        width: 100% !important;
    }

    .team .section-content {
        padding-top: 4rem !important;
    }

    .team-grid .overlay-background {
        background: linear-gradient(transparent 0%, var(--main) 20%) !important;
    }

    footer .box {
        flex-direction: column !important;
        max-width: 100%;
    }

    footer .box span {
        text-align: center;
        margin-top: 0.5rem;
    }

    footer .box .primary {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero-title, .hero-title.h3, .hero-title.h4 {
        font-size: 2.25rem !important;
        line-height: 2.25rem !important;
    }

    .hero-title.h1 {
        font-size: 2.25rem !important;
        line-height: 2.25rem !important;
        width: 100% !important;
    }

    .button-container:not(.keep-width) {
        flex-direction: column !important;
        gap: 0.5rem;
        width: 100%;
    }

    .button-container .button, .button-container input {
        width: 100% !important;
    }

    .card-text {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    footer .nav-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        margin-bottom: 3rem;
    }
}

@media (max-width: 400px) {
    header.menu-container {
        position: absolute !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    header .menu {
        display: none !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.75rem !important;
    }

    .hero-sub {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .hero-sub.caption {
        font-size: 0.8rem !important;
        line-height: 1rem !important;
    }

    .card-content {
        padding: 1rem 1.25rem;
    }

    .card.small .card-content {
        padding: 1.25rem !important;
    }

    section:not(.team-grid) .section-content {
        gap: 2.5rem !important;
    }

    .home .section-content {
        margin-top: 1.5rem !important;
    }

    .card:not(.card.alt) .card-img-container {
        display: none !important;
    }

    .option-icon img {
        max-height: 3rem;
        max-width: 3rem;
    }
}

@media (max-width: 370px) {
    footer .nav-container {
        grid-template-columns: repeat(1, 1fr);

    }
}