@charset "utf-8";
/* CSS Document */


/*Font styles and tokens*/
@font-face {
    font-family: 'Montserrat';
    src: url(Fonts/Montserrat/Montserrat-Medium.ttf);
}

@font-face {
    font-family: 'Orbitron';
    src: url(Fonts/Orbitron/Orbitron-Medium.ttf);
}

/* This will style the main scrollbar (vertical) */
::-webkit-scrollbar {
    width: .125rem; /* width of the entire scrollbar */
}

::-webkit-scrollbar-thumb {
    background: #F54F2B; /* color of the scroll thumb */
    border-radius: 4px; /* roundness of the scroll thumb */
    border: 3px transparent; /* creates padding around scroll thumb */
    padding: .125rem; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #acacac; /* color of the scroll thumb when hovered */
}


h1 {
    font-family: 'Orbitron';
    font-size: 2rem;
    color: #f4f4f4;
    margin: 0 0 1rem 0;
    padding: 0;
    kerning: .25rem;
}

h2 {
    font-family: 'Orbitron';
    font-size: 1.5rem;
    color: #acacac;
    margin: 0 0 1rem 0;
    padding: 0;
    kerning: .25rem;
}

h3 {
    font-family: 'Orbitron';
    font-size: 1.14rem;
    color: #acacac;
    margin: 0 0 .5rem 0;
    padding: 0;
    kerning: .25rem;
}

p {
    font-family: 'Montserrat';
    font-size: 1rem;
    color: #acacac;
    margin: 0 0 .5rem 0;
    padding: 0;
}

li {
    font-family: 'Orbitron';
    font-size: 1rem;
    color: #acacac;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 600px) {
    h1 {
        font-family: 'Orbitron';
        font-size: 1.5rem;
        color: #f4f4f4;
        margin: 0 0 1rem 0;
        padding: 0;
    }
    
    h2 {
        font-family: 'Orbitron';
        font-size: 1rem;
        color: #acacac;
        margin: 0 0 .5rem 0;
        padding: 0;
    }
    
    h3 {
        font-family: 'Orbitron';
        font-size: .5rem;
        color: #acacac;
        margin: 0 0 .5rem 0;
        padding: 0;
    }
    
    p {
        font-family: 'Montserrat';
        font-size: .625rem;
        color: #acacac;
        margin: 0 0 .5rem 0;
        padding: 0;
    }
    
    li {
        font-family: 'Orbitron';
        font-size: 1rem;
        color: #acacac;
        margin: 0;
        padding: 0;
    }
}
/*_____________________________________________________________________*/

html {
    background-color: #1A222A;
    font-size: 16px;
}

body {
    margin: 0;
}

/* Styles for the container */
nav {
    position: fixed;
    width: 100%;
    z-index: 10000;
}

.navContainer {
    position: static;
    height: 48px;
    display: flex;
    align-items: center;
}

.panelContainer {
    position: static;
    height: 48px;
    display: flex;
    align-items: center;
}

/* Styles for the navbar and hamburger icon */
.navbar {
    background-color: transparent;
    justify-content: flex-start;
}

.navHamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 8px 8px 8px 8px;
    margin-left: 16px;
}

.panelHamburger {
    cursor: pointer;
    padding: 8px 8px 8px 8px;
    margin-left: 16px;
}


.bar {
    background-color: #F54F2B;
    height: 3px;
    width: 25px;
    margin: 2px 0;
    transition: 0.4s;
    border-radius: 5px;
}

.panelHamburgerBar {
    background-color: #F54F2B;
    height: 3px;
    width: 25px;
    transition: 0.4s;
    border-radius: 5px;
}

/* Styles for the overlay */
.navOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.contentOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

/* Styles for the side panel */
.side-panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: -500px; /* Initially hidden off the screen */
    width: 250px;
    height: 100%;
    background-color: #1A222A;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 3;
    box-shadow: 3px 0 25px #1A222A; /* Add a right-side drop shadow */
}

/* Styles for the side panel hamburger */
.side-panel .hamburger {
    position: static;
}

/* Styles for the side panel hamburger bars (added styles) */
.side-panel .hamburger .bar {
    height: 3px;
    width: 25px;
    margin: 2px 0;
    transition: 0.4s; /* Add transition for smooth animation */
    border-radius: 5px; /* Rounded corners for the bars */
}

.side-panel ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px 16px 8px 16px;
}

.side-panel ul li {
    padding: 8px;
    text-align: left;
    font: h2;
}

.side-panel ul li a {
    color: #F54F2B;
    text-decoration: none;
    transition: 0.3s;
}

.side-panel ul li a:hover {
    color: #E82010;
}

/* Intro section and styling */

.introSection {
    display: flow-root;
    height: 100vh;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px -20px 20px #0F1418;
}

.introSection1 {
    display: flex;
    height: 100vh;
    justify-content: space-evenly;
    box-shadow: inset 0px -20px 20px #0F1418;
}

.introImage {
    width: 50%;
    height: auto;
    transform: scaleX(-1);
    shape-outside: url(Images/AI_headshot_transparent_facing_right.png);
    float: left;
    shape-margin: 2rem;
}

.introImage1 {
    width: 30%;
    max-width: 50%;
    height: auto;
    object-fit: contain;
}

.introContent {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.introContent1 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 50%;
}

.introTitle {
    font-family: 'Orbitron';
    font-size: 3rem;
    color: #f4f4f4;
    padding: 0px;
    margin: 0px;
}

.introTitle1 {
    font-family: 'Orbitron';
    font-size: 3rem;
    color: #f4f4f4;
    padding: 0px;
    margin: 0 0 1rem 0;
    max-width: 500px;
}

