/* Reset */
* {
    box-sizing: border-box;
}

button,
input[type="submit"],
input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

input,
textarea {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

:root {
    /* Sizes */
    /* --size-multiplier: 8px; */
    --size-multiplier: 0.5rem;
    --size-0: calc(0 * var(--size-multiplier));
    --size-1: calc(1 * var(--size-multiplier));
    --size-2: calc(2 * var(--size-multiplier));
    --size-3: calc(3 * var(--size-multiplier));
    --size-4: calc(4 * var(--size-multiplier));
    --size-5: calc(5 * var(--size-multiplier));
    --size-6: calc(6 * var(--size-multiplier));
    --size-7: calc(7 * var(--size-multiplier));
    --size-8: calc(8 * var(--size-multiplier));
    --size-9: calc(9 * var(--size-multiplier));
    --size-10: calc(10 * var(--size-multiplier));
    --size-11: calc(11 * var(--size-multiplier));
    --size-12: calc(12 * var(--size-multiplier));
    --size-13: calc(13 * var(--size-multiplier));
    --size-14: calc(14 * var(--size-multiplier));
    --size-15: calc(15 * var(--size-multiplier));
    --size-16: calc(16 * var(--size-multiplier));
    --size-17: calc(17 * var(--size-multiplier));
    --size-18: calc(18 * var(--size-multiplier));
    --size-19: calc(19 * var(--size-multiplier));
    --size-20: calc(20 * var(--size-multiplier));

    /* Fonts */
    --primary-font: "Fira Sans Regular", sans-serif;
    --primary-font-italic: "Fira Sans Regular Italic";
    --primary-font-light: "Fira Sans Light";
    --primary-font-light-italic: "Fira Sans Light Italic";
    --primary-font-medium: "Fira Sans Medium";
    --primary-font-medium-italic: "Fira Sans Medium Italic";

    --secondary-font: "Dosis";
    --secondary-font-bold: "Dosis Bold";
    --secondary-font-medium: "Dosis Medium";
    --secondary-font-semibold: "Dosis SemiBold";

    /* Font Sizes */
    --fs-xl: var(--size-8);
    --fs-1200: var(--size-6);
    --fs-1100: calc(var(--size-5) + 0.25rem);
    --fs-1000: var(--size-5);
    --fs-900: calc(var(--size-4) + 0.25rem);
    --fs-800: var(--size-4);
    --fs-700: calc(var(--size-3) + 0.25rem);
    --fs-600: var(--size-3);
    --fs-500: calc(var(--size-2) + 0.25rem);
    --fs-400: var(--size-2);

    /* Colors */
    --accent-1: #530000;
    --accent-2: #b00000;

    --primary-1: #171717;
    --primary-2: #1f1f1f;
    --primary-3: #282828;

    --secondary-1: #f7f7f7;
    --secondary-2: #dedede;
    --secondary-3: #f1f1f1;

    --active-foreground: var(--secondary-1);

    /* Gradient Colors */
    --gradient-color-1: rgba(23, 23, 23, 0.5);
    --gradient-color-2: rgba(0, 0, 0, 0);
    --gradient-color-3: rgba(146, 2, 2, 0);
    --gradient-color-4: rgba(30, 30, 30, 0.86);
    --gradient-color-5: rgba(55, 55, 55, 0.38);
    --gradient-color-6: rgba(74, 74, 74, 0);

    /* Gradients */
    --logo-gradient: linear-gradient(
            0deg,
            var(--gradient-color-1) 0%,
            var(--gradient-color-2) 100%
        ),
        var(--primary-3);
    --nav-gradient-active: linear-gradient(
            180deg,
            var(--gradient-color-3) 0%,
            var(--accent-1) 100%
        ),
        var(--accent-2);
    --nav-gradient-inactive: linear-gradient(
            180deg,
            var(--gradient-color-1) 0%,
            var(--primary-1) 100%
        ),
        var(--primary-3);
    --button-gradient: linear-gradient(
            180deg,
            var(--gradient-color-3) 0%,
            var(--accent-1) 100%
        ),
        var(--accent-2);

    --footer-logo-gradient: linear-gradient(
            270deg,
            var(--primary-1) 18.97%,
            var(--gradient-color-4) 81.87%,
            var(--gradient-color-5) 217.14%,
            var(--gradient-color-6) 366.95%
        ),
        var(--primary-2);

    --footer-socials-gradient: linear-gradient(
            90deg,
            var(--primary-1) 5.48%,
            var(--gradient-color-4) 24.91%,
            var(--gradient-color-5) 83.98%,
            var(--gradient-color-6) 100%
        ),
        var(--primary-2);

    /* Spacing */
    --wide-letter-spacing: 0.88rem;
    --medium-letter-spacing: 0.36rem;
    --small-letter-spacing: 0.14rem;

    --logo: url(../images/logo_dark.svg);
}

.lightmode {
    /* colors */
    --primary-1: #f7f7f7;
    --primary-2: #dedede;
    --primary-3: #f1f1f1;

    --secondary-1: #171717;
    --secondary-2: #1f1f1f;
    --secondary-3: #282828;

    /* Gradient Colors */
    --gradient-color-1: rgba(237, 237, 237, 0.5);
    --gradient-color-2: rgba(195, 195, 195, 0.25);
    --gradient-color-3: rgba(146, 2, 2, 0);
    --gradient-color-4: rgba(222, 222, 222, 0.86);
    --gradient-color-5: rgba(241, 241, 241, 0.38);

    /* Gradients */
    --logo-gradient: linear-gradient(
            0deg,
            var(--gradient-color-1) 0%,
            var(--gradient-color-2) 100%
        ),
        var(--primary-3);
    --nav-gradient-active: linear-gradient(
            180deg,
            var(--gradient-color-3) 0%,
            var(--accent-1) 100%
        ),
        var(--accent-2);
    --nav-gradient-inactive: linear-gradient(
            180deg,
            var(--gradient-color-1) 0%,
            var(--primary-1) 100%
        ),
        var(--primary-2);

    --footer-logo-gradient: linear-gradient(
            270deg,
            var(--primary-1) 18.97%,
            var(--gradient-color-4) 81.87%,
            var(--gradient-color-5) 217.14%,
            var(--gradient-color-6) 366.95%
        ),
        var(--primary-2);

    --footer-socials-gradient: linear-gradient(
            90deg,
            var(--primary-1) 5.48%,
            var(--gradient-color-4) 24.91%,
            var(--gradient-color-5) 83.98%,
            var(--gradient-color-6) 100%
        ),
        var(--primary-2);

    --logo: url(../images/logo_light.svg);
}

@media (prefers-color-scheme: light) {
    :root {
        /* colors */
        --primary-1: #f7f7f7;
        --primary-2: #dedede;
        --primary-3: #f1f1f1;

        --secondary-1: #171717;
        --secondary-2: #1f1f1f;
        --secondary-3: #282828;

        /* Gradient Colors */
        --gradient-color-1: rgba(237, 237, 237, 0.5);
        --gradient-color-2: rgba(195, 195, 195, 0.25);
        --gradient-color-4: rgba(222, 222, 222, 0.86);
        --gradient-color-5: rgba(241, 241, 241, 0.38);

        /* Gradients */
        --logo-gradient: linear-gradient(
                0deg,
                var(--gradient-color-1) 0%,
                var(--gradient-color-2) 100%
            ),
            var(--primary-3);
        --nav-gradient-active: linear-gradient(
                180deg,
                var(--gradient-color-3) 0%,
                var(--accent-1) 100%
            ),
            var(--accent-2);
        --nav-gradient-inactive: linear-gradient(
                180deg,
                var(--gradient-color-1) 0%,
                var(--primary-1) 100%
            ),
            var(--primary-3);

        --footer-logo-gradient: linear-gradient(
                270deg,
                var(--primary-1) 18.97%,
                var(--gradient-color-4) 81.87%,
                var(--gradient-color-5) 217.14%,
                var(--gradient-color-6) 366.95%
            ),
            var(--primary-2);

        --footer-socials-gradient: linear-gradient(
                90deg,
                var(--primary-1) 5.48%,
                var(--gradient-color-4) 24.91%,
                var(--gradient-color-5) 83.98%,
                var(--gradient-color-6) 100%
            ),
            var(--primary-2);
        --logo: url(../images/logo_light.svg);
    }
}

/* icons styling */

.material-symbols-rounded {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: var(--fs-1200);
    color: var(--primary-1);
}

.hideIcon {
    display: none;
}

body {
    background-color: var(--primary-1);
    font-family: var(--secondary-font);
    visibility: hidden;
}

header {
    max-width: 80%;
    margin: var(--size-5) var(--size-10);
}

.header-wrapper {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    align-items: center;
    gap: var(--size-10);
    max-height: var(--size-19);
}

.header-wrapper .logo img {
    width: var(--size-20);
}

h1 {
    color: var(--secondary-1, #f7f7f7);
    font-family: var(--secondary-font-medium);
    font-size: var(--fs-1000);
    font-weight: 500;
    line-height: normal;
    letter-spacing: var(--wide-letter-spacing);
    text-transform: uppercase;
    margin-inline: auto;
}

.hamburger {
    position: fixed;
    top: var(--size-10);
    right: var(--size-10);
    z-index: 1000;
    opacity: 0;
    width: var(--size-10);
    height: var(--size-10);
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nav-gradient-active);
    cursor: pointer;
}

.hamburger hr {
    width: var(--size-2);
    margin: 0;
    border-radius: var(--size-2);
}

.hamburger-content {
    visibility: hidden;
    position: fixed;
    top: var(--size-20);
    right: var(--size-10);
    /* background-color: var(--primary-1); */
    padding: var(--size-1) var(--size-0);
    border-radius: var(--size-3);
}

.hamburger-content .buttons-wrapper {
    flex-direction: row;
    justify-content: center;
    gap: 0;
}

.hamburger-content .buttons-wrapper .mode,
.hamburger-content .buttons-wrapper .mail {
    width: var(--size-13);
    height: var(--size-13);
}

.hero-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-3);
    max-width: 90%;
    margin: var(--size-3) auto;
}

