/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
    --color-bg: #f5f1ec;
    --color-text-main: #000000;
    --color-primary: #ffff00;
    --wrapper-height: 87vh;
    --image-max-width: 300px;
    --image-margin: 3rem;
    --font-family: "oxygen", sans-serif;
    --font-family-header: "oxygen", sans-serif;
}

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

[hidden] {
    display: none !important;
}

/* @font-face {
    font-family: Oxygen;
    src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap") format("opentype");
}

@font-face {
    font-family: "Libre Caslon Text";
    src: url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap") format("opentype");
} */

.oxygen-light {
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.oxygen-regular {
    font-family: "Oxygen", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.oxygen-bold {
    font-family: "Oxygen", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.libre-caslon-text-regular {
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: normal;
}

.libre-caslon-text-bold {
    font-family: "Libre Caslon Text", serif;
    font-weight: 700;
    font-style: normal;
}

.libre-caslon-text-regular-italic {
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: italic;
}

.header_container {
    display: flex;
    top: 0;
    flex-direction: column;
    /* justify-content: space-between; */
    justify-content: left;
    align-items: left;
    /* align-content: end; */
    width: 100%;
    max-width: 1700px;
    /* padding-top: 450px; */
    padding-top: 150px;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 70px;
    height: 900px;
    /*   border: 1px solid black; */
}

.text_container {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.header_container h3 {
    margin-left: 60px;
    opacity: 60%;
    font-style: italic;
}

.header_container_tech {
    display: flex;
    top: 0;
    /* justify-content: center; */
    width: 100%;
    max-width: 1700px;
    height: 950px;
    padding: 0px;
    /*   border: 1px solid black; */
}

.header_hover {
    font-size: 25px;
    font-family: "Libre Caslon Text", serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left;
    color: #1a3e2f;
    line-height: normal;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-decoration: wavy underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.header_hover:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.header_link {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    font-family: "Oxygen", sans-serif;
    font-weight: 200;
    font-size: 25px;
}

.header_link:hover {
    font-style: italic;
}

.selected_works {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    background-color: transparent;
    justify-content: left;
    position: relative;
    top: 80px;
}

.gradient_circle {
    display: block;
    content: "";
    position: absolute;
    margin-top: -350px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    /* Size of the gradient circle */
    height: 800px;
    opacity: 0.8;
    /* Size of the gradient circle */
    background-image: radial-gradient(40.97% 40.93% at 47.56% 47.41%,
            #96BAFF 0%,
            rgba(150, 186, 255, 0.00) 100%);
    border-radius: 50%;
    /* Makes it a circle */
    z-index: -2;
    /*   animation: moveGradient 50s infinite alternate; /* Animation */
}

.gradient_circle_alt {
    display: block;
    content: "";
    position: absolute;
    margin-top: -350px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    /* Size of the gradient circle */
    height: 700px;
    opacity: 0.5;
    /* Size of the gradient circle */
    background-image: radial-gradient(40.97% 40.93% at 47.56% 47.41%, #9EC392 0%, rgba(254, 248, 237, 0.00) 100%);
    /* Makes it a circle */
    z-index: -3;
    /*   animation: moveGradient 50s infinite alternate; /* Animation */
}

img {
    max-width: 100%;
    height: auto;
}

#gradient_circle_pointer {
    width: 70px;
    /* Adjust size as needed */
    height: 70px;
    /* Adjust size as needed */
    border-radius: 50%;
    top: 0px;
    position: absolute;
    pointer-events: none;
    /* Ensures the circle doesn't interfere with mouse events */
    background: radial-gradient(50% 50% at 50% 50%,
            #c5aaec 0%,
            rgba(197, 170, 236, 0) 100%);
    transition: transform 0.1s linear;
    /* Smooth transition for better visual effect */
    z-index: 20;
    display: none;
    /* transform: translate(-50%, -50%); */
}

#game_text {
    position: absolute;
    top: 30px;
    /* right: 130px; */
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    font-family: "Oxygen", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 15px;
    text-align: left;
    color: #1a3e2f;
    line-height: 18px;
    opacity: 0.6;
    display: none;
}

.level_display {
    margin-top: 30px;
    align-items: right;
    text-align: right;
    color: #1a3e2f;
    font-size: 25px;
}

#game_start_button {
    position: absolute;
    top: 30px;
    /* right: 100px; */
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    border-radius: 22.759px;
    border: 0.7px solid var(--Main, #1A3E2F);
    font-family: "Oxygen", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 15px;
    text-align: left;
    color: #1a3e2f;
    line-height: 18px;
    opacity: 0.6;
}

#game_start_button:hover {
    font-style: italic;
    cursor: pointer;
}

@keyframes flashRed {
    0% {
        border: 3px dashed #8c8c8c3b;
    }

    50% {
        border: 3px dashed #b99ae4;
    }

    100% {
        border: 3px dashed #8c8c8c3b;
    }
}

.new_circle {
    position: absolute;
    width: 90px;
    height: 90px;
    /* border: 1px dashed #1a3e2f; */
    opacity: 0.8;
    border-radius: 50%;
    z-index: -1;
    animation: flashRed 1s infinite;
}

.circle_overlap {
    /* opacity: 1; */
    border: 3px dashed #f88585 !important;
    /* border: 3px solid #b99ae4 !important; */
}

.title_container {
    width: 100%;
    /* min-width: 300px; */
    /* max-width: 800px; */
    align-content: left;
    align-items: left;
    text-align: left;
    display: block;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /*   border: 1px solid black; */
}

.subtitle_container {
    /* margin-top: 100px; */
    margin-bottom: 0px;
    margin-left: 0px;
    width: auto;
    gap: 0px;
    /* min-width: 400px; */
    /* max-width: 700px; */
    align-items: right;
    justify-content: right;
    align-content: right;
    align-items: right;
    text-align: left;
    display: block;
    /*   border: 1px solid black; */
}

.title_comment {
    font-family: "Oxygen", sans-serif;
    font-weight: 200;
    font-style: italic;
    font-size: 22px;
    text-align: left;
    color: #1a3e2f;
    line-height: normal;
    margin-left: 60px;
    margin-bottom: 20px;
    /*   font-family: "Oxygen"; */
}

.all_work_container_center {
    /* display: flex; */
    width: 100%;
    /* border-top: 1px solid #C6D2C8; */
    /* background-color: #f8f1e3; */
    justify-content: center;
    /* border-radius: 40px; */
}

.all_work_container {
    background-color: #f8f1e5;
    border-radius: 40px;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    grid-gap: 30px;
}

.project_backing {
    border: 1px solid #F1F1F1;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.project_backing:hover {
    /* animation: wiggle 0.3s ease; */
    /* animation-iteration-count: 1; */
}

.project_backing_whole_smill {
    position: relative;
    /* width: 45vw; */
    /* max-width: 750px; */
}

.project_backing_smill {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.backing_break_smill {
    position: absolute;
    bottom: 20px;
    width: 120%;
    height: 0%;
    border: 0.3px solid black;
}

.project_backing_lower {
    position: relative;
    top: -1px;
    border: 1px solid #F1F1F1;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_smill:hover {
    /* rotate: 0.8deg; */
    /* animation: wiggle 0.3s ease; */
    /* animation: spin 0.8s ease; */
    /* transform: rotate3d(0, 1, 0, 180deg); */
    /* animation-iteration-count: 1; */
    /* color: white; */
}

.project_backing_whole_smill:hover .project_backing_smill {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #4149A2;
    background-color: #FEFDFF; */
    background-color: #f7f7f7;
}

.project_backing_whole_smill:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #4149A2;
    background-color: #FEFDFF; */
    background-color: #f7f7f7;
}

/* .project_backing_whole_smill:hover .project_home_image {
    border: 0.2px solid rgba(65, 73, 162, 0.60);
}

.project_backing_whole_smill:hover .project_lower_text {
    color: #4149A2;
}

.project_backing_smill:hover .h1 {
    color: #4149A2;
}

.project_backing_smill:hover .h4 {
    color: #4149A2;
    opacity: 70%;
}

.project_backing_smill:hover .project_tag {
    background-color: #4149A2;
    color: white;
} */

.project_backing_whole_lane {
    position: relative;
    /* width: 45vw;
    max-width: 750px; */
}

.project_backing_lane {
    border: 0.2px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_lane:hover {
    /* rotate: 0.8deg; */
    /* animation: wiggle 0.3s ease; */
    /* animation: spin 0.8s ease; */
    /* transform: rotate3d(0, 1, 0, 180deg); */
    /* animation-iteration-count: 1; */
    /* background-color: rgba(66, 148, 240, 0.10);
    border: 0.2px solid #316FB3; */
    /* color: white; */
}

.project_backing_whole_lane:hover .project_backing_lane {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #316FB3; */
    background-color: #f7f7f7;
}

/* .project_backing_whole_lane:hover .project_home_image {
    border: 0.2px solid rgba(49, 111, 179, 0.60);
} */

.project_backing_whole_lane:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #316FB3;
    background-color: #EBEEED; */
    background-color: #f7f7f7;
}

/* .project_backing_whole_lane:hover .project_lower_text {
    color: #316FB3;
}

.project_backing_lane:hover .h1 {
    color: #316FB3;
}

.project_backing_lane:hover .h4 {
    color: #316FB3;
    opacity: 70%;
}

.project_backing_lane:hover .project_tag {
    background-color: #316FB3;
    color: white;
} */

.project_backing_whole_culi {
    position: relative;
    /* width: 45vw;
    max-width: 750px; */
}

.project_backing_culi {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_culi:hover {
    /* rotate: 0.8deg; */
    /* animation: wiggle 0.3s ease; */
    /* animation: spin 0.8s ease; */
    /* animation-iteration-count: 1; */
    /* background-color: #EBF2DD;
    border: 0.2px solid #1B912B; */
}

.project_backing_whole_culi:hover .project_backing_culi {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #1B912B;
    background-color: #EBF2DD; */
    background-color: #f7f7f7;
}

/* .project_backing_whole_culi:hover .project_home_image {
    border: 0.2px solid rgba(27, 145, 43, 0.60);
} */

.project_backing_whole_culi:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    /* border: 0.2px solid #1B912B;
    background-color: #EBF2DD; */
    background-color: #f7f7f7;
}

/* .project_backing_whole_culi:hover .project_lower_text {
    color: #1B912B;
}

.project_backing_culi:hover .h1 {
    color: #1B912B;
}

.project_backing_culi:hover .h4 {
    color: #1B912B;
    opacity: 70%;
}

.project_backing_culi:hover .project_tag {
    background-color: #1B912B;
    color: white;
} */

.project_backing_whole_infer {
    position: relative;
    /* width: 45vw;
    max-width: 750px; */
}

.project_backing_infer {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_infer:hover {
    /* rotate: 0.8deg; */
}

.project_backing_whole_infer:hover .project_backing_infer {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_infer:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_bot {
    position: relative;
}

.project_home_image_short {
    object-fit: cover;
    width: 100%;
    height: 22vw;
    border-radius: 1px;
    border: 0.5px solid #c1c1c1;
}

.project_backing_bot {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_bot:hover {
    /* rotate: 0.8deg; */
}

.project_backing_whole_bot:hover .project_backing_bot {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_bot:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_debi {
    position: relative;
}

.project_backing_debi {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_debi:hover {
    /* rotate: 0.8deg; */
    /* animation-iteration-count: 1; */
}

.project_backing_whole_debi:hover .project_backing_debi {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_debi:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_multix {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    /* cursor: pointer; */
    z-index: 10;
}

.project_backing_whole_multix {
    position: relative;
}

.project_backing_emsi {
    border: 1px solid #F1F1F1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10;
}

.project_backing_whole_emsi {
    position: relative;
}

.project_backing_whole_emsi:hover {
    /* rotate: 0.8deg; */
}

.project_backing_whole_emsi:hover .project_backing_emsi {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_backing_whole_emsi:hover .project_backing_lower {
    border: 0.2px solid #1a3e2f;
    background-color: #f7f7f7;
}

.project_container {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-top: 40px;
    margin-bottom: 35px;
    margin-left: 40px;
    margin-right: 40px;
    align-items: left;
    gap: 12px;
    position: relative;
    height: 100%;
    min-height: 350px;
}

.hover_image {
    position: absolute;
    /* max-width: 200px;
    max-height: 100px; */
    bottom: 100px;
    height: auto;
    width: auto;
    right: 0px;
    display: none;
    color: black;
    z-index: 10;
    object-fit: contain;
    /* overflow: hidden; */
    border-radius: 30px;
}

.hover_image img {
    /* width: auto; */
    height: auto;
    object-fit: fill;
    /* Ensures the image fills the container */
    /* Adjust coordinates as per your requirement */
    border-radius: 25px;
    /* clip-path: inset(1px); */
}

.project_container:hover .hover_image {
    display: block;
}

.project_home_image {
    /* border-radius: 5px; */
    border: 0.8px solid #efefef;
    width: auto;
    object-fit: cover;
}

.project_container:hover .gradient_circle_pointer {
    background: radial-gradient(50% 50% at 50% 50%,
            var(--pointer-color) 0%,
            transparent 100%);
}

.project_tags_container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 5px;
}

.project_lower_text_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 40px;
    padding-right: 40px;
}

.project_lower_text {
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    letter-spacing: 0.25px;
    text-align: left;
    color: #1a3e2f;
    line-height: 18px;
    /* padding-top: 5px;
    padding-bottom:  */
    /*   font-family: "Oxygen"; */
}

.project_tag {
    border: 1px solid #F1F1F1;
    border-radius: 30px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #FFF8EB;
    color: #1a3e2f;
    font-family: "Oxygen", sans-serif;
    font-size: 16px;
}

.project_des_container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-end;
    /*   align-content: right; */
    justify-content: flex-end;
    margin-right: 0px;
    /*   border: 1px solid black; */
}

.line_100 {
    width: 100%;
    justify-content: center;
    stroke-width: 1px;
    stroke: var(--Main, #1a3e2f);
    opacity: 0.5;
}

body {
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    font-family: "Oxygen", sans-serif;
    background-color: #FFF8EB;
    margin: 0px;
    overflow-x: hidden;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1a3e2f;
    background-color: rgba(254, 248, 237, 0.9);
    padding: 10px 20px;
    width: 100%;
    max-width: 1700px;
    height: 85px;
    position: fixed;
    top: 0px;
    z-index: 20;
    padding-left: 70px;
    padding-right: 70px;
    /* padding-right: 107px; */
    /*   text-align: center; */
    /* border: 1px solid black; */
}

.site_logo {
    position: relative;
    width: 40px;
    top: 7px;
}

.index_page nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1a3e2f;
    background-color: transparent;
    padding: 10px 20px;
    font-weight: 400;
    width: 100%;
    max-width: 1700px;
    height: 85px;
    position: absolute;
    top: 10px;
    z-index: 20;
    padding-left: 70px;
    padding-right: 70px;
    /* border: 1px solid black; */
}

a {
    color: #1a3e2f;
}

nav a {
    color: #1a3e2f;
    text-decoration: none;
    font-weight: 400;
    margin: 0 10px;
    /* margin-left: 18px; */
    /* margin-top: 10px; */
    z-index: 20;
    /* border: 1px solid black; */
}

.left-links,
.center-links,
.right-links {
    display: flex;
    align-items: center;
    font-family: "Oxygen", sans-serif;
    color: #1a3e2f;
    font-weight: 400;
    font-size: 18px;
    /*   border: 1px solid black; */
}

.index_page .left-links {
    opacity: 0;
    transition: opacity 0.5s ease-in, transform 0.3s ease-in;
}

.index_page .left-links.show {
    opacity: 1;
}

.nav_text {
    font-family: "Oxygen", sans-serif;
    color: #1a3e2f;
    font-weight: 400;
    font-size: 18px;
    /*   border: 1px solid black; */
}

.nav_logo {
    width: 70px;
    height: auto;
}

.nav_logo_mobile {
    width: 85px;
    height: auto;
}

.center-links {
    margin-left: -50px;
    /* This centers the Margaret Zhou link */
}

.right-links {
    justify-content: flex-end;
}

.dropdown-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 30px;
    width: 50%;
    border-radius: 10px;
    border: 1px solid #F1F1F1;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.dropdown-menu a {
    padding: 12px 16px;
    text-decoration: none;
    color: #1a3e2f;
}

.dropdown-menu a:hover {
    background-color: #ddd;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-left: 0px;
    margin-top: 20px;
}

.menu-toggle span {
    background-color: #1a3e2f;
    height: 3.5px;
    margin: 3.5px 0;
    width: 28px;
    border-radius: 5px;
}

/* .overall_header_container {
    position: relative;
    z-index: -20;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: grid;
    grid-gap: 10px;
    max-width: 1700px;
} */


.draggable_container {
    position: relative;
}

.draggable {
    position: absolute;
    cursor: move;
    width: auto;
    height: auto;
    transform: none;
    transition: none;
    will-change: top, left;
    /* z-index: -3; */
}


#draggable1 {
    top: 100px;
    left: 54%;
    transform: none;
}

#draggable2 {
    top: 400px;
    left: 40%;
}

#draggable3 {
    top: 500px;
    left: 66%;
}

#draggable4 {
    top: 100px;
    left: 70%;
}

#draggable5 {
    top: 720px;
    left: 10%;
}

#draggable6 {
    top: 100px;
    left: 35%;
}