.introSubTitle {
    font-family: 'Orbitron';
    font-size: 2rem;
    color: #acacac;
    padding: 0px;
    margin: 0px 0px 16px 0px;
}

.introSubTitle1 {
    font-family: 'Orbitron';
    font-size: 2rem;
    color: #acacac;
    padding: 0px;
    margin: 0;
}

.introParagraph {
    font-family: 'Montserrat';
    font-size: 1rem;
    color: #acacac;
    padding: 0px;
    margin: 0px;
    width: 75%;
}

.introParagraph1 {
    font-family: 'Montserrat';
    font-size: 1rem;
    color: #acacac;
    padding: 0px;
    margin: 0px;
}

/* Top portfolio pieces */

.projectSection {
    background-color: #0F1418;
    padding: 1rem;
    padding-top: 4rem;
    /*box-shadow: inset 0px 20px 20px #1A222A;*/
}

.divRow {
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 2rem 4rem 2rem 4rem;
    background-color: #0F1418;
    /*margin: 1rem 2rem 1rem 2rem;*/
    /*margin: 4rem 4rem 4rem 4rem;*/
    padding: 2rem;
    box-shadow: 0px 0px 5px #06090B;
    border-radius: .5rem;
}

.divRowImg {
    width: 50%;
    height: auto;
    position: absolute;
    top: -100px;
    right: -50px;
}

.divRowImg2 {
    width: 40%;
    height: auto;
    position: absolute;
    top: -50px;
    right: -50px;
    filter: brightness(65%);
}

.divRowImg3 {
    width: 35%;
    height: auto;
    position: absolute;
    top: 5%;
    right: -50px;
    filter: brightness(85%);
}

.divRowImg4 {
    width: 30%;
    height: auto;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.divRowImg5 {
    width: 30%;
    height: auto;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: brightness(75%);
}

.divRowImg6 {
    width: 40%;
    height: auto;
    position: absolute;
    top: -50px;
    right: -50px;
    filter: brightness(85%);
}

.divRowImg7 {
    width: 30%;
    height: auto;
    position: absolute;
    top: -60px;
    right: 40px;
    filter: brightness(85%);
}

.divRowContent {
    width: 35%;
}

.subP {
    margin-top: 1rem !important;
}

.projectButton {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #F54F2B;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2rem 1rem 2rem !important;
    margin-top: 1.5rem !important;
}

.projectButton h3 {
    font-family: 'Orbitron' !important;
    font-size: 1rem;
    color: #0F1418 !important;
    margin: 0 !important;
}

.projectButton2 {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #F54F2B;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2rem 1rem 2rem !important;
    margin-top: 1.5rem !important;
}

.projectButton2 h3 {
    font-family: 'Orbitron' !important;
    font-size: 1rem;
    color: #0F1418 !important;
    margin: 0 !important;
}

.projectButton3 {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #F54F2B;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2rem 1rem 2rem !important;
    margin-top: 1.5rem !important;
}

.projectButton3 h3 {
    font-family: 'Orbitron' !important;
    font-size: 1rem;
    color: #0F1418 !important;
    margin: 0 !important;
}

.projectButton4 {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #F54F2B;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2rem 1rem 2rem !important;
    margin-top: 1.5rem !important;
}

.projectButton4 h3 {
    font-family: 'Orbitron' !important;
    font-size: 1rem;
    color: #0F1418 !important;
    margin: 0 !important;
}

/* Overlay panel that activates from the button being clicked */
/* Panel initially off-screen */
/* Panel content */
#overlayContentPanel {
    position: fixed;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    bottom: -100%; /* Start off-screen */
    background-color: #1A222A;
    width: 80%;
    height: 80%; /* Height of the panel */
    z-index: 2;
    transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
    visibility: hidden;
    padding: 2rem;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
}

.panelContentHeader {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
}

.panelRowImg {
    width: 50%;
    height: auto;
    position: relative;
    order: 1;
}

.panelRowContent div h2{
    margin-bottom: .5rem;
    margin-top: 2rem;
}

.panelRowContent div p{
    margin-top: 0;
}

.title_IMG {
    padding-bottom: 2rem;
}

.title_IMG img{
    filter: brightness(80%);
    width: 60%;
}

.soarVideo {
    max-width: 80%;
    width: auto;
    height: auto;
    margin-top: 1rem;
}

.soarVideo video {
    width: 100%;
}

.ifDesignAward div {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.ifDesignAward div img {
    width: 100%;
    height: auto;
    filter: brightness(80%);
}

.contributionAward {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
}

.contributionAward div img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#overlayContentPanel2 {
    position: fixed;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    bottom: -100%; /* Start off-screen */
    background-color: #1A222A;
    width: 80%;
    height: 80%; /* Height of the panel */
    z-index: 2;
    transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
    visibility: hidden;
    padding: 2rem;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
}

.panelRowImg2 {
    width: 50%;
    height: auto;
    position: relative;
    order: 1;
    filter: brightness(65%);
}

#overlayContentPanel3 {
    position: fixed;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    bottom: -100%; /* Start off-screen */
    background-color: #1A222A;
    width: 80%;
    height: 80%; /* Height of the panel */
    z-index: 2;
    transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
    visibility: hidden;
    padding: 2rem;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
}

.panelRowImg3 {
    width: 50%;
    height: auto;
    object-fit: contain;
    position: relative;
    order: 1;
    filter: brightness(85%);
    left: 100px;
}

#overlayContentPanel4 {
    position: fixed;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    bottom: -100%; /* Start off-screen */
    background-color: #1A222A;
    width: 80%;
    height: 80%; /* Height of the panel */
    z-index: 2;
    transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
    visibility: hidden;
    padding: 2rem;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
}

