@font-face {
   font-family: "Bodoni";
   src: url("/fonts/BodoniModa-VariableFont_opsz\,wght.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

:root {
   --container-max-width: 1200px;
   --padding-mobile: 16px;
   --padding-tablet: 16px;
   --padding-desktop: 64px;
   --font-size-base: 16px;
   --font-size-h1: 2rem;
   --font-size-h1-large: 8rem;
   --project-footer-height: 100px;

   /* Material Design Typography Scale */
   --display-large: 96px;
   --display-medium: 45px;
   --display-small: 36px;

   --headline-large: 32px;
   --headline-medium: 28px;
   --headline-small: 24px;

   --title-large: 22px;
   --title-medium: 20px;
   --title-small: 18px;

   --body-large: 16px;
   --body-medium: 14px;
   --body-small: 12px;

   --label-large: 14px;
   --label-medium: 12px;
   --label-small: 11px;

   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-loose: 1.8;
}

.project-image {
   background: linear-gradient(160deg, #CBA695 -75.15%, #F7F5F1 31.71%, #F7F5F1 97.34%, #E8E7E7 129.47%), linear-gradient(169deg, #CBA695 -99.4%, #F7F5F1 20.75%, #F7F5F1 94.55%, #E8E7E7 130.67%), linear-gradient(167deg, #CBA695 -72.84%, #F7F5F1 33.52%, #F7F5F1 98.86%, #E8E7E7 130.84%);
   width: 50%;
   height: 100%;
   padding: 1rem;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   border-right: 1px solid #53352740;
   /* Add a clear border between image and text */
}

.project-image img {
   width: 40%;
   height: auto;
   object-fit: cover;
   transition: transform 0.5s ease;
}

#project4-img {
   width: 80%;
}

.project-item .project-details {
   background-color: #ffffff;
   width: 50%;
   display: flex;
   align-items: center;
   justify-content: left;
   padding: 60px;
}

.project-content {
   max-width: 600px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.coming-soon {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
   align-items: center;
}

.coming-soon .tag {
   width: fit-content;
   height: fit-content;
   padding: 8px 16px;
   border-radius: 0.2rem;
}

.project-tag {
   width: fit-content;
   padding: 8px 16px;
   border: 1px solid #e0e0e0;
   border-radius: 99px;
   font-size: 14px;
   font-weight: bold;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.project-title {
   font-size: var(--headline-medium);
   font-weight: normal;
   color: #333;
   line-height: var(--line-height-tight);
}

.project-item .project-description {
   font-size: var(--body-large);
   line-height: var(--line-height-normal);
   color: #555;
   margin-bottom: 20px;
}

.btn-read-more {
   display: inline-block;
   background-color: #533527;
   color: #ffffff;
   padding: 16px 24px;
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
   width: fit-content;
}

.btn-read-more:hover {
   background-color: #ffffff;
   border: 1px solid #533527;
   color: #533527;
   transform: translateY(-3px);
}

.project-nda {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   color: #777;
}

.project-nda i {
   color: #333;
}

/* Value Proposition Styles in Projects */
.project-value-props {
   display: flex;
   width: 100%;
   border-top: 1px solid #e0e0e0;
}

.project-value-props .value-prop {
   flex: 1;
   padding: 15px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   border-right: 1px solid #e0e0e0;
}

.project-value-props .value-prop:last-child {
   border-right: none;
}

.project-value-props .value-metric {
   font-size: 1.8rem;
   font-weight: 500;
   color: #333;
   margin-bottom: 5px;
}

.project-value-props .value-label {
   font-size: var(--label-large);
   color: #666;
}

.project-value-props .view-button {
   display: flex;
   align-items: center;
   justify-content: center;
}

.project-value-props .view-button a {
   font-size: 1.3rem;
   color: #533527;
   text-decoration: none;
   transition: transform 0.3s ease;
}

.project-value-props .view-button.nda {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: #533527;
}

.project-value-props .view-button.nda i {
   font-size: 1.1rem;
}

/* Mobile responsive styles for work section */
@media (max-width: 767px) {

   /* Project layout */
   .project-item {
       flex-direction: column;
       height: auto;
       min-height: 90vh;
   }

   .project-image,
   .project-item .project-details {
       width: 100%;
   }

   .project-image {
       height: 40vh;
       min-height: 300px;
       padding: 0.75rem;
   }

   .project-item .project-details {
       padding: 2rem 1.5rem;
   }

   /* Project content */
   .project-content {
       width: 100%;
       max-width: 100%;
       gap: 1rem;
   }

   .project-title {
       font-size: var(--headline-small);
   }

   .project-item .project-description {
       font-size: var(--body-medium);
       margin-bottom: 1rem;
   }

   /* Carousel adjustments */
   .carousel-container {
       width: calc(100% - 1.5rem);
       height: calc(100% - 1.5rem);
   }

   .carousel-image {
       width: 70%;
   }

   .carousel-dots {
       bottom: 10px;
   }

   .dot {
       height: 6px;
       width: 6px;
   }

   /* Value props */
   .project-value-props {
       flex-direction: column;
       border-top: none;
   }

   .project-value-props .value-prop {
       padding: 1rem 0;
       border-right: none;
       border-bottom: 1px solid #e0e0e0;
   }

   .project-value-props .value-prop:last-child {
       border-bottom: none;
   }

   /* Coming soon tag */
   .coming-soon {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
   }

   .btn-read-more {
       width: 100%;
       text-align: center;
   }
}


/* Small mobile devices */
@media (max-width: 480px) {
   .navbar h1#name.bigger {
       font-size: 5.5rem;
       top: 25vh;
   }
}

.about-me-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2rem auto;
   border: 1px solid #f2f2f2;
   margin-top: 2rem;
}

.footer-item {
   flex: 1;
}

.footer-item p {
   font-size: 1.2rem;
   color: #ffffff;
   line-height: 1.5;
   margin-bottom: 1rem;
}

.footer-image {
   flex: 1;
   text-align: right;
}

.footer-image img {
   max-width: 300px;
   height: auto;
}

@media screen and (max-width: 768px) {
   .about-me-footer {
       flex-direction: column;
       text-align: center;
   }

   .footer-image {
       margin-top: 2rem;
       text-align: center;
   }
}

.awards-section {
   background-color: #ffffff;
   padding: 4rem 0;
   align-items: center;
   width: 100%;
   margin-top: 0;
}

.awards-container {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   padding: 0 2rem;
}

.award-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: #533527;
}

.award-icon {
   color: #533527;
   margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   gap: 8px;
}

.award-icon i {
   font-size: 24px;
   color: #533527;
}

.award-title {
   font-family: "Bodoni", serif;
   font-size: 2rem;
   font-weight: normal;
   margin-bottom: 0.5rem;
   line-height: 1.2;
}

.award-description {
   font-family: "Bodoni", serif;
   font-size: 1.5rem;
   color: #533527;
   line-height: 1.5;
}

@media (max-width: 767px) {
   .awards-container {
       grid-template-columns: 1fr;
       gap: 3rem;
       padding: 0 1rem;
   }

   .award-title {
       font-size: 1.5rem;
   }

   .award-description {
       font-size: 0.875rem;
   }
}

/* WORK PAGE STYLES */

/* Carousel and image slider styles */
.carousel-container {
   position: relative;
   width: calc(100% - 2rem);
   height: calc(100% - 2rem);
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel-image {
   width: 40%;
   height: auto;
   position: absolute;
   opacity: 0;
   transform: translateX(30%);
   transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.carousel-image.active {
   opacity: 1;
   transform: translateX(0);
   position: relative;
}

.carousel-dots {
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 10px;
   z-index: 10;
}

.dot {
   height: 8px;
   width: 8px;
   margin: 0 5px;
   background-color: rgba(83, 53, 39, 0.3);
   border-radius: 50%;
   display: inline-block;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.dot.active {
   background-color: #533527;
}

/* Project Container Styles */
.project-container {
   width: 100%;
   max-width: 100%;
   margin-top: 0;
}

.project-container .project-item:first-child {
   border-top: 1px solid #e0e0e0;
}

.project-item {
   display: flex;
   height: 100vh;
   width: 100%;
   position: relative;
   border-bottom: 1px solid #e0e0e0;
}

.project-image {
   background: linear-gradient(160deg, #CBA695 -75.15%, #F7F5F1 31.71%, #F7F5F1 97.34%, #E8E7E7 129.47%), linear-gradient(169deg, #CBA695 -99.4%, #F7F5F1 20.75%, #F7F5F1 94.55%, #E8E7E7 130.67%), linear-gradient(167deg, #CBA695 -72.84%, #F7F5F1 33.52%, #F7F5F1 98.86%, #E8E7E7 130.84%);
   width: 50%;
   height: 100%;
   padding: 1rem;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   border-right: 1px solid #53352740;
   /* Add a clear border between image and text */
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all 0.3s ease-in-out;
   cursor: none;
}

body {
   font-family: "Bodoni", serif;
   overflow-x: hidden;
   width: 100vw;
   position: relative;
   cursor: none;
   max-width: 100%;
   overflow-x: hidden;
   overscroll-behavior-x: none;
}

html,
body {
   max-width: 100%;
   overflow-x: hidden;
   position: relative;
}


a {
   all: unset;
}

.canvas {
   width: 100%;
   height: 100%;
}

.cursor {
   position: fixed;
   width: 32px;
   height: 32px;
   background-color: #000000;
   border-radius: 50%;
   z-index: 9999;
   pointer-events: none;
   transform: translate(-50%, -50%);
   transition: 0.3s;
   mix-blend-mode: difference;
   backdrop-filter: invert(1);
   will-change: transform;
}



.navbar {
   font-family: "Bodoni", serif;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 1.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 1000;
   background: white;
   transition: box-shadow 0.3s ease;

   h1 {
       top: 50%;
       position: absolute;
       width: max-content;
       text-align: center;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: var(--headline-large);
       font-weight: normal;
       color: #533527;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
       transition: .7s cubic-bezier(.5, 0, 0, 1) 0s;
       margin-bottom: 1rem;
       line-height: var(--line-height-tight);
   }
}



.hero-content h2 {
   position: absolute;
   top: 60%;
   left: 48%;
   width: 100%;
   margin: 0 auto;
}

@keyframes shimmer {
   0% {
       background-position: 100% 0;
   }

   100% {
       background-position: -100% 0;
   }
}

@keyframes shimmer {
   0% {
       background-position: 200% center;
   }

   100% {
       background-position: -200% center;
   }
}

#name {
   background: linear-gradient(90deg,
           #533527 0%,
           #533527 40%,
           #D4A088 50%,
           #533527 60%,
           #533527 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: shimmer 8s infinite linear;
}


.navbar h1.bigger {
   top: 40vh;
   font-size: var(--display-large);
   transform: translate(-50%, -50%);
   /* Reset transition for position change */
   transition: top 0.7s cubic-bezier(.5, 0, 0, 1),
       transform 0.7s cubic-bezier(.5, 0, 0, 1),
       font-size 0.7s cubic-bezier(.5, 0, 0, 1);
   /* Ensure shimmer properties are explicitly set */
   background: linear-gradient(90deg,
           #533527 0%,
           #533527 40%,
           #D4A088 50%,
           #533527 60%,
           #533527 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   /* Force animation to remain during bigger state */
   animation: shimmer 8s infinite linear !important;
   animation-play-state: running !important;
   line-height: var(--line-height-tight);
   letter-spacing: -0.25px;
}

@keyframes shimmer {
   0% {
       background-position: 200% center;
   }

   100% {
       background-position: -200% center;
   }
}

.nav-link {
   font-family: "Bodoni", serif;
   color: #533527;
   text-decoration: none;
   padding: 0 0.5rem;
   font-size: var(--title-small);
   font-weight: 600;
   letter-spacing: 0.6px;
   transition: color 0.3s ease, transform 0.2s ease;
   position: relative;
   line-height: var(--line-height-normal);
}

.navbar-left,
.navbar-right {
   display: flex;
   align-items: center;
   gap: 5rem;
   margin: 0rem 5rem;
}

.navbar-right .nav-link.resume-btn {
   font-family: "Bodoni", serif;
   color: #533527;
   text-decoration: none;
   font-size: var(--title-small);
   font-weight: 600;
   letter-spacing: 0.6px;
   padding: 8px 16px;
   transition: background-color 0.3s ease, transform 0.2s ease;
}


.navbar h1.bigger {
   font-family: "Bodoni", serif;
   font-weight: normal;
   letter-spacing: 1px;
   color: #533527;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
   transition: 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.container {
   width: 100%;
   height: 100vh;
   background-size: cover;
   background-position: center;
   background-image: url("./images/BG.png");
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.hero {
   min-height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: #533527;
   transition: all .8s cubic-bezier(.5, 0, 0, 1) 0s;
}


.subheading {
   font-family: "Bodoni", serif;
   width: max-content;
   font-size: var(--title-medium);
   text-align: center;
   color: #533527;
   letter-spacing: 0.6px;
   padding: 8px 16px;
   position: relative;
   margin: 0 auto;
   margin-top: -5vh;
   /* Added negative margin to pull it up */
}

.subheading::before,
.subheading::after {
   content: "";
   position: absolute;
   top: 50%;
   height: 0;
   background-color: transparent;
   transition: width 0.4s ease;
}

.archived-work-section {
   position: relative;
   z-index: 1;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   transition: backdrop-filter 0.3s ease;
}

.logo img,
.menu-icon img {
   height: 24px;
   width: auto;
   opacity: 1;
}

/* Styles for when navbar becomes sticky */
.navbar.sticky {
   background: #533527;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.scroll-indicator {
   position: absolute;
   bottom: 20px;
   /* Position at the bottom of the parent container */
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
}

.circular-text {
   font-size: 0.6rem;
   color: #101010;
   transform: rotate(0deg);
   width: 100px;
   height: 100px;
}

.circular-text span {
   display: inline-block;
   position: absolute;
   transform-origin: 0 48px;
   /* Adjust this value for spacing */
}

#arrow-icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 32px;
   height: 32px;
}

#arc-icon {
   animation: rotateArc 8s linear infinite;
   /* Adjust duration as needed */
}

.section-2 {
   font-size: var(--body-large);
   text-align: center;
   color: #533527;
   letter-spacing: 0.6px;
   position: relative;
   margin: 32px auto;
   line-height: var(--line-height-normal);
   max-width: 980px;
   overflow-wrap: break-word;
   padding: 0 32px;
}

.worked-with {
   background-color: #deff00;
   font-size: var(--title-medium);
   font-weight: 900;
   text-align: left;
   padding: 8px 16px;
   color: #000000;
   letter-spacing: 0.6px;
   animation: fadeInUp 1s ease-out 0.2s;
   animation-fill-mode: both;
   position: relative;
   line-height: 1.5;
   max-width: fit-content;
   margin: 0;
}

.selected-work {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   margin-right: 2rem;

   .selectedwork-image img {
       width: 200px;
       height: auto;
   }
}

.selected-work-section,
.archived-work-section {
   font-size: var(--display-small);
   color: #533527;
   margin: 4rem;
   line-height: var(--line-height-tight);
}


.selected-work-section-paragraph {
   font-size: var(--title-large);
   text-align: left;
   color: #533527;
   letter-spacing: 0.6px;
   position: relative;
   line-height: 1.5;
   width: 100%;
   overflow-wrap: break-word;
   margin-top: 0.75rem;
}

.project-card-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.project-card:hover,
#card-1:hover {
   cursor: url('./images/Logo.svg'), auto;
}

.card-information {
   display: flex;
   flex-direction: column;
   width: 95%;
   height: auto;
   gap: 1rem;
}

.large-icon {
   font-size: 2rem;
   opacity: 0;
}

.archive-card-section {
   position: relative;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   overflow: hidden;

   .archive-card {
       display: flex;
       flex-direction: row;
       align-items: center;
       padding: 0 32px;
       width: 100%;
       height: auto;
       background-color: #ffffff;
       border: 1px solid #53352740;
       color: #533527;
       position: relative;
       overflow: hidden;
       padding: 2rem;
   }

   .archive-card:hover {
       background: linear-gradient(160deg, #CBA695 -75.15%, #F7F5F1 31.71%, #F7F5F1 97.34%, #E8E7E7 129.47%), linear-gradient(169deg, #CBA695 -99.4%, #F7F5F1 20.75%, #F7F5F1 94.55%, #E8E7E7 130.67%), linear-gradient(167deg, #CBA695 -72.84%, #F7F5F1 33.52%, #F7F5F1 98.86%, #E8E7E7 130.84%);
       color: #533527;
       transition: none;

       .large-icon {
           font-size: 2rem;
           opacity: 1;
           transition: none;
       }
   }

   .c-description {
       position: relative;
       font-size: var(--body-large);
       align-content: center;
       text-align: left;
       font-weight: 300;
       letter-spacing: 0.6px;
       line-height: var(--line-height-normal);
       width: 100%;
       height: 100%;
       transition: none;
   }

   .card-image {
       width: 50%;
       height: 100%;
       position: relative;
   }

   .archive-card:hover .card-cta {
       background-color: #533527;
       color: #ffffff;
       border: 1px solid #ffffff;
       transition: none;

       .lock-unicode {
           color: #ffffff;
           transition: none;
       }
   }
}

.footer-section {
   font-family: "Bodoni", serif;
   color: #533527;
   align-content: center;

   .footer-section,
   p {
       font-size: 1.8rem;
   }

   p.view-cta {
       color: #ffffff;
   }
}

#view-cta {
   background-color: white;
   color: #533527;
   transition: none;
}

#view-cta:hover {
   background-color: #533527;
   color: #ffffff;
   transition: none;
}

.tag-name {
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 0.5rem;
   padding-top: 1rem;
   width: 30%;
   height: 100%;
   transition: none;

   .name {
       font-size: 2.5rem;
       align-content: normal;
       font-weight: 500;
       text-align: left;
       letter-spacing: 0.6px;
       line-height: 1.2;
       transition: none;
       width: max-content;
   }
}

.tags {
   display: flex;
   flex-direction: row;
   gap: 1rem;

   .tag {
       /* border: 1px solid #533527; */
       border-radius: 0.25rem;
       background-color: #E8E7E7;
       padding: 0.5rem 1rem;
       font-size: var(--label-large);
       align-content: normal;
       letter-spacing: 0.6px;
       transition: none;
       width: auto;
   }
}

.cta-button {
   display: inline-block;
   padding: 10px 20px;
   color: #533527;
   border: 1px solid #533527;
   border-radius: 25px;
   text-align: center;
   text-decoration: none;
   font-size: 25px;
   transition: background-color 0.3s ease;
}

.cta-button:hover {
   background-color: #b3cc00;
}

.project-name-container {
   position: absolute;
   padding: 0 64px;
   top: 24%;
   display: flex;
   align-items: start;
   justify-content: space-between;
   width: 100%;
   font-size: 2rem;
   color: #533527;
}

.project-name {
   width: 30%;
}

.project-card {
   flex: 0.5;
   background-color: #ffffff;
   border: 1px solid #bbb;
   height: calc(100% - var(--project-footer-height));
   text-align: center;
   width: 300px;
   display: flex;
   flex-direction: column;
   position: relative;
   transition: all 700ms cubic-bezier(0.215, 0.61, 0.355, 1);
   transform-origin: left center;

   .project-details {
       left: 18px;
       position: absolute;
       font-style: normal;
       font-size: 1.2rem;
       color: #533527;
       bottom: calc(24px + var(--project-footer-height));
       width: 40vw;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
       opacity: 0;
       z-index: 10;
       column-gap: 48px;
       text-align: left;
       gap: 8px;
       left: 18px;
       right: 18px;

       .description,
       .project-name {
           width: 100%;
           word-wrap: break-word;
           line-height: 1.2;
       }
   }

   #project-image {
       position: absolute;
       top: 30%;
       /* Position 16px from the top */
       left: 50%;
       width: 32%;
       transform: translate(-50%, -50%);
       height: auto;
       /* Maintain aspect ratio */
       object-fit: cover;
       z-index: 10;
       /* Set a high z-index to ensure it is in the foreground */
       opacity: 0;
   }

   #box1 {
       width: 100%;
       height: 600px;
       overflow: hidden;
       opacity: 0;
   }

   .company-name {
       position: absolute;
       left: 18px;
       top: 18px;
       font-size: 32px;
       letter-spacing: 0.6px;
       color: #533527;
       z-index: 10;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .project-card-footer {
       display: flex;
       width: 100%;
       height: var(--project-footer-height);
       position: absolute;
       bottom: 0;
       opacity: 0;

       .footer-section {
           flex: 1;
           border: 1px solid #bbb;
           height: 100%;
       }
   }
}

.project-card.selected-project-card {
   transform: scaleX(1.01);
   flex: 1;

   .project-card-footer {
       opacity: 1;
   }

   .project-details {
       opacity: 1;
   }

   #project-image {
       opacity: 1;
       animation: shake 0.82s linear infinite alternate;
       /* Make image visible on hover */
   }

   #box1 {
       opacity: 0.4;
       overflow: hidden;
   }

   .company-name {
       color: coral;
   }
}

@keyframes shake {
   from {
       transform: translate(-50%, calc(-50% - 10px));
       /* transform: translateY(-10); */
   }

   to {
       transform: translate(-50%, calc(-50% + 10px));
   }
}

.inner-item {
   background-color: #d0d0d0;
   border: 1px solid #aaa;
   border-radius: 5px;
   padding: 10px;
   text-align: center;
}

.project-card #Project-card-bg {
   position: relative;
   z-index: 1;
   height: 600px;
}