nav {
    display: flex;
    /* width: 25%; */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    /* gap: var(--size-1); */
}

nav a {
    padding: var(--size-2) var(--size-6);
    font-size: var(--fs-700);
    color: var(--secondary-1);
    font-family: var(--secondary-font-bold);
    font-weight: 700;
    letter-spacing: var(--small-letter-spacing);
    border-radius: var(--size-3);
    background: var(--nav-gradient-inactive);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

nav .active {
    background: var(--nav-gradient-active);
    color: var(--active-foreground);
}

nav a,
nav a:visited {
    text-decoration: none;
    width: 100%;
    cursor: pointer;
}

nav a:hover {
    background-color: var(--accent-2);
}

.hero-wrapper .hero {
    width: 100%;
    color: var(--secondary-1);
    border-radius: var(--size-3);
    /* padding: var(--size-6) var(--size-6); */
    padding: var(--size-0);
    background-color: var(--primary-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--size-6);
    align-self: stretch;
}

.hero img {
    max-width: 100%;
    border-radius: var(--size-3);
}

.hero-image,
.hero-text {
    margin: var(--size-10) 0;
}

.hero .hero-image img {
    width: var(--size-20);
}

.hero h2 {
    font-size: var(--fs-1000);
    font-family: var(--secondary-font-semibold);
    margin: 0 0 var(--size-3) 0;
}

.hero p {
    font-size: var(--fs-600);
    font-family: var(--primary-font-light);
    line-height: normal;
    margin: var(--size-1) 0;
}

.buttons-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: var(--size-3);
}
.buttons-wrapper a,
.buttons-wrapper a:visited {
    text-decoration: none;
}