.panelRowContent4 {
    padding-right: 2rem;
}

.panelRowImg4 {
    width: 50%;
    height: auto;
    object-fit: contain;
    order: 1;
    left: 100px;
}

.carbonContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.carbonContent div {
    padding-right: 2rem;
}

.carbonButton {
    margin: .5rem 0 0 0 !important;
    border: 2px #acacac solid;
    padding: .5rem 2rem .5rem 2rem;
    display: inline-block;
    text-align: center;
    border-radius: 2rem;
}

.carbonButton a {
    text-decoration: none;
    color: #acacac;
}

.carbonContent img {
    width: 50%;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------Resume page -----------------------------------------------------*/

.resumeSection {
    width: auto;
    height: auto;
}

.resume {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.resume img {
    max-width: 70%;
    width: auto;
    height: auto;
    box-shadow: 0px 0px 20px 2px #06090B;
    margin-top: 5rem;
}

.resumeButton {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #F54F2B;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2rem 1rem 2rem !important;
    margin: 1.5rem 0 5rem 0;
}

.resumeButton h3 {
    font-family: 'Orbitron' !important;
    font-size: 1rem;
    color: #0F1418 !important;
    margin: 0 !important;
}

.designerFeedback {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 4rem;
}

.feedbackContent {
    max-width: 37rem;
}

.feedbackContent p {
    margin: 1rem !important;
    margin: 2rem 4rem 2rem 4rem;
    background-color: #0F1418;
    /*margin: 1rem 2rem 1rem 2rem;*/
    /*margin: 4rem 4rem 4rem 4rem;*/
    padding: 2rem;
    box-shadow: 0px 0px 5px #06090B;
    border-radius: .5rem;
}

/* ------------------------------------------Soteria project use case -----------------------------------------------------*/
.headerSection {
    position: relative;
    height: 60vh;
    overflow: hidden;
    box-shadow: inset 0px -20px 20px #1A222A;
}

.headerImg {
    position: absolute;
    object-fit: contain;
    filter: brightness(20%);
    z-index: -1;
    top: 0;
    left: 50%; 
    transform: translate(-70%, -20%); 
}

.headerSection div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: -20%;
    bottom: 20%;
}

.headerSection div h1 {
    font-size: 8rem;
    margin-bottom: 0 !important;
}

.headerSection div img {
    width: 40%;
}

.projectContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
}

.titleContent {
    width: 43.75rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
    position: relative;
}

.titleImg {
    display: flex;
    flex-direction: column;
    max-width: 43.75rem;
    margin-bottom: 4rem;
}

.headshotContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    border: 1px solid #f4f4f4; 
    overflow: hidden;
    margin-right: 1rem;
    flex-shrink: 0;
}

.headshot {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: brightness(65%)
}

.mayPersona {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 1rem;
}

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

.mayBio h2 {
    margin: 0 0 .5rem 0 !important;
}

.mayInsights {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mayInsights div{
    margin-right: 2rem;
}

#imageSoteria img {
    object-fit: contain;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.havenJourney {
     margin-top: 2rem;
}

.havenJourney div {
    margin-bottom: 2rem;
}

.havenWireflow img{
    object-fit: contain;
    width: 100%;
    height: auto;
}

#overlaySoteria {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    z-index: 1000000;
    overflow-x: auto;
    overflow-y: hidden;
}

#largeImg {
    display: block;
    position: absolute;
    width: auto;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10%;
    padding-right: 4rem;
}

/* ------------------------------------------Trucan project use case -----------------------------------------------------*/
.headerSectionTrucan {
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trucanLogoDiv {
    width: 30%;
    height: auto;
    margin-right: 4rem;
}

.trucanIntro {
    display: flex;
    flex-direction: column;
    width: 80%;
    top: 50%;
}

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

.trucanPhrase div {
    display: flex;
    flex-direction: column;
}

.trucanTitle {
    margin-bottom: 2rem;
}

.trucanTitle h1 {
    font-size: 8rem;
    margin-bottom: 0 !important;
}

.trucanTitle p {
    font-size: 2rem;
    margin-bottom: 0 !important;
}

.trucanCatch {
    display: flex;
    flex-direction: row;
    width: 31.25rem;
}

.trucanInfoDisorderContent {
    margin-top: 1.5rem;
}

.contentList p {
    margin-bottom: 1rem;
}

.trucanInfoDisorderContent h3 {
    margin-bottom: 0;
}

.trucanInfoDisorderContent p {
    margin-bottom: 1rem;
}

.contentBreak {
    display: flex;
    justify-content: center;
    border: 2px solid #f4f4f4;
    border-radius: .5rem;
    padding: 2rem;
    margin: 0 0 4rem 0;
    width: 43.75rem;
}

.contentBreak p{
    margin: 0;
}

.contentBreak2 {
    display: flex;
    justify-content: center;
    border: 2px solid #5326D2;
    border-radius: .5rem;
    padding: 2rem;
    margin: 0 0 1rem 0;
}

.contentBreak2 p {
    margin: 0;
}

.contentBreakGroup {
    margin-bottom: 4rem;
    width: 43.75rem;
}

.trucanPrimaryResearch {
    display: flex;
    flex-direction: column;
    width: 43.75rem;
    margin-bottom: 2rem;
}

.trucanPrimaryResearchGroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.trucanPrimaryResearchGroup div img {
    width: 50%;
    height: auto;
}

.trucanUserGroup {
    width: 43.75rem;
    margin-bottom: 2rem;
}

.trucanUserCategory {
    margin-bottom: 2rem;
}

.tagGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
}