.project-card #box2 {
   position: relative;
   width: auto;
   height: 600px;
}

.project-name {
   font-size: 2rem;
   top: 75%;
   left: 4%;
   z-index: 10;
}

.square {
   width: 30px;
   height: 30px;
   background-color: #bbb;
   margin: 10px auto;
}

.archive-card-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-content: space-between;
   width: 100%;
   height: 100%;
}

.archive-card-container::-webkit-scrollbar {
   display: none;
}

.archive-card {
   text-align: center;
   position: relative;
   box-sizing: border-box;
   height: 100%;
   flex-shrink: 0;
}

.gif {
   width: 200px;
   height: auto;
   position: absolute;
   z-index: 99;
   top: 70%;
   left: 3%;
}

.card-footer {
   position: relative;
   background-color: #ffffff;
   padding: 16px;
   height: 10%;
   text-align: left;
}

.canvas {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

.canvas video {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

.additional-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   text-align: center;
   color: white;
   background: #53352787;
   padding: 2rem;
   border-radius: 8px;
   width: 80%;
   height: auto;
}

.canvas-heading {
   margin: 1.5rem 0;
   line-height: 1.6;
}

.aboutme-cta {
   margin-top: 2rem;
}

@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(20px);
   }

   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes rotateArc {
   from {
       transform: rotate(0deg);
   }

   to {
       transform: rotate(360deg);
   }
}