#draggable_title {
    width: 45%;
    min-width: 300px;
    max-width: 800px;
    z-index: 6;
}

#draggable_sub {
    width: 40%;
    min-width: 400px;
    max-width: 800px;
    z-index: 5;
}

p {
    margin: 0;
    padding: 0;
    font-family: "Oxygen", sans-serif;
}

.project_home_title {
    font-family: "Libre Caslon Text", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 25px;
    text-align: left;
    color: #1a3e2f;
    line-height: 28px;
    margin: 0;
}

.project_home_subtitle {
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 17px;
    letter-spacing: 0.25px;
    opacity: 0.6;
    text-align: left;
    color: #1a3e2f;
    line-height: auto;
    margin-top: -4px;
    margin-bottom: 3px;
}

h1 {
    font-size: 25px;
    font-family: "Libre Caslon Text", serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left;
    color: #1a3e2f;
    line-height: auto;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 50px;
    /* line-height: 80px; */
    font-family: "Libre Caslon Text", serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left;
    color: #1a3e2f;
    line-height: normal;
    margin-top: 2vw;
    margin-bottom: 12px;
    /* margin-left: 50px; */
    padding: 0px;
}

.footer_text {
    font-family: "Oxygen", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #1a3e2f;
    /*   font-family: "Oxygen"; */
}

