/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
    --primary: #4056C5;
    --secondary: #75A6C4;
    --tertiary: #98DDCD;
    --accent: #F4B55A;
    --dark: #222222;
    --white: #ffffff;
    --primaryMuted: #4056C53d;
    --secondaryMuted: #75A6C43d;
    --tertiaryMuted: #98DDCD3d;
    --accentMuted: #F4B55A3d;
    --riotRed: #d22a36;
    --riotRedMuted: #d22a363d;
    --lolOrange: #E4A80C;
    --lolOrangeMuted: #E4A80C3d;
    --valorantRed: #FC4859;
    --valorantRedMuted: #fc485a3d;
    --discordPurple: #5865F2;
    --discordPurpleMuted: #5865F23d;
}

body {
    background-color: var(--primary);
    font-family: -apple-system, BlinkMacSystemFont,"Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
    all: unset;
    cursor: pointer;
}

b {
    font-weight: 700;
    background-color: var(--accentMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--dark);
}

.content {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 10rem;
    padding-top: 10rem;
    box-sizing: border-box;
    flex-direction: column;
    min-height: 100vh;
}

.card {
    background-color: white;
    padding: 0px;
    width: 50rem;
    max-width: 90vw;
    border-radius: 10px;
    box-shadow: 0px 14px 33px 14px rgb(0 0 0 / 13%);
    display: flex;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 2rem;
}

.card:hover {
    transform: translateY(-5px);
}

.achievements-card {
    width: 50rem;
    max-width: 90vw;
    border-radius: 10px;
}

.info {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    box-sizing: border-box;
    gap: 3rem;
    overflow: auto;
}

.info2 {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    box-sizing: border-box;
    gap: 3rem;
    overflow: auto;
}

.globalTitle {
    font-family: Selphia;
    color: var(--primary);
    font-style: normal;
    font-weight: 400;
    font-size: 3rem;
    position: relative;
    display: inline-block;
}

.globalTitle::after {
    content: '';
    position: absolute;
    bottom: 0.2em;
    left: 0;
    width: 100%;
    height: 0.3em;
    background-color: var(--accentMuted);
    z-index: -1;
    border-radius: 3px;
}

.profileImage {
    background-image: url("../images/BeaPic.png");
    width: 50%;
    background-size: cover;
    background-position: center;
}

.profileImage2 {
    background-image: url("../images/BeaPic2.png");
    width: 30%;
    background-size: cover;
    background-position: center;
}