@keyframes rotateCircle {
   from {
       transform: rotate(0deg);
   }

   to {
       transform: rotate(-360deg);
   }
}

@keyframes rotate {
   from {
       transform: rotate(0deg);
   }

   to {
       transform: rotate(360deg);
   }
}

@keyframes moveBulletin {
   0% {
       transform: translateX(100%);
       /* Start off-screen to the right */
   }

   100% {
       transform: translateX(-100%);
       /* Move off-screen to the left */
   }
}

/* Container styles */
.scrolling-text-container {
   background-color: #533527;
   overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
   white-space: nowrap;
   font-size: 16px;
   font-weight: 600;
   padding: 24px 0;
}

/* Text styles */
.scrolling-text {
   display: flex;
}

.scrolling-text-item {
   padding: 0 30px;
}

.scrolling-text-container:hover .scrolling-text-inner>div {
   animation-play-state: paused;
}

@keyframes scroll-left {
   0% {
       transform: translateX(0%);
   }

   100% {
       transform: translateX(-100%);
   }
}

@keyframes scroll-right {
   0% {
       transform: translateX(-100%);
   }

   100% {
       transform: translateX(0%);
   }
}

.marquee {
   width: var(--marquee-width);
   height: var(--marquee-height);
   background-color: #2d160d;
   color: #eee;
   overflow: hidden;
   position: relative;
}