.buttons-wrapper .mode,
.buttons-wrapper .mail,
.buttons-wrapper .phone {
    display: flex;
    width: var(--size-17);
    height: var(--size-17);
    padding: var(--size-3);
    justify-content: center;
    align-items: center;
    gap: var(--size-1);
    border-radius: var(--size-3);
    cursor: pointer;
}

.buttons-wrapper .mode {
    background: var(--secondary-1);
}

.buttons-wrapper .mail,
.buttons-wrapper .phone {
    background: var(--button-gradient);
}

.buttons-wrapper .mail span,
.buttons-wrapper .phone span {
    color: var(--active-foreground);
}

.buttons-wrapper .mail:hover,
.buttons-wrapper .phone:hover {
    background: var(--accent-2);
}

.works-wrapper {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--size-3);
}

.works-wrapper .work {
    width: 48%;
    height: calc(4.75 * var(--size-12));
}

.work .work-flipper {
    color: var(--secondary-2);
    background-color: var(--primary-2);
    border-radius: var(--size-3);
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
}

.work .work-flipper:hover {
    transform: rotateX(180deg);
}

.work-flipper .work-card-front {
    position: absolute;
    padding: var(--size-5);
    border-radius: var(--size-3);

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
}

.work-flipper .work-card-back {
    position: absolute;
    border-radius: var(--size-3);

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    transform: rotateY(180deg);
}