.leftLinks {
    flex-direction: row;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.profileLinkAccent {
    background-color: var(--accent);
    border-radius: 4px;
    display: flex;
    height: 100%;
    padding: 0 0.5rem;
    align-items: center;
    flex-direction: row;
    min-height: 2rem;
}

.profileLinkNormal {
    color: var(--primary);
    background-color: var(--primaryMuted);
    border-radius: 4px;
    display: flex;
    height: 100%;
    padding: 0 0.5rem;
    align-items: center;
    flex-direction: row;
    min-height: 2rem;
}

.cardFooter {
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.rightLinks {
    color: var(--primary);
    background-color: var(--primaryMuted);
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.rightLinks:hover {
    transform: translateY(-3px);
}

.globalLinks {
    display: flex;
    justify-content: space-between;
    color: var(--white);
    font-weight: 600;
    align-items: center;
    gap: 1rem;
}

.globalCurrent {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5rem;
    color: #868686;
}

.globalSubtitle {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.75rem;
}

.globalAbout {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.75rem;
}

.cardTitle {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.cardTitle2 {
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
}

.companies {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    opacity: 0.6;
    z-index: -1;
}

/* Hide footer on anything smaller than desktop */
@media screen and (max-width: 1199px) {
    footer {
        display: none;
    }
}

.sideMenu {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.navButton {
    display: flex;
    gap: 2rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 0.5rem;
    border-radius: 4px;
    min-height: 44px;
    align-items: center;
}

.navButton:hover {
    opacity: 0.8;
}

.navButtonActive {
    display: flex;
    gap: 2rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    opacity: 0.5;
    padding: 0.5rem;
    border-radius: 4px;
    min-height: 44px;
    align-items: center;
}

.navButtonSpecial {
    cursor: pointer;
    color: var(--primary);
    background-color: var(--accent);
    padding: 0.8rem;
    border-radius: 99px;
    display: flex;
    font-weight: 600;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 44px;
    white-space: nowrap;
}

.navButtonSpecial:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.inlineIcon {
    display: inline-block;
    height: 1rem;
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(218deg) brightness(95%) contrast(86%);
}

.inlineIcon2 {
    display: inline-block;
    height: 1rem;
    position: relative;
    top: 0.1rem;
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(218deg) brightness(95%) contrast(86%);
}

.lolSpan {
    font-weight: 700;
    color: var(--lolOrange);
    background-color: var(--lolOrangeMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
}

.valorantSpan {
    font-weight: 700;
    color: var(--valorantRed);
    background-color: var(--valorantRedMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
}

.riotSpan {
    font-weight: 700;
    color: var(--riotRed);
    background-color: var(--riotRedMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
}

.tspSpan {
    font-weight: 700;
    color: var(--secondary);
    background-color: var(--secondaryMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
}

.discordSpan {
    font-weight: 700;
    color: var(--discordPurple);
    background-color: var(--discordPurpleMuted);
    margin: -1px 0px;
    padding: 1px 6px;
    border-radius: 8px;
}

.quote {
    font-family: Selphia;
    font-size: 2.2rem;
    line-height: 1.6;
    color: var(--primary);
    padding: 0.5rem 0;
    position: relative;
    margin: 2rem 0;
    border-left: 4px solid var(--accent);
    padding-left: 1.5rem;
}

.achievement-list {
    list-style-type: none;
    padding-left: 1.5rem;
    margin: 0.8rem 0;
}

.achievement-list li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    line-height: 1.5;
    position: relative;
    padding-left: 1rem;
}

.achievement-list li::before {
    content: "•";
    color: var(--accent);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    /* margin-left: -10em; */
    font-size: 1.4rem;
    position: absolute;
    top: -0.2rem;
    left: 0.5rem;
}

.linkCompany {
    color: var(--primary);
    display: inline-block;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.linkCompany:hover {
    transform: translateY(-2px);
    color: var(--accent);
}

.inlineLogo {
    display: inline-block;
    margin-right: 3px;
    position: relative;
    top: 2px;
    height: 1rem;
}

.mailTo {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.approach-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 50rem;
    max-width: 90vw;
    margin-bottom: 2rem;
}

.approach-card {
    background-color: var(--tertiary);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0px 14px 33px 14px rgb(0 0 0 / 10%);
    transition: transform 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-5px);
}

.approach-title {
    font-family: Selphia;
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.approach-item {
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.approach-item-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.approach-item-text {
    font-size: 1rem;
    line-height: 1.4;
}

/* Skills Section Styling */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.skill-tag {
    background-color: var(--primaryMuted);
    color: var(--primary);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

.skill-tag:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* Collaborate Card Styling */
.collaborate-card {
    width: 50rem;
    max-width: 90vw;
    background-color: var(--accent);
    border-radius: 10px;
    box-shadow: 0px 14px 33px 14px rgb(0 0 0 / 10%);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.collaborate-card:hover {
    transform: translateY(-5px);
}

.collaborate-container {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.collaborate-text {
    color: var(--dark);
}

.collaborate-title {
    font-family: Selphia;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.collaborate-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.collaborate-button {
    display: inline-block;
    background-color: white;
    color: var(--primary);
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 99px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-height: 44px;
    align-items: center;
    display: flex;
}

.collaborate-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.companyLogo {
    height: 36px;
}

/* Experience page redesign styles */
.experience-card {
    margin-bottom: 2rem;
}

/* This ensures the card width matches the original width from frontpage and approach */
.card {
    width: 50rem;
    max-width: 90vw;
}

.full-width {
    width: 100% !important;
}

/* Company filters */
.company-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.company-filter {
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.company-filter:hover {
    background-color: var(--primaryMuted);
    transform: translateY(-2px);
}

.company-filter.active {
    background-color: var(--primary);
    color: white;
}

/* Experience container - removed timeline */
.experience-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.experience-role {
    position: relative;
    padding: 2rem;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-left: 4px solid var(--primary);
    transition: transform 0.3s ease;
}

.experience-role:hover {
    transform: translateY(-5px);
}

.experience-role.thesoul {
    border-left-color: var(--secondary);
}

.experience-role.telus {
    border-left-color: var(--tertiary);
}

.experience-role.wig {
    border-left-color: #E64D3D; /* Custom color for Women In Games */
}

/* Role header */
.role-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.role-title-container {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

.role-info {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

/* Enlarged logo container to match height of title+company */
.role-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background-color: #f8f8f8;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

/* Enlarged logo size */
.company-logo {
    width: 35px;
    height: auto;
}

.thesoul-logo {
    filter: brightness(0) saturate(100%) invert(35%) sepia(19%) saturate(3107%) hue-rotate(202deg) brightness(92%) contrast(87%);
}

.telus-logo {
    filter: brightness(0) saturate(100%) invert(74%) sepia(11%) saturate(1304%) hue-rotate(118deg) brightness(92%) contrast(88%);
}

.wig-logo {
    filter: brightness(0) saturate(100%) invert(39%) sepia(54%) saturate(2356%) hue-rotate(340deg) brightness(97%) contrast(82%);
}

.role-title {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--primary);
    margin: 0;
    word-wrap: break-word;
}

.role-company {
    font-size: 1rem;
    font-weight: 600;
    color: #777;
    word-wrap: break-word;
}

.thesoul .role-title {
    color: var(--secondary);
}

.telus .role-title {
    color: var(--tertiary);
}

.wig .role-title {
    color: #E64D3D;
}

.role-date {
    font-size: 0.9rem;
    color: #999;
    background-color: #f8f8f8;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.role-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Achievement list styling */
.achievement-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0.8rem 0;
}

.achievement-list li {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    padding-left: 2.8rem;
}

.achievement-list li::before {
    content: "→";
    color: var(--accent);
    font-weight: bold;
    display: inline-block;
    width: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

/* Education and skills section */
.skills-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
}

.education-skills-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
}

.section-title {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent);
}

.languages-title {
    margin-top: 2.5rem;
}

.education-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.education-item:last-child {
    border-bottom: none;
}

.education-degree {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0.3rem;
}

.education-institution {
    font-size: 0.9rem;
    color: #777;
}

/* Skills styling */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.skill-tag {
    background-color: var(--primaryMuted);
    color: var(--primary);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.skill-tag:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.language-tag {
    background-color: var(--tertiaryMuted);
    color: var(--tertiary);
}

.language-tag:hover {
    background-color: var(--tertiary);
}

/* Mobile Tab Bar Navigation */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(64, 86, 197, 0.1);
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.tab-bar-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 1rem;
}

.tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: #666;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 60px;
    min-height: 50px;
    justify-content: center;
}

.tab-bar-item.active {
    color: white;
    background-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 86, 197, 0.3);
}

.tab-bar-item.active .tab-bar-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.tab-bar-item:hover {
    transform: translateY(-2px);
}

.tab-bar-item:hover .tab-bar-icon {
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(218deg) brightness(95%) contrast(86%);
}

.tab-bar-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(96%);
    transition: filter 0.3s ease;
}

.tab-bar-item.active .tab-bar-icon,
.tab-bar-item:hover .tab-bar-icon {
    filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(218deg) brightness(95%) contrast(86%);
}

.tab-bar-item.active .tab-bar-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Tab bar icons - you'll need to replace these with your actual icon URLs */
.tab-bar-icon.home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9,22 9,12 15,12 15,22'/%3E%3C/svg%3E");
}

.tab-bar-icon.experience {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.tab-bar-icon.approach {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11H5a2 2 0 0 0-2 2v3c0 1.1.9 2 2 2h4l-2-7z'/%3E%3Cpath d='m15 11 2-7h4c1.1 0 2 .9 2 2v3c0 1.1-.9 2-2 2h-4z'/%3E%3Cpath d='M9 7h6'/%3E%3C/svg%3E");
}

.tab-bar-icon.resume {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
}

.tab-bar-icon.contact {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
@-webkit-keyframes shakeSlow {
    0% { transform: translate(1px, 1px) rotate(0deg) }
    1% { transform: translate(-1px, -2px) rotate(-1deg) }
    2% { transform: translate(-3px) rotate(1deg) }
    3% { transform: translate(3px, 2px) rotate(0deg) }
    4% { transform: translate(1px, -1px) rotate(1deg) }
    5% { transform: translate(-1px, 2px) rotate(-1deg) }
    6% { transform: translate(-3px, 1px) rotate(0deg) }
    7% { transform: translate(3px, 1px) rotate(-1deg) }
    8% { transform: translate(-1px, -1px) rotate(1deg) }
    9% { transform: translate(1px, 2px) rotate(0deg) }
    10% { transform: translate(1px, 1px) rotate(0deg) }
    to { transform: translate(1px, 1px) rotate(0deg) }
}

@keyframes shakeSlow {
    0% { transform: translate(1px, 1px) rotate(0deg) }
    1% { transform: translate(-1px, -2px) rotate(-1deg) }
    2% { transform: translate(-3px) rotate(1deg) }
    3% { transform: translate(3px, 2px) rotate(0deg) }
    4% { transform: translate(1px, -1px) rotate(1deg) }
    5% { transform: translate(-1px, 2px) rotate(-1deg) }
    6% { transform: translate(-3px, 1px) rotate(0deg) }
    7% { transform: translate(3px, 1px) rotate(-1deg) }
    8% { transform: translate(-1px, -1px) rotate(1deg) }
    9% { transform: translate(1px, 2px) rotate(0deg) }
    10% { transform: translate(1px, 1px) rotate(0deg) }
    to { transform: translate(1px, 1px) rotate(0deg) }
}

@-webkit-keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg) }
    10% { transform: translate(-1px, -2px) rotate(-1deg) }
    20% { transform: translate(-3px) rotate(1deg) }
    30% { transform: translate(3px, 2px) rotate(0deg) }
    40% { transform: translate(1px, -1px) rotate(1deg) }
    50% { transform: translate(-1px, 2px) rotate(-1deg) }
    60% { transform: translate(-3px, 1px) rotate(0deg) }
    70% { transform: translate(3px, 1px) rotate(-1deg) }
    80% { transform: translate(-1px, -1px) rotate(1deg) }
    90% { transform: translate(1px, 2px) rotate(0deg) }
    to { transform: translate(1px, -2px) rotate(-1deg) }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg) }
    10% { transform: translate(-1px, -2px) rotate(-1deg) }
    20% { transform: translate(-3px) rotate(1deg) }
    30% { transform: translate(3px, 2px) rotate(0deg) }
    40% { transform: translate(1px, -1px) rotate(1deg) }
    50% { transform: translate(-1px, 2px) rotate(-1deg) }
    60% { transform: translate(-3px, 1px) rotate(0deg) }
    70% { transform: translate(3px, 1px) rotate(-1deg) }
    80% { transform: translate(-1px, -1px) rotate(1deg) }
    90% { transform: translate(1px, 2px) rotate(0deg) }
    to { transform: translate(1px, -2px) rotate(-1deg) }
}

/* RESPONSIVE DESIGN */

/* Large Desktop */
@media screen and (min-width: 1200px) {
    .content {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    
    .companies {
        gap: 2rem;
    }
}

/* Tablet Landscape (768px - 1199px) */
@media screen and (max-width: 1199px) and (min-width: 768px) {
    .card {
        width: 90vw;
        max-width: 900px;
    }
    
    .approach-container {
        width: 90vw;
        max-width: 900px;
    }
    
    .collaborate-card {
        width: 90vw;
        max-width: 900px;
    }
    
    .globalTitle {
        font-size: 2.5rem;
    }
    
    .approach-title {
        font-size: 2rem;
    }
    
    .collaborate-title {
        font-size: 2rem;
    }
    
    .quote {
        font-size: 1.8rem;
    }
    
    .education-skills-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 2rem;
    }
    
    #main {
        padding: 1.5rem;
    }
    
    .sideMenu {
        gap: 1.5rem;
    }
    
    .content {
        padding-top: 9rem;
        padding-bottom: 8rem;
    }
}

/* Tablet Portrait (481px - 767px) */
@media screen and (max-width: 767px) and (min-width: 481px) {
    .profileImage2 {
        display: none;
    }
    
    .info2 {
        width: 100%;
        padding: 2rem;
    }
    
    .card {
        width: 95vw;
        margin: 0 2.5vw 2rem;
    }
    
    .approach-container {
        width: 95vw;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    
    .collaborate-card {
        width: 95vw;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .approach-card {
        padding: 1.5rem;
    }
    
    .globalTitle {
        font-size: 2.2rem;
    }
    
    .approach-title {
        font-size: 1.8rem;
    }
    
    .collaborate-title {
        font-size: 1.8rem;
    }
    
    .quote {
        font-size: 1.6rem;
        margin: 1.5rem 0;
    }
    
    .education-skills-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .role-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .role-title-container {
        width: 100%;
    }
    
    .role-date {
        align-self: flex-start;
    }
    
    .company-filters {
        gap: 0.8rem;
    }
    
    .company-filter {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
    
    /* Hide desktop nav and show mobile tab bar */
    #main {
        display: none;
    }
    
    .mobile-tab-bar {
        display: block;
    }
    
    .content {
        padding-top: 2rem;
        padding-bottom: 6rem;
    }
    
    .companies {
        padding: 1rem;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .companyLogo {
        height: 28px;
    }
    
    .collaborate-container {
        padding: 2rem;
    }
    
    .collaborate-text p {
        font-size: 1.1rem;
    }
    
    .collaborate-button {
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* Mobile (320px - 480px) */
@media screen and (max-width: 480px) {
    .profileImage {
        display: none;
    }
    
    .profileImage2 {
        display: none;
    }
    
    .info {
        width: 100%;
        padding: 1.5rem;
        gap: 2rem;
    }
    
    .info2 {
        width: 100%;
        padding: 1.5rem;
        gap: 2rem;
    }
    
    .card {
        width: 95vw;
        margin: 0 2.5vw 1.5rem;
    }
    
    .approach-container {
        width: 95vw;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        margin-bottom: 1.5rem;
    }
    
    .collaborate-card {
        width: 95vw;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .approach-card {
        padding: 1.5rem;
    }
    
    .approach-item {
        padding: 1rem;
    }
    
    .globalTitle {
        font-size: 2rem;
    }
    
    .globalSubtitle {
        font-size: 16px;
    }
    
    .globalAbout {
        font-size: 16px;
    }
    
    .globalCurrent {
        font-size: 14px;
    }
    
    .approach-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    .collaborate-title {
        font-size: 1.6rem;
    }
    
    .quote {
        font-size: 1.4rem;
        margin: 1rem 0;
        padding-left: 1rem;
    }
    
    .education-skills-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .role-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .role-title-container {
        width: 100%;
        gap: 1rem;
    }
    
    .role-title {
        font-size: 1.2rem;
    }
    
    .role-company {
        font-size: 0.9rem;
    }
    
    .role-description {
        font-size: 1rem;
    }
    
    .achievement-list li {
        font-size: 0.9rem;
        padding-left: 2.5rem;
    }
    
    .achievement-list li::before {
        width: 1.2rem;
    }
    
    .company-filters {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .company-filter {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .experience-role {
        padding: 1.5rem;
    }
    
    .cardFooter {
        gap: 1.5rem;
    }
    
    .globalLinks {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }
    
    .leftLinks {
        justify-content: flex-start;
        gap: 0.5rem;
        flex: 1;
    }
    
    .rightLinks {
        align-self: center;
        flex-shrink: 0;
    }
    
    /* Hide desktop nav and show mobile tab bar */
    #main {
        display: none;
    }
    
    .mobile-tab-bar {
        display: block;
    }
    
    .content {
        padding-top: 2rem;
        padding-bottom: 6rem;
        position: static;
    }
    
    .collaborate-container {
        padding: 1.5rem;
        gap: 1.5rem;
    }
    
    .collaborate-text p {
        font-size: 1rem;
    }
    
    .collaborate-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    .skills-container {
        gap: 0.5rem;
    }
    
    .skill-tag {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
    
    .section-title {
        font-size: 1.1rem;
    }
    
    .education-degree {
        font-size: 1rem;
    }
    
    .education-institution {
        font-size: 0.8rem;
    }
}

/* Very Small Mobile (below 320px) */
@media screen and (max-width: 319px) {
    .card, .approach-container, .collaborate-card {
        width: 98vw;
        margin-left: 1vw;
        margin-right: 1vw;
    }
    
    .info, .info2 {
        padding: 1rem;
    }
    
    .globalTitle {
        font-size: 1.8rem;
    }
    
    .approach-title, .collaborate-title {
        font-size: 1.4rem;
    }
    
    .quote {
        font-size: 1.2rem;
    }
    
    .approach-item {
        padding: 0.8rem;
    }
    
    .role-title-container {
        gap: 0.8rem;
    }
    
    .role-logo {
        width: 45px;
        height: 45px;
    }
    
    .company-logo {
        width: 28px;
    }
    
    /* Hide desktop nav and show mobile tab bar */
    #main {
        display: none;
    }
    
    .mobile-tab-bar {
        display: block;
    }
}

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .inlineIcon, .inlineIcon2 {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .company-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape orientation for mobile devices */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Hide desktop nav and show mobile tab bar */
    #main {
        display: none;
    }
    
    .mobile-tab-bar {
        display: block;
    }
    
    .content {
        padding-top: 2rem;
        padding-bottom: 6rem;
    }
    
    .globalTitle {
        font-size: 1.8rem;
    }
    
    .approach-title, .collaborate-title {
        font-size: 1.6rem;
    }
    
    .quote {
        font-size: 1.3rem;
    }
}