.marquee:before,
.marquee:after {
   position: absolute;
   top: 0;
   width: 10rem;
   height: 100%;
   content: "";
   z-index: 1;
}

.marquee-content {
   list-style: none;
   height: 100%;
   display: flex;
   animation: scrolling 70s linear infinite;
}

.marquee-content:hover {
   animation-play-state: paused;
}

@keyframes scrolling {
   0% {
       transform: translateX(0);
   }

   100% {
       transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
   }
}

.marquee-content li {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   max-height: 100%;
   font-size: 1.5rem;
   white-space: nowrap;
   margin-right: 30px;
}

@media (max-width: 100vw) {
   .marquee {
       --marquee-width: 100vw;
       --marquee-height: 8vh;
       --marquee-elements-displayed: 4;
       --marquee-elements: 30;
       --marquee-element-width: 30vw;
       --marquee-animation-duration: 10s;
   }

   .marquee:before,
   .marquee:after {
       width: 5rem;
   }
}

.pulse-icon {
   position: relative;
   width: 24px;
   height: 24px;
   background-color: rgba(52, 152, 219, 0.5);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   animation: pulse-iconExpand 2s infinite;
}

.pulse-icon::after {
   content: "";
   position: relative;
   width: 24px;
   height: 24px;
   background-color: #3498db;
   border-radius: 50%;
   transform: translate(-50%, -50%);
}