.work-card-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.work-link .arrow-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background: var(--nav-gradient-active);
    border-radius: var(--size-10);
    padding: var(--size-1);
}

.work-link a,
.work-link a:visited {
    display: block;
    text-decoration: none;
    width: 4rem;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}

.work h2 {
    font-family: var(--secondary-font-medium);
    font-size: var(--size-5);
    font-weight: 500;
    line-height: normal;
}

.work p {
    font-family: var(--primary-font-light);
    font-size: var(--size-3);
    font-weight: 300;
    line-height: normal;
}

.work .work-card-back {
    backface-visibility: hidden;
}

.work-card-back img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    rotate: 180deg;
}

footer {
    margin-top: var(--size-3);
    max-width: 90%;
    margin-inline: auto;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-3);
    align-self: stretch;
}

.footer-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: var(--size-3);
}

.footer-col-2 {
    color: var(--secondary-1);
    font-family: var(--secondary-font);
    font-size: var(--fs-900);
    line-height: normal;
    letter-spacing: var(--medium-letter-spacing);
}

.footer-col-3 {
    display: flex;
    padding: var(--size-3) var(--size-3) var(--size-3) var(--size-13);
    justify-content: center;
    align-items: center;
    gap: var(--size-3);

    border-radius: var(--size-9);
    background: var(--footer-socials-gradient);
}

.footer-col-3 a {
    /* padding: var(--size-3) calc(var(--size-3) + 0.25rem); */
    width: fit-content;
    width: intrinsic;
    width: -moz-fit-content;
}

.footer-col-3 a:hover {
    scale: 1.1;
    transition: all 0.25s ease-in-out;
}

.social-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    text-align: center;
    border-radius: var(--size-5);
    background-color: var(--primary-1);
}

.social-tooltip {
    visibility: hidden;
    opacity: 0;
    color: var(--secondary-1);
    transition: all 0.25s ease-in-out;
    position: absolute;
    z-index: 10;
}

.social-icon:hover .social-tooltip {
    visibility: visible;
    opacity: 1;
}

.social-icon:hover a {
    opacity: 0.5;
    transition: all 0.25s ease-in-out;
}

.footer-row-2 {
    display: flex;
    padding: var(--size-2) 0rem;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: var(--fs-500);
    border-radius: var(--size-3);
    background: var(--primary-2);
    color: var(--secondary-1);
}

/* CONTACT SECTION */
.contact-section {
    max-width: 90%;
    margin-inline: auto;
    color: var(--secondary-1);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.contact-box-1,
.contact-box-2,
.contact-box-3 {
    border-radius: var(--size-3);
    background-color: var(--primary-2);
    padding: var(--size-6) var(--size-10);
}

.contact-box-1 h2 {
    font-family: var(--secondary-font-medium);
    font-size: var(--size-8);
    font-weight: 500;
    line-height: normal;
    margin-top: auto;
}

.contact-box-1 p {
    font-family: var(--primary-font-light);
    font-size: var(--size-3);
    font-weight: 300;
    line-height: normal;
}

.form-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--size-3);
    align-items: stretch;
}

.contact-box-3 {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    justify-content: space-around;
}

.contact-box-3 .buttons-wrapper {
    flex-direction: row;
    justify-content: center;
}

.form-field {
    /* display: inline-flex; */
    display: flex;
    margin-top: var(--size-3);
    padding: var(--size-3);
    align-items: flex-end;
    gap: var(--size-3);
}

.form-field label {
    font-size: var(--fs-700);
    letter-spacing: var(--small-letter-spacing);
    width: 50%;
}

.form-field input {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--secondary-2);
    width: calc(3 * var(--size-20));
    font-family: var(--secondary-font);
    justify-content: center;
    align-items: center;
    border-bottom: 2px dashed var(--accent-2);
}