.footer_container {
    /* margin-left: 20px; */
    /* margin-top: 100px; */
    font-family: "Oxygen", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    color: #FEF8ED;
    margin-bottom: 30px;
    bottom: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    /* z-index: 10; */
}

/* 
.footer .links {
    padding: 0.5rem 1rem 1.5rem;
    white-space: nowrap;
} */

.divider {
    padding: 0 1rem;
}

.image_container {
    margin-top: 150px;
    margin-bottom: 80px;
    /*   border: 1px solid black; */
}

.profile_pic {
    width: 400px;
    margin-left: 0px;
    margin-top: 150px;
    /*   border-radius: 200px; */
    /*   border: 1px solid black; */
}

.about_container {
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-content: left;
    justify-content: left;
    align-items: left;
    padding-left: 60px;
    padding-top: 100px;
    padding-bottom: 60px;
    padding-right: 52vw;
    /* border: 1px solid black; */
}

.about_text {
    width: auto;
    font-size: 26px;
    line-height: 40px;
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: normal;
    color: #1a3e2f;
}

.prof_container {
    margin-left: 100px;
}

.am_love_container {
    margin-top: 150px;
    width: auto;
    min-width: 100px;
    max-width: 1000px;
    display: flex;
    flex-direction: row;
    margin-left: 7%;
    /*   border: 1px solid black; */
}