@keyframes pulse-iconExpand {
   0% {
       transform: translate(-50%, -50%) scale(1);
       opacity: 0.8;
   }

   100% {
       transform: translate(-50%, -50%) scale(3);
       opacity: 0;
   }
}

.footer {
   background-color: #533527;
   color: #ffffff;
   font-family: "Bodoni", serif;
   margin-top: 4rem;
   width: 100%;
}

.footer-marquee {
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 1rem 0;
}

.marquee-content {
   display: inline-flex;
   gap: 2rem;
   animation: scroll 30s linear infinite;
   white-space: nowrap;
   position: relative;
   width: fit-content;
}

/* Duplicate the content to create seamless loop */
.marquee-content {
   display: inline-flex;
}

.marquee-content span {
   padding: 0 1rem;
}

@keyframes scroll {
   from {
       transform: translateX(0);
   }

   to {
       transform: translateX(-50%);
   }
}

.marquee-content span {
   font-size: 1.2rem;
   letter-spacing: 0.5px;
   opacity: 0.8;
}

.footer-content {
   margin: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 2rem;
   padding: 0 2rem;
}

.footer-title {
   font-size: 3rem;
   font-weight: normal;
   margin-bottom: 1rem;
   line-height: 1.2;
   color: #533527;
}

.email-link {
   color: #ffffff;
   text-decoration: none;
   font-size: 1.25rem;
   border-bottom: 1px solid transparent;
   transition: border-color 0.3s ease;
}