.form-field textarea {
    width: calc(3 * var(--size-20));
    justify-content: center;
    align-items: center;
    font-family: var(--secondary-font);
    border-bottom: 2px dashed var(--accent-2);
    color: var(--secondary-2);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--secondary-2);
    font-family: var(--secondary-font);
    font-size: 1rem;
}

.contact-box-3 {
    width: 100%;
    height: auto;
}

.button {
    display: flex;
    margin-top: var(--size-3);
    margin-bottom: var(--size-5);
    padding: var(--size-2) var(--size-4);
    justify-content: center;
    align-items: center;
    gap: var(--size-3);
    color: var(--active-foreground);
    border-radius: var(--size-3);
    background: var(--button-gradient);
    /* box-shadow: 2px 2px 7px 0px var(--primary-3); */
    text-align: center;
    font-size: var(--fs-600);
    letter-spacing: var(--small-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
}

.button:hover {
    background-color: var(--accent-1);
}

.tooltiptext {
    visibility: hidden;
    font-size: var(--fs-400);
    width: calc(1.25 * var(--size-20));
    background-color: var(--accent-2);
    color: var(--secondary-3);
    text-align: center;
    border-radius: var(--size-1);
    padding: var(--size-1);
    margin-left: calc(2.5 * var(--size-20));
    margin-bottom: var(--size-2);
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.the-salutation {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-family: var(--primary-font-light-italic);
    font-size: var(--fs-700);
}

/* ABOUT SECTION */
.about-section {
    max-width: 90%;
    margin-inline: auto;
    color: var(--secondary-1);
    display: flex;
    flex-direction: row;
    gap: var(--size-3);
}

.about-box {
    background-color: var(--primary-2);
    padding: var(--size-6);
    border-radius: var(--size-3);
    width: 100%;
}

.about-section h2 {
    font-family: var(--secondary-font-medium);
    font-size: var(--size-5);
    font-weight: 500;
    line-height: normal;
}

.about-section p {
    font-family: var(--primary-font-light);
    font-size: var(--size-3);
    font-weight: 300;
    line-height: normal;
}

/* Case Study */

.case-study-section {
    width: 90%;
    margin-inline: auto;
    color: var(--secondary-1);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.case-study-section h2 {
    font-family: var(--secondary-font-medium);
    font-size: var(--size-8);
    font-weight: 500;
    line-height: normal;
    margin-top: auto;
    margin-bottom: 0;
}

.case-study-section h3 {
    font-family: var(--secondary-font);
    font-size: var(--size-6);
    margin: 0;
}

.case-study-section p,
.case-study-section li {
    font-size: var(--fs-700);
}

.flex-row,
.flex-column {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--size-3);
    align-items: stretch;
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.demo-box-1,
.demo-box-2,
.specification-section,
.deliverables-section,
.roles-section,
.overview-details,
.overview-right,
.branding-section > div,
.process-section > div,
.marketing-section > div,
.takeaways-box-1,
.takeaways-box-2 {
    background-color: var(--primary-2);
    border-radius: var(--size-3);
    padding: var(--size-5);
}

.demo-box-1 {
    width: 43%;
}

.demo-box-1 p {
    font-size: var(--fs-700);
}

.demo-box-2 {
    width: 55%;
    height: calc(var(--size-20) * 3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: none;
}

.demo-box-2 iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--size-3);
    /* width: calc(var(--size-20) * 10); */
    /* height: calc(var(--size-10) * 4.8); */
}

.demo-box-2 img {
    width: 100%;
    height: 100%;
    border-radius: var(--size-3);
}

.branding-section {
    margin-inline: auto;
    align-items: center;
}

.branding-section > div {
    width: 32%;
}

.retail-branding div,
.africompassion-branding div,
.foe-branding div,
.panda-kiosk-branding div,
.game-branding > div {
    padding: 0;
    background-color: transparent;
}

.retail-branding .fonts,
.retail-branding .colors,
.retail-branding .symbol,
.retail-branding .tags {
    width: 25%;
}

.africompassion-branding .fonts,
.africompassion-branding .colors {
    width: 48%;
}

.retail-branding .marketing-text,
.retail-branding .logo {
    width: 45%;
}

.retail-branding .branding-button {
    cursor: pointer;
}

.retail-branding img,
.africompassion-branding img,
.foe-branding img,
.panda-kiosk-branding img,
.game-branding img {
    width: 100%;
}

.africompassion-branding img {
    border-radius: var(--size-3);
}

.foe-branding .logo {
    width: 100%;
}

.foe-branding .fonts,
.foe-branding .colors,
.foe-branding .icons {
    width: 32%;
}

.panda-kiosk-branding .logo,
.panda-kiosk-branding .fonts,
.panda-kiosk-branding .colors,
.game-branding .logo,
.game-branding .fonts,
.game-branding .colors {
    width: 32%;
}

.panda-kiosk-branding .components,
.game-branding .components {
    width: 100%;
}

.overview-left {
    width: 63%;
}

.overview-right {
    align-self: center;
}

.overview-details {
    width: 48.5%;
    padding-bottom: var(--size-3);
}

.overview-details:nth-child(1) {
    width: 100%;
}

.overview-right {
    width: 35%;
    padding: 0;
    background: transparent;
}

.foe-overview .overview-left {
    width: 73%;
}

.foe-overview .overview-right {
    width: 25%;
    text-align: center;
}

.panda-kiosk-overview .overview-left {
    width: 48%;
}

.panda-kiosk-overview .overview-right {
    width: 48%;
}

.overview-right img {
    width: 100%;
    border-radius: var(--size-3);
}

.foe-overview .overview-right img {
    width: 75%;
}

.digital-signage-overview .overview-left {
    width: 100%;
}

.game-overview .overview-left,
.game-overview .overview-right {
    width: 48%;
}

.overview-bottom .overview-details {
    width: 49%;
}

.details-left {
    width: 45%;
}

.details-right {
    width: 53%;
}

.specification-section {
    width: 100%;
}

.process-section {
    align-items: stretch;
}

.process-section div {
    width: 49%;
}

.process-section .process-image {
    padding: 0;
    background: transparent;
}

.process-image img {
    width: 100%;
    height: fit-content;
    height: intrinsic;
    height: -moz-fit-content;
    border-radius: var(--size-3);
}

.process-box-10 iframe {
    width: 100%;
    border-radius: var(--size-3);
}

.africompassion-process .process-box-1,
.africompassion-process .process-box-4 {
    width: 65%;
}

.africompassion-process .process-box-2,
.africompassion-process .process-box-3 {
    width: 32%;
}

.africompassion-process .process-box-7 {
    width: 100%;
}

.foe-process .process-box-5 {
    width: 65%;
}

.foe-process .process-box-6 {
    width: 32%;
}

.digital-signage-process .process-box-1 {
    width: 35%;
}

.digital-signage-process .process-box-2 {
    width: 62%;
}

.digital-signage-process .process-box-9 {
    width: 100%;
}

.marketing-box-1,
.marketing-box-2,
.marketing-box-3,
.marketing-box-4,
.marketing-box-5,
.marketing-box-6 {
    width: 49%;
}

.marketing-box-7 {
    width: 100%;
}
.marketing-box-8 {
    width: 65%;
}
.marketing-box-9 {
    width: 31%;
}

.marketing-box-10 {
    width: 59%;
}
.marketing-box-11 {
    width: 39%;
}

.marketing-section img {
    width: 100%;
    border-radius: var(--size-3);
}

.marketing-section .marketing-image {
    padding: 0;
    background: transparent;
}

.marketing-section .marketing-box-11 {
    background: none;
}

.marketing-box-11 iframe {
    /* width: 100%; */
    height: 100%;
    border-radius: var(--size-3);
    /* width: calc(var(--size-20) * 10); */
    /* height: calc(var(--size-10) * 4.8); */
}

.takeaways-box-1 {
    width: 60%;
}

.takeaways-box-2 {
    width: 38%;
}

.tools-section {
    padding-top: var(--size-2);
}

.tools-section img {
    width: var(--size-10);
    height: var(--size-10);
    margin: var(--size-1);
}

.error-404 {
    font-family: var(--secondary-font);
    color: var(--secondary-1);
    max-width: 90%;
    margin: 20vh auto;
    text-align: center;
}

.error-404 h1 {
    font-size: var(--fs-1000);
}

.error-404 p {
    font-size: var(--fs-700);
}

.error-404 .button {
    width: fit-content;
    width: intrinsic;
    width: -moz-fit-content;
    margin-inline: auto;
    cursor: pointer;
    scale: 0.75;
}

@media only screen and (max-width: 1200px) {
    :root {
        --size-multiplier: 0.25rem;
    }

    h1 {
        /* font-size: var(--fs-1000); */
        letter-spacing: var(--medium-letter-spacing);
    }

    .work-link a,
    .work-link a:visited {
        width: 2rem;
    }

    .social-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media screen and (max-width: 770px) {
    header {
        margin: var(--size-5) var(--size-4);
    }
    h1 {
        font-size: var(--fs-900);
        letter-spacing: var(--small-letter-spacing);
    }

    .hamburger {
        border-radius: 75%;
    }

    .hero-wrapper .nav-wrapper {
        visibility: hidden;
        height: 0;
    }

    .form-wrapper {
        flex-direction: column-reverse;
    }

    .hero-wrapper {
        flex-direction: column;
    }

    .hero-wrapper .hero {
        flex-direction: column;
    }

    .hero-image {
        margin-bottom: 0;
    }

    .hero-text {
        margin-top: 0;
    }

    .hero .hero-image img {
        width: var(--size-15);
    }

    .hero-wrapper .buttons-wrapper {
        visibility: hidden;
        height: 0;
    }

    .works-wrapper {
        flex-direction: column;
    }

    .works-wrapper .work {
        width: 100%;
    }

    .work h2 {
        font-size: var(--size-5);
    }

    .work p {
        font-size: var(--size-3);
    }

    .footer-row-1 {
        flex-direction: column-reverse;
    }

    .footer-col-3 {
        background: var(--nav-gradient-inactive);
        padding: var(--size-3);
        width: 100%;
        justify-content: space-around;
    }

    .footer-col-1 {
        margin-left: var(--size-20);
    }

    .footer-col-1 img {
        content: var(--logo);
        width: 50%;
    }

    .social-icon a {
        opacity: 0.5;
    }

    .social-tooltip {
        visibility: visible;
        opacity: 1;
        scale: 0.75;
    }

    .about-section {
        flex-direction: column;
    }

    .demo-section {
        flex-direction: column;
    }

    .retail-branding .fonts,
    .retail-branding .colors,
    .retail-branding .symbol,
    .retail-branding .tags,
    .retail-branding .marketing-text,
    .retail-branding .logo,
    .africompassion-branding .fonts,
    .africompassion-branding .colors,
    .foe-branding .logo,
    .foe-branding .fonts,
    .foe-branding .colors,
    .foe-branding .icons,
    .panda-kiosk-branding .logo,
    .panda-kiosk-branding .colors,
    .panda-kiosk-branding .fonts,
    .panda-kiosk-branding .components,
    .game-branding .logo,
    .game-branding .colors,
    .game-branding .fonts,
    .game-branding .components {
        width: 100%;
    }

    .details-section {
        flex-direction: column;
    }

    .details-left,
    .details-right {
        width: 100%;
    }

    .roles-section {
        width: 100%;
    }

    .details-left {
        flex-direction: row;
    }

    .branding-section div {
        width: 100%;
    }

    .process-image img {
        height: auto;
    }

    .demo-box-1,
    .demo-box-2,
    .overview-left,
    .overview-right,
    .overview-details,
    .overview-bottom .overview-details,
    .foe-overview .overview-left,
    .foe-overview .overview-right,
    .panda-kiosk-overview .overview-left,
    .panda-kiosk-overview .overview-right,
    .game-overview .overview-left,
    .game-overview .overview-right,
    .digital-signage-overview,
    .foe-overview .overview-right img,
    .specification-section,
    .deliverables-section,
    .process-section > div,
    .africompassion-process .process-box-1,
    .africompassion-process .process-box-2,
    .africompassion-process .process-box-3,
    .africompassion-process .process-box-4,
    .foe-process .process-box-5,
    .foe-process .process-box-6,
    .digital-signage-process .process-box-1,
    .digital-signage-process .process-box-2,
    .marketing-section > div,
    .takeaways-box-1,
    .takeaways-box-2 {
        width: 100%;
    }
}