.am_container {
    width: 500px;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    /*   border: 1px solid black; */
    gap: 40px;
}

.love_container {
    width: 500px;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    /*   border: 1px solid black; */
    gap: 40px;
}

.about_1 {
    width: auto;
    max-width: 380px;
    font-size: 18px;
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    line-height: 25px;
    color: #1a3e2f;
    /*   border: 1px solid black; */
}

.about_2 {
    width: auto;
    max-width: 400px;
    font-size: 18px;
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    line-height: 25px;
    color: #1a3e2f;
    /*   border: 1px solid black; */
}

.about_section {
    font-size: 28px;
    font-family: "Oxygen", sans-serif;
    font-weight: 500;
    color: #1a3e2f;
}

.about_title {
    width: auto;
    font-size: 25px;
    font-family: "Oxygen", sans-serif;
    font-weight: 500;
    line-height: 30px;
    color: #1a3e2f;
    margin-bottom: 10px;
    margin-top: 10px;
    /*   border: 1px solid black; */
}

.listen_icon {
    height: 50px;
    /*   border: 1px solid black; */
}

.empower_icon {
    height: 60px;
    /*   border: 1px solid black; */
}

.mundane_icon {
    height: 50px;
    /*   border: 1px solid black; */
}

.road_icon {
    height: 40px;
    /*   border: 1px solid black; */
}

.arch_icon {
    height: 50px;
    /*   border: 1px solid black; */
}

.dance_icon {
    height: 53px;
    /*   border: 1px solid black; */
}

.project_page_container {
    /* padding-top: 140px; */
    width: 100%;
    max-width: 1700px;
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    position: absolute;
    top: 100px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    /* overflow-x: hidden; */
    /*   border: 1px solid black; */
}

.question_container {
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 100px;
    /* border: 1px solid var(--Main, #61726B); */
}

.question_text {
    width: 50%;
    min-width: 400px;
    font-family: "Libre Caslon Text", serif;
    font-style: normal;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    color: #1a3e2f;
    /*   border: 1px solid black; */
}

.disclaimer_note {
    width: 50%;
    font-family: "Oxygen", sans-serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    color: #CA2D2D;
    /*   border: 1px solid black; */
}

.project_details_smill {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* background: #8885D6; */
    /*   border: 1px solid black; */
}

.smill_render_2 {
    width: 100%;
    position: relative;
}

.project_details_lane {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* background: #4294F0; */
    /*   border: 1px solid black; */
}

.project_details_debi {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* background: #8885D6; */
    /*   border: 1px solid black; */
}

.project_details_infer {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*   border: 1px solid black; */
}

.project_details_bot {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*   border: 1px solid black; */
}

.project_details_culinaid {
    width: 75%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* background: #27A500; */
    /*   border: 1px solid black; */
}