.social-links {
   display: flex;
   direction: column;
   gap: 1rem;
   width: max-content;
}

.social-links .linkedin,
.social-links .twitter,
.social-links .dribbble {
   border: 1px solid #F7F5F1;
   text-decoration: none;
   padding: 8px 16px;
   color: #F7F5F1;
   text-decoration: none;
}

.email-link:hover {
   border-color: #ffffff;
}

.footer-right {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   gap: 2rem;
   padding: 2rem;
}

.footer-right-title {
   color: #ffffff;
}

.contact-form {
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: column;
   gap: 1rem;
   background-color: #ffffff;
   padding: 2rem;
}

.form-input {
   padding: 0.75rem;
   border: 1px solid #533527;
   border-radius: 4px;
   font-family: inherit;
   font-size: 1rem;
   background: #ffffff;
   color: #533527;
}

.form-input::placeholder {
   color: #533527;
   opacity: 0.7;
}

textarea.form-input {
   min-height: 100px;
   resize: vertical;
}

.form-submit {
   background-color: #533527;
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
   border-radius: 4px;
   cursor: pointer;
   font-family: inherit;
   font-size: 1rem;
   transition: background-color 0.3s ease;
}

.form-submit:hover {
   background-color: transparent;
   border: 1px solid #533527;
   color: #533527;
}

.footer-left {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   gap: 1rem;
}

.social-link {
   color: #ffffff;
   text-decoration: none;
   flex-wrap: wrap;
   width: 100%;
   font-size: 1rem;
   opacity: 0.8;
   transition: opacity 0.3s ease;
}

.social-link:hover {
   opacity: 1;
}

.back-to-top {
   background: none;
   border: none;
   color: #ffffff;
   cursor: pointer;
   font-family: inherit;
   font-size: 1rem;
   opacity: 0.8;
   transition: opacity 0.3s ease;
   padding: 0;
}

.back-to-top:hover {
   opacity: 1;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding: 1.5rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.875rem;
   opacity: 0.8;
}

.bottom-links {
   display: flex;
   gap: 2rem;
}

.bottom-links a {
   color: #ffffff;
   text-decoration: none;
   transition: opacity 0.3s ease;
}

.bottom-links a:hover {
   opacity: 0.8;
}

@keyframes scroll {
   0% {
       transform: translateX(0);
   }

   100% {
       transform: translateX(-50%);
   }
}

/* >>>>>>>>>>>>>>>>>>>>>> */

/* Add the hamburger menu button styles */
.menu-toggle {
   display: block;
   position: fixed;
   right: 1rem;
   top: 1rem;
   z-index: 1001;
   background: none;
   border: none;
   padding: 0.5rem;
   opacity: 0;
}

.menu-toggle span {
   display: block;
   width: 25px;
   height: 2px;
   background-color: #533527;
   margin: 5px 0;
   transition: 0.3s;
}