.tag {
    display: flex;
    justify-content: center;
    border: 2px solid #5326D2;
    border-radius: .5rem;
    padding: .5rem;
    margin: .5rem .5rem 0 0;
}

.tag p {
    margin: 0;
}

.trucanPersonaGroup {
    display: flex;
    flex-direction: column;
    width: 43.75rem;
    margin-bottom: 2rem;
}

.trucanPersona {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.trucanPersonaImg {
    height: 50rem;
    overflow: hidden;
}

.trucanPersonaImg img {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-17%);
}

.trucanPersonaHeader {
    margin: 1rem 0 1rem 0;
}

.trucanPersonaHeader h2 {
    margin: 0;
}

.tag2 {
    display: flex;
    justify-content: start;
    border: 2px solid #5326D2;
    border-radius: .5rem;
    padding: .5rem;
    margin: .5rem .5rem 0 0;
    width: fit-content;
}

.tag2 p{
    margin: 0;
}

.trucanIntro2 {
    width: 43.75rem;
    margin-bottom: 4rem;
}

.trucanHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.trucanHeader img {
    width: 20%;
    margin-right: 2rem;
}

.trucanHeader div h1 {
    margin: 0;
}

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

.trucanIntroImg img {
    width: 100%;
    height: auto;
}

.trucan_features {
    display: flex;
    flex-direction: column;
    width: 43.75rem;
    margin-bottom: 4rem;
}

.trucanFeatureImg img{
    width: 100%;
    height: auto;
}

.video {
    width: 43.75rem;
    height: auto;
    margin-bottom: 4rem;
}