.detail_box {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: #F2EDEB;
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.detail_box_lane {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: rgba(66, 148, 240, 0.10);
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.detail_box_infer {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 30px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: rgba(145, 169, 127, 0.20);
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.detail_box_culinaid {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: rgba(235, 242, 221, 0.50);
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.detail_box_bot {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: #FAE7DD;
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.detail_box_debi {
    width: calc((100% / 3) + 1px);
    min-width: 300px;
    height: 300px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    background: #E8EEF8;
    z-index: 5;
    border: 3px solid #FEF8ED;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 10px;
}

.project_name {
    font-size: 40px;
    text-align: center;
    color: #FFFFFF;
    font-family: "Libre Caslon Text", serif;
    font-weight: 800;
    letter-spacing: 0.5px;
    /*   border: 1px solid black; */
}

.project_info {
    /*   border: 1px solid black; */
    display: flex;
    flex-direction: column;
    font-family: "Libre Caslon Text", serif;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-content: center;
    gap: 30px;
}

.details_title {
    font-size: 16px;
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    letter-spacing: 0.25px;
    color: #FFFFFF;
    /*   border: 1px solid black; */
}

.details_info {
    font-size: 18px;
    font-family: "Oxygen", sans-serif;
    letter-spacing: 0.25px;
    font-weight: 800;
    margin-top: 5px;
    color: #FFFFFF;
    line-height: 28px;
    /*   border: 1px solid black; */
}

.project_role {
    width: 300px;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-content: center;
    /*   border: 1px solid black; */
}

.project_details_smill .details_title {
    color: #4149A2;
    font-style: normal;
    font-weight: 200;
}

.project_details_smill .project_name {
    color: #4149A2;
}

.project_details_smill .details_info {
    color: #4149A2;
}

.project_details_lane .details_title {
    color: #316FB3;
}

.project_details_lane .details_info {
    color: #316FB3;
}

.project_details_lane .project_name {
    color: #316FB3;
}

.project_details_infer .details_title {
    color: #5B724C;
}

.project_details_infer .details_info {
    color: #5B724C;
}

.project_details_infer .project_name {
    color: #5B724C;
}

.project_details_culinaid .details_title {
    color: #1B912B;
}

.project_details_culinaid .details_info {
    color: #1B912B;
}

.project_details_culinaid .project_name {
    color: #1B912B;
}

.project_details_bot .details_title {
    color: #CA2D2D;
}

.project_details_bot .details_info {
    color: #CA2D2D;
}

.project_details_bot .project_name {
    color: #CA2D2D;
}

.project_details_debi .details_title {
    color: #466CAD;
}

.project_details_debi .details_info {
    color: #466CAD;
}

.project_details_debi .project_name {
    color: #466CAD;
}

.project_title {
    font-size: 40px;
    text-align: left;
    justify-content: left;
    align-items: left;
    align-content: left;
    color: #1a3e2f;
    font-family: "Libre Caslon Text", serif;
    font-weight: 800;
    /* letter-spacing: 0.5px; */
    margin-top: 15px;
    width: auto;
}

.project_title_logo {
    height: 50px;
}

.project_subtitle {
    font-size: 18px;
    text-align: left;
    justify-content: left;
    align-items: left;
    align-content: left;
    color: #1a3e2f;
    font-style: italic;
    font-family: "Oxygen", sans-serif;
    font-weight: 300;
    /* letter-spacing: 0px; */
    line-height: 28px;
    opacity: 0.8;
    margin-top: 10px;
    margin-bottom: 30px;
}

/* .debi .project_title,
.debi .project_subtitle {
    color: #466CAD;
}

.smill .project_title,
.smill .project_subtitle {
    color: #4149A2;
}

.lane .project_title,
.lane .project_subtitle {
    color: #316FB3;
}

.multix .project_title,
.multix .project_subtitle {
    color: #316FB3;
}

.culinaid .project_title,
.culinaid .project_subtitle {
    color: #1B912B;
}

.infernodes .project_title,
.infernodes .project_subtitle {
    color: #5B724C;
}

.bot .project_title,
.bot .project_subtitle {
    color: #CA2D2D;
} */

.intro_box {
    position: relative;
    width: 100%;
    height: auto;
    /* border: 1px solid var(--Main, #61726B); */
    text-align: left;
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    padding-top: 45px;
    padding-left: 90px;
    padding-bottom: 0px;
    padding-right: 90px;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 50px;
    background: #FFF8EB;
    margin-top: -1px;
}

.intro_text {
    width: 70%;
    min-width: 300px;
    max-width: 750px;
    position: relative;
    /* margin-bottom: 20px; */
    /* top: 60px; */
    /* margin-left: 90px; */
    /* margin-bottom: 150px; */
}

.intro_source {
    position: relative;
    font-size: 15px;
    justify-content: left;
    align-items: left;
    align-content: left;
    top: -20px;
    right: 0px;
    color: #1a3e2f;
    margin: 0px;
    padding: 0px;
    opacity: 0.6;
    font-style: italic;
}


.intro_visual {
    position: relative;
    max-width: 750px;
    min-width: 300px;
    height: auto;
    width: auto;
    justify-content: center;
    align-items: left;
    align-content: center;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 35px;
    border-radius: 5;
    /* border: 1px solid rgba(0, 0, 0, 0.20); */
    padding-top: 25px;
    padding-bottom: 30px;
}

.intro_video {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    align-items: left;
    gap: 12px;
    position: relative;
}

.index_video {
    width: 100%;
    /* min-width: 50px; */
    /* max-width: 300px; */
    display: flex;
    position: relative;
    border-radius: 1px;
    border: 0.8px solid #efefef;
    width: auto;
    object-fit: cover;
}

/* .intro_visual_row {
    position: relative;
    max-width: 100%;
    min-width: 300px;
    height: auto;
    width: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
    border-radius: 0;
    padding: 0px;
} */

.intro_visual_row {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    align-items: flex-start;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.visual_image {
    width: 40px;
}

.visual_gradient {
    width: 40px;
    height: 40px;
    fill: radial-gradient(50% 50% at 50% 50%, #637FB9 0%, rgba(99, 127, 185, 0.00) 100%);
}

.visual_icon_container {
    display: flex;
    padding: 30px 25px;
    flex-direction: column;
    align-items: flex-start;
    gap: 13.765px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 7px;
    border: 1.377px solid #E2E2E2;
    min-width: 200px;
    background: #FFF;
}

.visual_icon_title {
    color: #8187F4;
    -webkit-text-stroke-width: 0.10000000149011612;
    -webkit-text-stroke-color: #8187F4;
    font-family: Oxygen;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.visual_icon_text {
    color: #262A4F;
    font-family: Oxygen;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 144.444% */
}

.proposal_text_box {
    position: relative;
    width: 100%;
    height: auto;
    /* border: 0.5px solid var(--Main, #1A3E2F); */
    text-align: left;
    /* border: 1px solid var(--Main, #61726B); */
    display: flex;
    /* align-items: flex-end; */
    /* flex-direction: space-between; */
    background: #FFF8EB;
}

.proposal_box {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* height: 900px; */
    /* border: 0.5px solid var(--Main, #1A3E2F); */
    /* border: 1px solid var(--Main, #61726B); */
    margin-top: -1px;
    margin-left: 1px;
    text-align: center;
    align-items: center;
    /* justify-content: center; */
    display: flex;
    /* align-items: flex-end; */
    flex-direction: column;
    flex-wrap: wrap;
    background: #FFF8EB;
    gap: 100px;
}

.proposal_section {
    position: relative;
    width: 85%;
    /* height: 900px; */
    /* border: 0.5px solid var(--Main, #1A3E2F); */
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    /* align-items: flex-end; */
    flex-direction: column;
    background: #FFF8EB;
    gap: 40px;
}

.proposal_video {
    position: relative;
    width: 100%;
    height: 500px;
    top: -20px;
    bottom: 100px;
    /* margin: 0px; */
    /* border: 1px solid black; */
}

.proposal_text {
    width: 500px;
    min-width: 500px;
    position: relative;
    padding-top: 80px;
    padding-left: 80px;
}

.proposal_visual {
    position: relative;
    max-width: 75%;
    min-width: 300px;
    height: auto;
    width: 75%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 100px;
    border-radius: 0px;
    /* border: 1px solid rgba(0, 0, 0, 0.20); */
}

.proposal_gif {
    max-height: 500px;
    border-radius: calc(45px - ((100vw / 100) / 2));
}

.project_process_title {
    font-family: "Libre Caslon Text", serif;
    font-size: 37px;
    color: #1a3e2f;
    font-weight: 500px;
    margin-top: 0px;
    margin-bottom: 15px;
    line-height: normal;
}

.project_process_text {
    font-family: "Oxygen", sans-serif;
    font-size: 17px;
    color: #1a3e2f;
    margin-top: 30px;
    margin-bottom: 10px;
    line-height: 25px;
    opacity: 0.9;
}

.project_proposal_title {
    font-family: "Oxygen", sans-serif;
    font-size: 37px;
    color: #1a3e2f;
    font-weight: 500;
}

.project_proposal_text {
    font-family: "Oxygen", sans-serif;
    font-size: 16px;
    line-height: 23px;
    color: #1a3e2f;
    margin-top: 30px;
    /* margin-bottom: 20px; */
}

.render_box {
    width: 85%;
    height: auto;
    /* border: 0.5px solid var(--Main, #1A3E2F); */
    position: relative;
    margin-top: -1px;
}

.render_image {
    height: 100%;
    /* justify-content: center;
    align-items: center; */
    position: relative;
    margin-bottom: -4px;
    /* left: -90px; */
    /* margin: -10px; */
    padding: 0;
    /* border: 0.5px solid var(--Main, #1A3E2F); */
}

.problem_svg {
    top: 250px;
    left: 510px;
    width: 1000px;
}

.feature {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 0;
}

.feature_reverse {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 0;
}

.feature_text_left {
    color: #52A3FF;
    font-weight: 800;
    font-size: 30px;
    width: 500px;
    text-align: right;
}

.feature_text_right {
    color: #52A3FF;
    font-weight: 800;
    font-size: 30px;
    width: 500px;
    text-align: left;
}

.locus_header_container {
    max-width: 1700px;
    width: 100%;
    display: flex;
    text-align: left;
    justify-content: flex-start;
    align-items: left;
    align-content: left;
}

.locus_header {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1700px;
    padding-top: 15vw;
    padding-bottom: 150px;
    padding-left: 70px;
    padding-right: 70px;
    height: auto;
    gap: 13vw;
    /* border: 1px solid black; */
}

.locus_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.locus_subtitle {
    color: var(--Main, #1A3E2F);
    font-family: Oxygen;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.locus_gallery_container {
    max-width: 1700px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 69px;
    /* border: 1px solid black; */
    padding-left: 70px;
    padding-right: 70px;
}

.gallery_item {
    display: flex;
    align-items: flex-start;
    gap: 42px;
    align-self: stretch;
}

.gallery_image {
    width: 50%;
}

.gallery_text {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.gallery_title {
    color: var(--Main, #1A3E2F);
    align-self: stretch;
    font-family: "Libre Caslon Text";
    font-size: 30px;
    /* font-style: italic; */
    font-weight: 400;
    line-height: normal;
}

.gallery_subtitle {
    color: var(--Main, #1A3E2F);
    align-self: stretch;
    font-family: Oxygen;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media only screen and (max-width: 700px) {

    .gradient_circle {
        content: "";
        position: absolute;
        margin-top: -350px;
        left: 50%;
        transform: none;
        width: 20px;
        height: 20px;
        background-image: radial-gradient(40.97% 40.93% at 47.56% 47.41%,
                #96BAFF 0%,
                rgba(150, 186, 255, 0.00) 100%);
        border-radius: 50%;
        z-index: -2;
        display: none;
    }

    .gradient_circle_alt {
        content: "";
        position: absolute;
        margin-top: -350px;
        left: 50%;
        transform: none;
        width: 20px;
        height: 20px;
        background-image: radial-gradient(40.97% 40.93% at 47.56% 47.41%,
                #96BAFF 0%,
                rgba(150, 186, 255, 0.00) 100%);
        border-radius: 50%;
        z-index: -2;
        display: none;
    }

    .gradient_circle_pointer {
        /* width: 50px;
        /* Adjust size as needed */
        height: 50px;
        /* Adjust size as needed */
        border-radius: 50%;
        top: 0px;
        position: fixed;
        pointer-events: none;
        /* Ensures the circle doesn't interfere with mouse events */
        background: radial-gradient(50% 50% at 50% 50%,
                #c5aaec 0%,
                rgba(197, 170, 236, 0) 0%);
        transition: transform 0.1s linear;
        /* Smooth transition for better visual effect */
        z-index: -10;
    }

    #game_start_button {
        display: none;
    }

    /* .h1 {
        line-height: 37px;
    } */

    .left-links,
    .center-links,
    .right-links {
        display: none;
    }

    .index_page nav {
        padding-left: 20px;
    }

    nav {
        position: absolute;
        padding-left: 20px;
    }

    .menu-toggle {
        display: flex;
        /* justify-content: center; */
    }

    .dropdown-menu {
        display: none;
        /* justify-content: center; */
    }

    .header_container {
        display: flex;
        /* max-width: 1700px; */
        flex-wrap: wrap;
        justify-content: left;
        height: auto;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
        padding-top: 150px;
        gap: 40px;
        overflow-x: auto;
    }

    .text_container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* .header_container h3 {
        margin-left: 40px;
    } */

    .title_container {
        width: 100%;
    }

    h1 {
        font-size: 20px;
        width: 100%;
        margin-left: 0px;
        line-height: auto;
    }

    .header_hover {
        font-size: 20px;
        width: 100%;
        margin-left: 0px;
        text-decoration: wavy underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }

    .subtitle_container {
        font-size: 14px;
        width: 100%;
        /* margin-left: -10px; */
    }

    h2 {
        font-size: 26px;
        margin-left: 0px;
        line-height: 40px;
    }

    .header_link {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        font-family: "Oxygen", sans-serif;
        font-weight: 200;
        font-size: 20px;
    }

    .all_work_container {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 20px;
        margin-top: 50px;
        min-width: 10px;
        justify-content: left;
        column-gap: 0px;
        background-color: #FFF8EB;
    }

    .project_container {
        width: auto;
        min-width: 50px;
        height: auto;
        min-height: 50px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        align-content: left;
        justify-content: left;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 30px;
        margin-right: 30px;
    }

    .project_home_image {
        width: auto;
        height: auto;
        /* min-width: 50px; */
    }

    .project_home_image_short {
        object-fit: cover;
        width: 400px;
        height: 220px;
    }

    .project_backing {
        margin-left: 40px;
        margin-right: 40px;
        width: auto;
        height: auto;
        /* min-width: 50px; */
    }

    .project_backing:hover {
        animation: none;
        /* animation-iteration-count: 1; */
    }

    .project_tags_container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 5px;
    }

    .project_container .project_home_title {
        font-size: 26px;
    }

    .project_container .project_home_subtitle {
        font-size: 17px;
    }

    /* .project_container h4 {
        font-size: 10px;
    } */

    .project_lower_text_container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .project_name {
        font-size: 43px;
    }

    .details_title {
        font-size: 15px;
        font-weight: 200;
        margin-bottom: 0px;
    }

    .project_info {
        gap: 15px;
    }

    .details_info {
        font-size: 18px;
        font-weight: 500;
    }

    .project_des_container {
        /* min-width: 500px; */
        /* height: auto; */
        /* min-width: 200px; */
        width: auto;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        /* right: 10px; */
        flex-direction: column;
        text-align: left;
        /* justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start; */
        /* align-items: flex-start; */
        /* text-align: left;
            justify-content: left;
            align-content: left; */
        margin-right: 0px;
        /* margin-bottom: 10px; */
    }

    .project_des_container h4 {
        /* min-width: 300px; */
        width: 100%;
        font-size: 24px;
        /* height: auto; */
        /* flex-wrap: wrap; */
        position: relative;
        /* right: 10px; */
        flex-direction: column;
        text-align: left;
        /* text-align: left;
            justify-content: left;
            align-content: left; */
        margin-right: 0px;
    }

    .project_des_container h3 {
        /* min-width: 300px; */
        width: 100%;
        font-size: 23px;
        /* height: auto; */
        /* flex-wrap: wrap; */
        position: relative;
        /* right: 10px; */
        text-align: left;
        /* text-align: left;
            justify-content: left;
            align-content: left; */
    }

    .project_details_smill {
        width: 100vw;
        padding-left: 18px;
        padding-right: 17px;
        gap: 8px;
    }

    .project_details_debi {
        width: 100vw;
        padding-left: 18px;
        padding-right: 17px;
        gap: 8px;
    }

    .project_details_lane {
        width: 100vw;
        padding-left: 18px;
        padding-right: 17px;
        gap: 8px;
    }

    .project_details_culinaid {
        width: 100vw;
        padding-left: 18px;
        padding-right: 17px;
        gap: 8px;
    }

    .project_details_bot {
        width: 100vw;
        padding-left: 18px;
        padding-right: 17px;
        gap: 8px;
    }

    .proposal_text {
        padding: 0px 0px;
        width: auto;
        min-width: 50px;
    }

    .detail_box {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_box_infer {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_box_lane {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_box_culinaid {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_box_bot {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .detail_box_debi {
        width: 100%;
        height: auto;
        min-width: 50px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .intro_text {
        width: 100%;
        font-size: 20px;
        text-align: left;
        /* margin-bottom: 40px; */
        min-width: 50px;
    }

    .intro_visual {
        width: 100%;
    }

    .hover_image {
        position: absolute;
        /* max-width: 200px;
            max-height: 100px; */
        bottom: 120%;
        justify-content: center;
        align-items: center;
        align-content: center;
        right: 10%;
        display: none;
        color: black;
        z-index: 10;
        object-fit: contain;
        /* overflow: hidden; */
    }

    .intro_box {
        width: 100%;
        padding: 25px 30px;
        margin-left: 1px;
        margin-top: -1px;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
    }

    .question_text {
        font-size: 30px;
        padding: 10px;
        width: auto;
        min-width: 50px;
        /* Decrease font size for smaller screens */
    }

    .question_container {
        padding: 40px;
    }

    .project_process_text {
        width: 100%;
        margin-top: 20px;
        line-height: 23px;
        font-size: 16px;
        margin-bottom: 20px;
        min-width: 50px;
    }

    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

    .project_page_container {
        flex-wrap: wrap;
        padding-top: 30px;
    }

    .intro_box {
        flex-wrap: wrap;
    }

    .debi {
        margin-left: 60px;
        margin-right: 60px;
    }

    .project_title {
        font-size: 38px;
        width: auto;
        min-width: 50px;
        margin-top: 5px;
    }

    .project_subtitle {
        font-size: 18px;
        width: 100%;
        width: 100%;
        margin-top: 8px;
        line-height: 25px;
        margin-bottom: 5px;
        min-width: 50px;
    }

    .intro_video {
        width: 100%;
        min-width: 50px;
        max-width: 630px;
        /* margin-left: 60px; */
        /* margin-right: 60px; */
        align-items: left;
        position: relative;
    }

    .index_video {
        width: 100%;
        min-width: 50px;
        max-width: 700px;
        position: relative;
    }

    .proposal_box {
        width: 100%;
        padding: 10px 20px;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }

    .proposal_text_box {
        padding: 0px 0px;
        margin-top: 30px;
        height: auto;
        width: 100%;
        min-width: 50px;
    }

    .proposal_section {
        padding: 20px;
    }

    .project_process_title {
        font-size: 30px;
        width: auto;
        min-width: 50px;
        line-height: normal;
        /* Decrease font size for smaller screens */
    }

    .project_proposal_title {
        font-size: 30px;
        top: 50px;
        /* Decrease font size for smaller screens */
    }

    /* .project_proposal_text {
        font-size: 30px;
        top: 50px;
        /* Decrease font size for smaller screens */
    /* } */


    .proposal_video {
        height: auto;
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .render_image {
        width: 100%;
        /* Ensure image takes full width */
        height: calc(auto + 2px);
        margin-left: 1px;
        /* Allow image height to adjust */
    }

    .smill_render_2 {
        width: 100%;
        margin-left: 0px;
        left: 0px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .proposal_visual {
        min-width: 50px;
        width: 100%;
        justify-content: center;
        border-radius: 0px;
        text-align: center;
        align-items: center;
        /* border: 1px solid rgba(0, 0, 0, 0.20); */
    }

    .proposal_gif {
        border-radius: calc(30px - (100vw / 100) * 0.1);
        /* border-radius: 0px; */
    }

    .feature {
        display: flex;
        width: auto;
        flex-direction: column;
        gap: 40px;
        margin-top: 0;
    }

    .feature_reverse {
        display: flex;
        width: 100%;
        flex-direction: column-reverse;
        gap: 40px;
        margin-top: 0;
        justify-content: center;
        align-items: center;
    }

    .feature_text_left {
        /* color: #52A3FF;
        font-weight: 800;
        font-size: 30px;
        width: 500px; */
        /* border-radius: 5px; */
        width: auto;
        text-align: center;
    }

    .feature_text_right {
        /* color: #52A3FF;
        font-weight: 800;
        font-size: 30px;
        width: 500px; */
        width: auto;
        flex-direction: column-reverse;
        text-align: center;
    }

    .about_container {
        flex-direction: column;
    }

    .am_container {
        width: auto;
        margin-right: 30px;
    }

    .am_love_container {
        flex-direction: column;
        gap: 150px;
        margin-left: 30px;
        margin-top: 60px;
    }

    .love_container {
        width: auto;
        margin-right: 30px;
    }

    .prof_container {
        margin-left: 40px;
        margin-right: 40px;
    }

    .footer_text {
        text-align: center;
        /* Center align footer text */
        margin: 20px 30px;
        position: relative;
        /* Adjust margin */
    }

    .locus_header {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 150px;
        padding-bottom: 150px;
        padding-left: 30px;
        padding-right: 30px;
        height: auto;
        gap: 13vw;
        /* border: 1px solid black; */
    }

    .locus_title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
    }

    .locus_subtitle {
        color: var(--Main, #1A3E2F);
        font-family: Oxygen;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .locus_gallery_container {
        max-width: 1700px;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 69px;
        /* border: 1px solid black; */
        padding-left: 30px;
        padding-right: 30px;
    }

}

/******************************************************************************
  END Glitch hello-app default styles
  ******************************************************************************/

/* Page structure */
.wrapper {
    min-height: var(--wrapper-height);
    display: flex;
    place-items: left;
    margin: 0 auto;
    width: 100%;
    max-width: 1700px;
    /*   background-color: #F5F1EC; */
}

.content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    flex-grow: 1;
}

footer {
    display: flex;
    margin-top: 80px;
    text-align: center;
    align-items: center;
    justify-content: center;
}