/* Mobile styles */
@media (max-width: 767px) {
   .menu-toggle {
       display: block;
   }

   .navbar {
       padding: 1rem;
   }

   .navbar-left,
   .navbar-right {
       display: none;
   }

   /* Mobile styles */
   @media (max-width: 767px) {
       .menu-toggle {
           display: block;
           opacity: 1;
       }

       .navbar {
           padding: 2rem;
       }

       .navbar-left,
       .navbar-right {
           display: flex;
           position: fixed;
           width: 100%;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           gap: 2rem;
           margin: 0;
           z-index: 1000;
           opacity: 0;
           visibility: hidden;
           transform: translateY(20px);
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       }

       .navbar-left {
           width: 100%;
           top: 25vh;
       }

       .navbar-right {
           top: 45vh;
       }

       .navbar.nav-active .navbar-left,
       .navbar.nav-active .navbar-right {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }

       .navbar.nav-active .navbar-left {
           top: 25vh;
           height: auto;
       }

       .navbar.nav-active .navbar-right {
           top: 45vh;
           height: auto;
       }

       /* Add a white background that covers the whole screen */
       .navbar::before {
           content: '';
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100vh;
           background: white;
           z-index: 999;
           opacity: 0;
           visibility: hidden;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       }

       .navbar.nav-active::before {
           opacity: 1;
           visibility: visible;
       }

       /* Add staggered animation for menu items */
       .navbar.nav-active .navbar-left {
           transition-delay: 0.2s;
       }

       .navbar.nav-active .navbar-right {
           transition-delay: 0.3s;
       }

       .navbar h1#name {
           font-size: 24px;
       }

       .navbar h1#name.bigger {
           font-size: clamp(2.5rem, 8vw, 4rem);
           /* Adjusted font size */
           top: 35vh;
           /* Moved up slightly on mobile */
       }

       .nav-link {
           text-align: center;
           font-size: 1.5rem;
           padding: 1rem;
           width: auto;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       /* Prevents body scroll when menu is open */
       body.menu-open {
           overflow: hidden;
       }

       .project-card-container {
           flex-direction: column;
           align-items: center;
           gap: 2rem;
           padding: 1rem;
           margin-bottom: 2rem;
           height: auto;
           min-height: 2400px;
           /* Height for 4 cards with spacing */
       }

       .project-card {
           width: 100%;
           max-width: 100%;
           margin-bottom: 3rem;
           height: 500px;
           /* Fixed height for each card */
           position: relative;
       }

       .project-card #box1 {
           width: 100%;
           height: 400px;
           /* Reduced height for mobile */
       }

       .project-card #project-image {
           width: 40%;
           /* Slightly larger image for mobile */
           top: 25%;
       }

       .project-card .project-details {
           width: 85%;
           bottom: calc(40px + var(--project-footer-height));
       }

       .project-card .project-details .project-name {
           font-size: 1.5rem;
       }

       .project-card .project-details .description {
           font-size: 1rem;
           line-height: 1.4;
       }

       .project-card .company-name {
           font-size: 1.2rem;
           left: 1rem;
           top: 1rem;
       }
   }

   .subheading {
       font-size: 16px;
       margin-top: 0;
       padding: 16px;
       position: absolute;
       top: 30vh;
       left: 50%;
       transform: translateX(-50%);
       width: 90%;
       max-width: 400px;
   }

   .project-card-footer {
       height: 180px;
       /* Fixed height for footer */
       flex-direction: column;
       position: absolute;
       bottom: 0;
   }

   .footer-section {
       width: 100%;
       height: 200px;
       /* Equal height for each section */
       border-right: none;
       border-bottom: 1px solid #bbb;
       display: flex;
       flex-direction: row;
       gap: 1rem;
       align-items: center;
       justify-content: space-between;
       padding: 0 1rem;
       text-align: center;
   }

   .footer-section:last-child {
       border-bottom: none;
   }

   .footer-section p {
       margin: 0;
       font-size: 1rem;
       line-height: 1.2;
   }

   .footer-section label {
       margin-top: 2px;
       font-size: 0.8rem;
       line-height: 1.2;
   }

   #view-cta {
       padding: 0.5rem;
       text-align: center;
       justify-content: center;
   }

   /* Make elements visible by default without hover */
   .project-card {
       transform: none !important;
       /* Remove any hover transforms */
   }

   .project-card .project-card-footer {
       opacity: 1;
   }

   .project-card .project-details {
       opacity: 1;
   }

   .project-card #project-image {
       opacity: 1;
       animation: none;
       /* Remove hover animation */
   }

   .project-card #box1 {
       opacity: 0.4;
   }

   /* Remove hover states */
   .project-card:hover,
   #card-1:hover {
       cursor: default;
       transform: none !important;
   }

   /* Remove hover animations */
   .project-card.selected-project-card {
       transform: none;
   }

   .project-card.selected-project-card #project-image {
       animation: none;
   }

   /* Show company name by default */
   .project-card .company-name {
       color: coral;
   }

   .selected-work-section {
       margin: 1rem;
   }

   .archive-card-section {
       padding: 0 1rem;
   }

   .archive-card {
       display: flex;
       flex-direction: column;
       padding: 1.5rem;
       margin-bottom: 1rem;
   }

   .card-information {
       width: 100%;
   }

   .tag-name {
       width: 100%;
   }

   .tag-name .name h3 {
       font-size: 1.5rem;
       line-height: 1.3;
       margin-bottom: 0.5rem;
   }

   .c-description {
       font-size: 1rem;
       line-height: 1.4;
       margin: 1rem 0;
   }

   .tags {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
   }

   .tag {
       font-size: 0.9rem;
       padding: 0.4rem 0.8rem;
       white-space: nowrap;
   }

   /* Make the chevron icon smaller and properly aligned */
   .large-icon {
       font-size: 1.5rem;
       opacity: 1;
       margin-left: 1rem;
   }

   /* Ensure proper spacing for linked cards */
   .card-link {
       display: block;
       margin-bottom: 1rem;
   }

   /* Handle hover states on mobile */
   .archive-card:hover {
       background: none;
       color: inherit;
   }

   .archive-card:hover .large-icon {
       opacity: 1;
   }

   /* Footer container */
   .footer {
       margin-top: 2rem;
   }

   /* Marquee section */
   .footer-marquee {
       padding: 0.75rem 0;
   }

   .marquee-content span {
       font-size: 1rem;
       padding: 0 0.5rem;
   }

   /* Main footer content */
   .footer-content {
       margin: 1rem;
       flex-direction: column;
       gap: 2rem;
   }

   /* Left section with social links */
   .footer-left {
       width: 100%;
       gap: 1.5rem;
   }

   .footer-right-title {
       font-size: 2rem;
       text-align: center;
       color: #ffffff;
   }

   .social-links {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: 1rem;
       width: 100%;
   }

   .social-links a {
       border: 1px solid #F7F5F1;
       text-decoration: none;
       padding: 8px 16px;
       color: #F7F5F1;
       min-width: 120px;
       /* Set minimum width */
       text-align: center;
       /* Center text */
       display: flex;
       align-items: center;
       gap: 0.5rem;
       justify-content: center;
   }

   /* Contact form section */
   .contact-form {
       width: 100%;
       padding: 1.5rem;
   }

   .footer-title {
       font-size: 2rem;
       margin-bottom: 1.5rem;
       text-align: center;
   }

   .form-input {
       padding: 0.75rem;
       font-size: 1rem;
   }

   textarea.form-input {
       min-height: 120px;
   }

   .form-submit {
       width: 100%;
       padding: 1rem;
       margin-top: 0.5rem;
   }

   /* Footer bottom section */
   .footer-bottom {
       flex-direction: column;
       gap: 1rem;
       text-align: center;
       padding: 1rem;
   }

   .footer-bottom p {
       font-size: 0.8rem;
   }

   .back-to-top {
       width: 100%;
       padding: 0.75rem;
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 4px;
   }
}