/* ------------------------------------------Endurance project use case -----------------------------------------------------*/
.headerSectionEndurance {
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enduranceLogoDiv {
    width: 40%;
    height: auto;
    margin-right: 4rem;
}

.enduranceIntro {
    display: flex;
    flex-direction: column;
    width: 80%;
    top: 50%;
}

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

.endurancePhrase div {
    display: flex;
    flex-direction: column;
}

.enduranceTitle {
    margin-bottom: 2rem;
}

.enduranceTitle h1 {
    font-size: 8rem;
    margin-bottom: 0 !important;
}

.enduranceTitle p {
    font-size: 2rem;
    margin-bottom: 0 !important;
}

.enduranceP {
    font-size: 1rem !important;
    color: #acacac;
    margin: 2rem 0 .5rem 0;
    padding: 0;
}

.enduranceImgWrap {
    display: flex;
    flex-direction: row;
}

.centerImg {
    display: flex;
    justify-content: center;
}

.centerImgBottom {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
}

.enduranceImg {
    width: 50%;
    height: auto;
    max-width: 43.75rem;
}

.enduranceImg2 {
    width: 75%;
    height: auto;
    max-width: 43.75rem;
}

/* Media query for smaller screens ------------------------------------------*/
@media screen and (max-width: 600px) {
    .navbar {
        flex: 0.2;
    }

    .introSection {
        height: auto;
        position: relative;
        width: auto;
    }

    .introSection1 {
        height: auto;
        position: relative;
        width: auto;
        box-shadow: inset 0px -20px 20px #0F1418;
    }

    .introImage {
        width: 100%;
        height: auto;
        transform: scaleX(-1);
        shape-outside: url(Images/AI_headshot_transparent_facing_right.png);
        z-index: -1;
        opacity: 15%;
    }

    .introImage1 {
        width: 100%;
        height: auto;
        object-fit: contain;
        z-index: -1;
        opacity: 15%;
        margin: 4rem 0 4rem 0;
    }

    .introTitle1 {
        font-family: 'Orbitron';
        font-size: 2rem;
        color: #f4f4f4;
        padding: 0px;
        margin: 0 0 1rem 0;
        max-width: 500px;
    }
    
    .introSubTitle1 {
        font-family: 'Orbitron';
        font-size: 1rem;
        color: #acacac;
        padding: 0px;
        margin: 0;
    }
    
    .introContent {
        height: auto;
        display: flex;
        flex-direction: column;
        margin: 2rem;
        position: absolute;
        bottom: 0;
    }

    .introContent1 {
        display: flex;
        flex-direction: column;
        position: absolute;
        justify-content: center;
        height: auto;
        max-width: 100% !important;
        margin: 4rem 2rem 2rem 2rem;
    }
    
    .introTitle {
        font-family: 'Orbitron';
        font-size: 2rem;
        color: #f4f4f4;
        padding: 0px;
        margin: 0px;
    }
    
    .introSubTitle {
        font-family: 'Orbitron';
        font-size: 1rem;
        color: #acacac;
        padding: 0px;
        margin: 0px 0px 16px 0px;
    }
    
    .introParagraph {
        font-family: 'Montserrat';
        font-size: 1rem;
        color: #acacac;
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    .divRow {
        height: auto;
        overflow: hidden;
        position: relative;
        margin: 2rem 1rem 2rem 1rem;
        background-color: #0F1418;
        /*margin: 1rem 2rem 1rem 2rem;*/
        /*margin: 4rem 4rem 4rem 4rem;*/
        padding: 1rem;
        box-shadow: 0px 0px 5px #06090B;
        border-radius: .5rem;
    }
    
    .divRowImg {
        width: 80%;
        height: auto;
        top: -50px;
        right: -50px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg2 {
        width: 60%;
        height: auto;
        top: 10px;
        right: -20px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg3 {
        width: 60%;
        height: auto;
        top: 5px;
        right: -50px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg4 {
        display: none;
    }

    .divRowImg5 {
        width: 50%;
        height: auto;
        position: absolute;
        left: 75%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 20%;
        position: absolute;
    }
    
    .divRowImg6 {
        width: 60%;
        height: auto;
        position: absolute;
        top: 10%;
        left: 50%;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg7 {
        width: 80%;
        height: auto;
        position: absolute;
        top: -10px;
        right: -20px;
        opacity: 20%;
    }
    
    .divRowContent {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column  ;
        z-index: 1;
        position: relative;
    }
    
    .projectButton {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: .5rem 2rem .5rem 2rem !important;
        margin-top: 1.5rem;
        max-width: 10rem;
    }
    
    .projectButton h3 {
        font-family: 'Orbitron' !important;
        font-size: .75rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

    .projectButton2 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: .5rem 2rem .5rem 2rem !important;
        margin-top: 1.5rem;
        max-width: 10rem;
    }
    
    .projectButton2 h3 {
        font-family: 'Orbitron' !important;
        font-size: .75rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

    .projectButton3 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: .5rem 2rem .5rem 2rem !important;
        margin-top: 1.5rem;
        max-width: 10rem;
    }
    
    .projectButton3 h3 {
        font-family: 'Orbitron' !important;
        font-size: .75rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

    .projectButton4 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: .5rem 2rem .5rem 2rem !important;
        margin-top: 1.5rem;
        max-width: 10rem;
    }
    
    .projectButton4 h3 {
        font-family: 'Orbitron' !important;
        font-size: .75rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

    /* Panel content on main portfolio page */

    #overlayContentPanel {
        position: fixed;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
        bottom: -100%; /* Start off-screen */
        background-color: #1A222A;
        width: 80%;
        height: 80%; /* Height of the panel */
        z-index: 2;
        transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
        visibility: hidden;
        padding: 1rem;
        overflow: hidden;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    #overlayContentPanel2 {
        position: fixed;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
        bottom: -100%; /* Start off-screen */
        background-color: #1A222A;
        width: 80%;
        height: 80%; /* Height of the panel */
        z-index: 2;
        transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
        visibility: hidden;
        padding: 1rem;
        overflow: hidden;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    #overlayContentPanel3 {
        position: fixed;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
        bottom: -100%; /* Start off-screen */
        background-color: #1A222A;
        width: 80%;
        height: 80%; /* Height of the panel */
        z-index: 2;
        transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
        visibility: hidden;
        padding: 1rem;
        overflow: hidden;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    #overlayContentPanel4 {
        position: fixed;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
        bottom: -100%; /* Start off-screen */
        background-color: #1A222A;
        width: 80%;
        height: 80%; /* Height of the panel */
        z-index: 2;
        transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
        visibility: hidden;
        padding: 1rem;
        overflow: hidden;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    .panelRowContent4 {
        padding-right: 0;
    }

    .panelContentHeader {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .panelRowImg {
        width: 100%;
        height: auto;
        position: relative;
        order: 1;
    }

    .panelRowImg2 {
        width: 100%;
        height: auto;
        position: relative;
        order: 1;
    }
  
    .panelRowImg3 {
        width: 100%;
        height: auto;
        object-fit: contain;
        position: relative;
        order: 1;
        filter: brightness(85%);
        left: 50px;
    }

    .panelRowImg4 {
        width: 100%;
        height: auto;
        object-fit: contain;
        order: 1;
    }
    
    .carbonContent {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .carbonContent div {
        padding-right: 0rem;
    }


    .carbonButton {
        margin: .5rem 0 0 0 !important;
        border: 2px #acacac solid;
        padding: .5rem 1rem .5rem 1rem;
        display: inline-block;
        text-align: center;
        border-radius: 2rem;
    }
    
    .carbonButton a {
        text-decoration: none;
        color: #acacac;
    }

    .carbonContent img {
        padding-top: 1rem;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .title_IMG img{
        filter: brightness(80%);
        width: 100%;
    }

    .soarVideo {
        max-width: 100%;
        width: auto;
        height: auto;
        margin-top: 1rem;
    }
    
    .soarVideo video {
        width: 100%;
    }

    .ifDesignAward div {
        display: flex;
        flex-direction: row;
        justify-content: start;
        flex-wrap: wrap;
    }

 /* ------------------------------------------Resume page -----------------------------------------------------*/

    .resumeSection {
        width: auto;
        height: auto;
    }

    .resume {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .resume img {
        max-width: 90%;
        width: auto;
        height: auto;
        box-shadow: 0px 0px 20px 2px #06090B;
        margin-top: 5rem;
    }

    .resumeButton {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: .5rem 2rem .5rem 2rem !important;
        margin: 1.5rem 0 5rem 0;
    }

    .resumeButton h3 {
        font-family: 'Orbitron' !important;
        font-size: .75rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

 /* ------------------------------------------Soteria project use case -----------------------------------------------------*/
     .headerSection {
        position: relative;
        height: 60vh;
        overflow: hidden;
        box-shadow: inset 0px -20px 20px #1A222A;
    }

    .headerImg {
        position: absolute;
        object-fit: contain;
        filter: brightness(20%);
        z-index: -1;
        top: 0;
        left: 50%; 
        transform: translate(-70%, -20%); 
    }

    .headerSection div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: -20%;
        bottom: 20%;
    }

    .headerSection div h1 {
        font-size: 3rem;
        margin-bottom: 0 !important;
    }

    .headerSection div img {
        width: 40%;
    }

    .projectContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 3rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .titleContent {
        max-width: 43.75rem;
        width: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 4rem;
        position: relative;
    }

    .titleContent img {
        width: 100%;
        height: auto;
    }

    .titleImg {
        display: flex;
        flex-direction: column;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 4rem;
    }

    .titleImg img {
        width: 100%;
        height: auto;
    }

    .headshotContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px; 
        height: 100px;
        border-radius: 50%;
        border: 1px solid #f4f4f4; 
        overflow: hidden;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .headshot {
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: brightness(65%)
    }

    .mayPersona {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

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

    .mayBio h2 {
        margin: 0 0 .5rem 0 !important;
    }

    .mayInsights {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mayInsights div{
        margin-right: 2rem;
    }

    #imageSoteria img {
        object-fit: contain;
        width: 100%;
        height: auto;
    }

    .havenJourney {
         margin-top: 2rem;
    }

    .havenJourney div {
        margin-bottom: 2rem;
    }

    .havenWireflow img{
        object-fit: contain;
        width: 100%;
        height: auto;
    }

     /* ------------------------------------------Trucan project use case -----------------------------------------------------*/
     .headerSectionTrucan {
        height: auto;
        width: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem;
    }

    .trucanLogoDiv {
        width: 100%;
        position: absolute;
        z-index: -1;
        opacity: 10%;
        height: auto;
        margin: 0 !important;
    }

    .trucanIntro {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-top: 2rem;
    }

    .trucanPhrase {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .trucanPhraseContent {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: .5rem;
    }

    .trucanTitle {
        margin-bottom: 2rem;
        width: auto;
    }

    .trucanTitle h1 {
        font-size: 4rem;
        margin-bottom: 0 !important;
    }

    .trucanTitle p {
        font-size: 2rem;
        margin-bottom: 0 !important;
    }

    .trucanCatch {
        display: flex;
        flex-direction: row;
        max-width: 31.25rem;
        width: auto;
    }

    .trucanInfoDisorderContent {
        margin-top: 1.5rem;
    }

    .contentList p {
        margin-bottom: 1rem;
    }

    .trucanInfoDisorderContent h3 {
        margin-bottom: 0;
    }

    .trucanInfoDisorderContent p {
        margin-bottom: 1rem;
    }

    .contentBreak {
        display: flex;
        justify-content: center;
        border: 2px solid #f4f4f4;
        border-radius: .5rem;
        padding: 1rem;
        margin: 0 0 4rem 0;
        max-width: 43.75rem;
        width: auto;
    }

    .contentBreak p{
        margin: 0;
    }

    .contentBreak2 {
        display: flex;
        justify-content: center;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: 1rem;
        margin: 0 0 1rem 0;
    }

    .contentBreak2 p {
        margin: 0;
    }

    .contentBreakGroup {
        margin-bottom: 4rem;
        max-width: 43.75rem;
        width: auto;
    }

    .trucanPrimaryResearch {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanPrimaryResearchGroup {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .trucanPrimaryResearchGroup div img {
        width: 50%;
        height: auto;
    }

    .trucanUserGroup {
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanUserCategory {
        margin-bottom: 2rem;
    }

    .tagGroup {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
    }

    .tag {
        display: flex;
        justify-content: center;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: .5rem;
        margin: .5rem .5rem 0 0;
    }

    .tag p {
        margin: 0;
    }

    .trucanPersonaGroup {
        display: flex;
        flex-direction: column;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanPersona {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .trucanPersonaImg {
        height: 20rem;
        overflow: hidden;
    }

    .trucanPersonaImg img {
        width: 100%;
        height: auto;
        top: 50%;
        transform: translateY(-17%);
    }

    .trucanPersonaHeader {
        margin: 1rem 0 1rem 0;
    }

    .trucanPersonaHeader h2 {
        margin: 0;
    }

    .tag2 {
        display: flex;
        justify-content: start;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: .5rem;
        margin: .5rem .5rem 0 0;
        width: fit-content;
    }

    .tag2 p{
        margin: 0;
    }

    .trucanIntro2 {
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 4rem;
    }

    .trucanHeader {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .trucanHeader img {
        width: 20%;
        margin-right: 2rem;
    }

    .trucanHeader div h1 {
        margin: 0;
    }

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

    .trucanIntroImg img {
        width: 100%;
        height: auto;
    }

    .trucan_features {
        display: flex;
        flex-direction: column;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 4rem;
    }

    .trucanFeatureImg img{
        width: 100%;
        height: auto;
    }

    .videoDiv {
        max-width: 43.75rem;
        width: auto;
        height: auto;
        margin-bottom: 2rem;
    }

    .video {
        width: 100%;
        height: auto;
    }

    /* ------------------------------------------Endurance project use case -----------------------------------------------------*/
    .headerSectionEndurance {
        height: 60vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .enduranceLogoDiv {
        width: 100%;
        position: absolute;
        z-index: -1;
        opacity: 10%;
        height: auto;
        margin: 0 !important;
    }

    .enduranceIntro {
        display: flex;
        flex-direction: column;
        width: 100%;
        top: 50%;
    }

    .endurancePhrase {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: auto;
        margin: .5rem;
    }

    .endurancePhrase div {
        display: flex;
        flex-direction: column;
    }

    .enduranceTitle {
        margin-bottom: 2rem;
    }

    .enduranceTitle h1 {
        font-size: 3rem;
        margin-bottom: 0 !important;
    }

    .enduranceTitle p {
        font-size: 1.5rem;
        margin-bottom: 0 !important;
    }

    .enduranceP {
        font-size: 1rem !important;
        color: #acacac;
        margin: 2rem 0 .5rem 0;
        padding: 0;
    }

    .enduranceImgWrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .centerImg {
        display: flex;
        justify-content: center;
    }

    .centerImgBottom {
        display: flex;
        justify-content: center;
        margin-bottom: 4rem;
    }

    .enduranceImg {
        width: 50% !important;
        height: auto !important;
        max-width: 43.75rem;
    }

    .enduranceImg2 {
        width: 75% !important;
        height: auto !important;
        max-width: 43.75rem;
    }
    
}

/* Media query for medium screens ------------------------------------------*/
@media (min-width: 601px) and (max-width: 1280px) {
    .navbar {
        flex: 0.2;
    }

    .introSection {
        height: auto;
        position: relative;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .introImage {
        width: 50%;
        height: auto;
        transform: scaleX(-1);
        shape-outside: url(Images/AI_headshot_transparent_facing_right.png);
    }
    
    .introContent {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin: 4rem;
        
    }
    
    .introTitle {
        font-family: 'Orbitron';
        font-size: 2rem;
        color: #f4f4f4;
        padding: 0px;
        margin: 0px;
    }
    
    .introSubTitle {
        font-family: 'Orbitron';
        font-size: 1rem;
        color: #acacac;
        padding: 0px;
        margin: 0px 0px 16px 0px;
    }
    
    .introParagraph {
        font-family: 'Montserrat';
        font-size: 1rem;
        color: #acacac;
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    .divRow {
        height: auto;
        overflow: hidden;
        position: relative;
        margin: 2rem 1rem 2rem 1rem;
        background-color: #0F1418;
        /*margin: 1rem 2rem 1rem 2rem;*/
        /*margin: 4rem 4rem 4rem 4rem;*/
        padding: 1rem;
        box-shadow: 0px 0px 5px #06090B;
        border-radius: .5rem;
    }
    
    .divRowImg {
        width: 80%;
        height: auto;
        top: -100px;
        right: -50px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg2 {
        width: 60%;
        height: auto;
        top: -100px;
        right: -50px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg3 {
        width: 60%;
        height: auto;
        top: 5px;
        right: -50px;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg4 {
        display: none;
    }

    
    .divRowImg5 {
        width: 50%;
        height: auto;
        position: absolute;
        left: 75%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 20%;
        position: absolute;
    }
    
    .divRowImg6 {
        width: 60%;
        height: auto;
        position: absolute;
        top: 10%;
        left: 50%;
        opacity: 20%;
        position: absolute;
    }

    .divRowImg7 {
        width: 50%;
        height: auto;
        position: absolute;
        top: -60px;
        right: 40px;
        opacity: 20%;
    }
    
    .divRowContent {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column  ;
        z-index: 1;
        position: relative;
    }
    
    .projectButton {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: 1rem 2rem 1rem 2rem !important;
        margin-top: 1.5rem !important;
        width: 16rem;
    }
    
    .projectButton h3 {
        font-family: 'Orbitron' !important;
        font-size: 1rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }
    
    .projectButton2 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: 1rem 2rem 1rem 2rem !important;
        margin-top: 1.5rem !important;
        width: 16rem;
    }
    
    .projectButton2 h3 {
        font-family: 'Orbitron' !important;
        font-size: 1rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }
    
    .projectButton3 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: 1rem 2rem 1rem 2rem !important;
        margin-top: 1.5rem !important;
        width: 16rem;
    }
    
    .projectButton3 h3 {
        font-family: 'Orbitron' !important;
        font-size: 1rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }
    
    .projectButton4 {
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        background-color: #F54F2B;
        border: none;
        border-radius: 3rem;
        padding: 1rem 2rem 1rem 2rem !important;
        margin-top: 1.5rem !important;
        width: 16rem;
    }
    
    .projectButton4 h3 {
        font-family: 'Orbitron' !important;
        font-size: 1rem;
        color: #0F1418 !important;
        margin: 0 !important;
    }

    /* Panel content on main portfolio page */

    #overlayContentPanel {
        position: fixed;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
        bottom: -100%; /* Start off-screen */
        background-color: #1A222A;
        width: 80%;
        height: 80%; /* Height of the panel */
        z-index: 2;
        transition: bottom 0.3s ease-in; /* Smooth transition for sliding in */
        visibility: hidden;
        padding: 1rem;
        overflow: hidden;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    .panelContentHeader {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .panelRowImg {
        width: 100%;
        height: auto;
        position: relative;
        order: 1;
    }

    .panelRowImg3 {
        width: 100%;
        height: auto;
        position: relative;
        order: 1;
    }

 /* ------------------------------------------Soteria project use case -----------------------------------------------------*/
    .headerSection {
        position: relative;
        height: 60vh;
        overflow: hidden;
        box-shadow: inset 0px -20px 20px #1A222A;
    }

    .headerImg {
        position: absolute;
        object-fit: contain;
        filter: brightness(20%);
        z-index: -1;
        top: 0;
        left: 50%; 
        transform: translate(-70%, -20%); 
    }

    .headerSection div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: -20%;
        bottom: 20%;
    }

    .headerSection div h1 {
        font-size: 5rem;
        margin-bottom: 0 !important;
    }

    .headerSection div img {
        width: 40%;
    }

    .projectContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 3rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .titleContent {
        max-width: 43.75rem;
        width: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 4rem;
        position: relative;
    }

    .titleContent img {
        width: 100%;
        height: auto;
    }

    .titleImg {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 43.75rem;
        margin-bottom: 4rem;
    }

    .titleImg img {
        width: 100%;
        height: auto;
    }

    .headshotContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px; 
        height: 100px;
        border-radius: 50%;
        border: 1px solid #f4f4f4; 
        overflow: hidden;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .headshot {
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: brightness(65%)
    }

    .mayPersona {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

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

    .mayBio h2 {
        margin: 0 0 .5rem 0 !important;
    }

    .mayInsights {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mayInsights div{
        margin-right: 2rem;
    }

    #imageSoteria img {
        object-fit: contain;
        width: 100%;
        height: auto;
    }

    .havenJourney {
         margin-top: 2rem;
    }

    .havenJourney div {
        margin-bottom: 2rem;
    }

    .havenWireflow img{
        object-fit: contain;
        width: 100%;
        height: auto;
    }

 /* ------------------------------------------Trucan project use case -----------------------------------------------------*/
    .headerSectionTrucan {
        height: 60vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem;
    }

    .trucanLogoDiv {
        width: 50%;
        height: auto;
        margin-right: 2rem;
    }

    .trucanIntro {
        display: flex;
        flex-direction: column;
        width: 100%;
        top: 50%;
    }

    .trucanPhrase {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .trucanPhraseContent {
        display: flex;
        flex-direction: column;
        width: 50%;
        margin: .5rem;
    }

    .trucanPhrase div img {
        width: 100%;
        height: auto;
    }

    .trucanTitle {
        margin-bottom: 2rem;
        width: auto;
    }

    .trucanTitle h1 {
        font-size: 4rem;
        margin-bottom: 0 !important;
    }

    .trucanTitle p {
        font-size: 2rem;
        margin-bottom: 0 !important;
    }

    .trucanCatch {
        display: flex;
        flex-direction: row;
        max-width: 31.25rem;
        width: auto;
    }

    .trucanInfoDisorderContent {
        margin-top: 1.5rem;
    }

    .contentList p {
        margin-bottom: 1rem;
    }

    .trucanInfoDisorderContent h3 {
        margin-bottom: 0;
    }

    .trucanInfoDisorderContent p {
        margin-bottom: 1rem;
    }

    .contentBreak {
        display: flex;
        justify-content: center;
        border: 2px solid #f4f4f4;
        border-radius: .5rem;
        padding: 2rem;
        margin: 0 0 4rem 0;
        max-width: 43.75rem;
        width: auto;
    }

    .contentBreak p{
        margin: 0;
    }

    .contentBreak2 {
        display: flex;
        justify-content: center;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: 2rem;
        margin: 0 0 1rem 0;
    }

    .contentBreak2 p {
        margin: 0;
    }

    .contentBreakGroup {
        margin-bottom: 4rem;
        max-width: 43.75rem;
        width: auto;
    }

    .trucanPrimaryResearch {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanPrimaryResearchGroup {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .trucanPrimaryResearchGroup div img {
        width: 50%;
        height: auto;
    }

    .trucanUserGroup {
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanUserCategory {
        margin-bottom: 2rem;
    }

    .tagGroup {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
    }

    .tag {
        display: flex;
        justify-content: center;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: .5rem;
        margin: .5rem .5rem 0 0;
    }

    .tag p {
        margin: 0;
    }

    .trucanPersonaGroup {
        display: flex;
        flex-direction: column;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 2rem;
    }

    .trucanPersona {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .trucanPersonaImg {
        height: 50rem;
        overflow: hidden;
    }

    .trucanPersonaImg img {
        width: 100%;
        height: auto;
        top: 50%;
        transform: translateY(-17%);
    }

    .trucanPersonaHeader {
        margin: 1rem 0 1rem 0;
    }

    .trucanPersonaHeader h2 {
        margin: 0;
    }

    .tag2 {
        display: flex;
        justify-content: start;
        border: 2px solid #5326D2;
        border-radius: .5rem;
        padding: .5rem;
        margin: .5rem .5rem 0 0;
        width: fit-content;
    }

    .tag2 p{
        margin: 0;
    }

    .trucanIntro2 {
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 4rem;
    }

    .trucanHeader {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .trucanHeader img {
        width: 20%;
        margin-right: 2rem;
    }

    .trucanHeader div h1 {
        margin: 0;
    }

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

    .trucanIntroImg img {
        width: 100%;
        height: auto;
    }

    .trucan_features {
        display: flex;
        flex-direction: column;
        max-width: 43.75rem;
        width: auto;
        margin-bottom: 4rem;
    }

    .trucanFeatureImg img{
        width: 100%;
        height: auto;
    }

    .videoDiv {
        max-width: 43.75rem;
        width: auto;
        height: auto;
        margin-bottom: 4rem;
    }

    .video {
        width: 100%;
        height: auto;
    }

        /* ------------------------------------------Endurance project use case -----------------------------------------------------*/
    .headerSectionEndurance {
        height: 60vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .enduranceLogoDiv {
        width: 40%;
        height: auto;
        margin-right: 4rem;
    }

    .enduranceIntro {
        display: flex;
        flex-direction: column;
        width: 80%;
        top: 50%;
    }

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

    .endurancePhrase div {
        display: flex;
        flex-direction: column;
    }

    .enduranceTitle {
        margin-bottom: 2rem;
    }

    .enduranceTitle h1 {
        font-size: 4rem;
        margin-bottom: 0 !important;
    }

    .enduranceTitle p {
        font-size: 2rem;
        margin-bottom: 0 !important;
    }

    .enduranceP {
        font-size: 1rem !important;
        color: #acacac;
        margin: 2rem 0 .5rem 0;
        padding: 0;
    }

    .enduranceImgWrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .centerImg {
        display: flex;
        justify-content: center;
    }

    .centerImgBottom {
        display: flex;
        justify-content: center;
        margin-bottom: 4rem;
    }

    .enduranceImg {
        width: 50% !important;
        height: auto !important;
        max-width: 43.75rem;
    }

    .enduranceImg2 {
        width: 75% !important;
        height: auto !important;
        max-width: 43.75rem;
    }
}