/* Fix for nested media query and mobile responsiveness issues */
@media (max-width: 767px) {

   /* Disable custom cursor on mobile */
   .cursor {
       display: none !important;
   }

   body,
   a,
   button {
       cursor: auto;
   }

   /* Fix menu toggle */
   .menu-toggle {
       display: block;
       opacity: 1;
       position: fixed;
       right: 1rem;
       top: 1rem;
       z-index: 1005;
   }

   /* Fix navbar components */
   .navbar {
       padding: 2rem;
   }

   .navbar-left,
   .navbar-right {
       display: flex;
       position: fixed;
       width: 100%;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 2rem;
       margin: 0;
       z-index: 1000;
       opacity: 0;
       visibility: hidden;
       transform: translateY(20px);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .navbar-left {
       width: 100%;
       top: 25vh;
   }

   .navbar-right {
       top: 45vh;
   }

   .navbar.nav-active .navbar-left,
   .navbar.nav-active .navbar-right {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .navbar.nav-active .navbar-left {
       top: 25vh;
       height: auto;
   }

   .navbar.nav-active .navbar-right {
       top: 45vh;
       height: auto;
   }

   /* Background overlay for menu */
   .navbar::before {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background: white;
       z-index: 999;
       opacity: 0;
       visibility: hidden;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .navbar.nav-active::before {
       opacity: 0.98;
       visibility: visible;
   }

   /* Menu animations */
   .navbar.nav-active .menu-toggle span:first-child {
       transform: rotate(45deg) translate(5px, 5px);
   }

   .navbar.nav-active .menu-toggle span:nth-child(2) {
       opacity: 0;
   }

   .navbar.nav-active .menu-toggle span:last-child {
       transform: rotate(-45deg) translate(5px, -5px);
   }

   /* Prevent scroll when menu is open */
   body.menu-open {
       overflow: hidden;
   }

   /* Fix title sizes */
   .navbar h1#name {
       font-size: 24px;
   }

   .navbar h1#name.bigger {
       font-size: 3.5rem;
       top: 35vh;
   }

   /* Fix nav links */
   .nav-link {
       text-align: center;
       font-size: 1.5rem;
       padding: 1rem;
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   /* Fix subheading position */
   .subheading {
       font-size: 16px;
       margin-top: 0;
       padding: 16px;
       position: absolute;
       top: 50vh;
       left: 50%;
       transform: translateX(-50%);
       width: 90%;
       max-width: 400px;
   }

   /* Fix section headings spacing */
   .selected-work-section,
   .archived-work-section {
       font-size: 2rem;
       margin: 2rem 1rem;
   }

   /* Fix project images & layout */
   .project-item {
       min-height: auto;
       height: auto;
       padding-bottom: 2rem;
   }

   .project-image {
       width: 100%;
       max-height: auto;
   }

   /* Fix archive cards */
   .archive-card-section {
       grid-template-columns: 1fr;
   }

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

   /* Improve accessibility */
   button,
   .nav-link,
   .btn-read-more,
   .form-submit {
       height: fit-content;
       width: auto;
   }

   /* Fix overflow issues */
   html,
   body {
       overflow-x: hidden;
       width: 100%;
   }

   /* Disable animations for performance */
   #arc-icon {
       animation: none;
   }

   /* Reduce height on project cards */
   .project-card {
       height: auto;
       min-height: auto;
   }

   /* Make footer more compact */
   .footer-content {
       padding: 0 1rem;
   }
}

/* Fix for very small screens */
@media (max-width: 480px) {
   .navbar h1#name.bigger {
       font-size: 2.5rem;
       top: 30vh;
   }

   .subheading {
       top: 45vh;
   }

   .social-links {
       grid-template-columns: 1fr;
   }
}

/* This is the closing bracket of your last media query */

/* Fix for CTA buttons under projects to have equal left-right padding */
.btn-read-more {
   display: inline-block;
   background-color: #533527;
   color: #ffffff;
   padding: 16px 32px;
   /* Equal left-right padding (increased from 24px) */
   /* ... rest of the code ... */
}