@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap);
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://use.typekit.net/nrf8ylf.css");
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap");

.bebas-neue-regular {
  font-family: "Formula Condensed";
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Formula Condensed";
  font-style: normal;
  font-weight: 700;
  src: url(../font/FormulaCondensed-Bold.woff2) format("woff2"),
    url(../font/FormulaCondensed-Bold.woff) format("woff");
}

/* Style for the whole page */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  opacity: 0;
  visibility: hidden; /* Prevents interaction while hidden */
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out; /* Delay visibility change */
}
body.show {
  opacity: 1;
  visibility: visible; /* Becomes visible */
}
/* Loader Styling */
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #22222200;
  z-index: 9999;
  overflow: hidden;
}

#loader img {
  width: 45%;
  height: auto;
}

@media only screen and (max-width: 768px) {
  #loader img {
    width: 100%;
    height: auto;
  }
}

.loader-hidden {
  transform: translateY(-100%); /* Slide up */
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Main content */
#content {
  display: none;
  transition: opacity 1s ease-in; /* Smooth fade-in for content */
}

/* Fade-in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* NOISE*/

.main-wrapper {
  position: fixed;
  padding: 0;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.2;
}
.noise-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  z-index: 10;
}

.noise-wrapper::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.noise {
  position: fixed;
  top: -500px;
  right: -500px;
  bottom: -500px;
  left: -500px;
  background: transparent url(../images/noise.png) 0 0;
  background-size: 320px 320px;
  opacity: 0.5;
  animation: noise 1s steps(8, end) infinite both;
}

@keyframes noise {
  0% {
    transform: translateX(0px, 0px);
  }
  10% {
    transform: translate(-100px, 100px);
  }
  20% {
    transform: translate(150px, -100px);
  }
  30% {
    transform: translate(-100px, 100px);
  }
  40% {
    transform: translate(100px, -150px);
  }
  50% {
    transform: translate(-100px, 200px);
  }
  60% {
    transform: translate(-200px, -100px);
  }
  70% {
    transform: translateY(50px, 100px);
  }
  80% {
    transform: translate(100px, -150px);
  }
  90% {
    transform: translate(0px, 200px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}

header {
  top: 5%;
  align-items: center;
  color: var(--color-secondary);
  display: flex;
  height: var(--header-height);
  justify-content: space-around;
  left: calc(var(--padding) + var(--safe-area-inset-left));
  position: sticky;
  top: calc(2rem + var(--safe-area-inset-top));
  /* display: block; */
  width: 90%;
  gap: 20%;
  z-index: 2;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-300px);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 3s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s; /* Smooth transition for style changes */
}

header.sticky {
  justify-content: space-between;

  gap: 20%;
  z-index: 2;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  padding: 0 5%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background-color: #5b5b5b73;
  backdrop-filter: blur(15px);
  color: white;
  border-radius: 50rem;
  border: 1px solid #ffffff78;
  transition: 1s all cubic-bezier(0.19, 1, 0.22, 1),
    opacity 3s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

#fadeDiv {
  opacity: 0;
  transform: translateY(-100px);
  transition: 1s all cubic-bezier(0.19, 1, 0.22, 1),
    opacity 3s cubic-bezier(0.19, 1, 0.22, 1) 0s,
    transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

/* Fade-up effect */
.fade-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
 .fade-up2 {
    opacity: 1;
    transform: translateY(0);
  }

header:after {
  left: -0.75rem;
}

.bar {
  height: 4px;
  background-color: #ddd;  
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease-out;
}

header.sticky .bar {
  background-color: #000000;
}
 
.content {
  padding: 20px;
  height: auto;
}

#menu-icon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
  margin-right: 30px;
  display: none;
}

@media only screen and (max-width: 959px) {
  #menu-icon {
    display: inline;
    top: 45px;
    cursor: pointer;
  }
}

#header:after {
  content: "";
  clear: both;
  display: block;
}

#container {
  padding-top: var(--padding);
  transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.menu {
  grid-row-gap: 4rem;
  display: grid;
  grid-template-areas:
    "location location"
    ". social"
    "menu menu"
    "copyright copyright";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr auto 1fr 2rem;
  touch-action: none;
  position: fixed;
  top: -200%;
  right: 5%;
  width: 90%;
  height: 100dvh;
  background-color: rgb(255 255 255 / 35%);
  backdrop-filter: blur(15px);
  padding: var(--padding) calc(var(--padding) + var(--safe-area-inset-right))
    var(--padding) calc(var(--padding) + var(--safe-area-inset-left));
  box-shadow: inset -20px -19rem 20rem 0 rgb(255 255 255 / 55%);
  color: var(--color-primary);
  z-index: 100;
  row-gap: 4rem;
  border: 1px solid #ffffff;
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  transition: box-shadow 3s cubic-bezier(0.19, 1, 0.22, 1),
    top 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.menu:hover {
  box-shadow: inset -15px 20rem 20rem 0 rgb(255 255 255 / 55%);
  transition: box-shadow 3s cubic-bezier(0.19, 1, 0.22, 1),
    top 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.menu.open {
  top: -1%;  
}

@media only screen and (max-width: 768px) {
  header {
    justify-content: space-between;
  }
  .menu {
    right: 0%;
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .menu {
    grid-template-areas:
      ". ."
      "menu menu"
      "social copyright";
    grid-template-rows: 2rem 1fr 2rem;
  }
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999;
}

.close-btn svg {
  width: 34px;
  height: 34px;
  color: white;
}

.img {
  transition: width 2s cubic-bezier(0.86, 0, 0.07, 1) 6s;
  width: 0;
  overflow: hidden;
  border-radius: 10px;
  display: inline-block;
  height: auto;
  will-change: transform;
}

.img.expand {
  width: 15vw;  
}

span img {
  width: 20vw;
  height: auto;
  border-radius: inherit;
  display: block;
  margin: 0 auto;
}

.image-container {
  display: flex;
  justify-content: center;
}

.line small {
  bottom: 0%;
  display: inline-block;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  left: 0.5em;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  opacity: 0;
  animation: small-enter 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 6s forwards; 
 
}
 
@keyframes small-enter {
  0% {
    opacity: 0;  
  }

  100% {
    opacity: 1;  
  }
}

.hamburger-menu {
  left: 50%;
  position: fixed !important;
  top: 0;
  transform: translateX(-50%);
}

.card {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1.5s ease-out,
    transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s ease-out,
    transform 1.5s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 3s cubic-bezier(0.19, 1, 0.22, 1);
}

.slide-in-from-right {
  animation: 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0s 1 slideInFromRight
    forwards;
}
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }

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

.index {
  opacity: 0;
  transform: translateY(1%);  
  animation: index-slide-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 6s forwards; /* Bounce animation */
}
 
@keyframes index-slide-in {
  0% {
    opacity: 0;
    transform: translateY(1%);  
  }
  100% {
    opacity: 1;
    transform: translateY(0);  
  }
}

.staggered-project-container {
  height: auto;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0px;
  padding-top: 15px;
}

#staggered-project,
#staggered-project2,
#staggered-project3,
#staggered-project4,
#staggered-project5,
#staggered-project6,
#staggered-project7,
#staggered-project8,
#staggered-project9 {
  margin-right: 10px;
}
.staggered-project {
  font-family: "Formula Condensed", Helvetica, Arial, sans-serif;
  margin: 0dvw 0dvw;
}

.staggered-project span {
  display: inline-block;
  opacity: 0;  
  font-size: 7rem;
  line-height: 7.2rem;
  transform: translateY(100px);  
  transition: opacity 0.3s cubic-bezier(0.86, 0, 0.07, 1),
    transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);  
}

.staggered-project span.visible {
  opacity: 1;  
  transform: translateY(0);  
  animation: bounce 1.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;  
}
/* Bounce Keyframes */
@keyframes bounce {
  0% {
    transform: translateY(150px);  
  }
  60% {
    transform: translateY(-10px);  
  }
  100% {
    transform: translateY(0); 
  }
}

@media only screen and (max-width: 768px) {
  .staggered-project span.visible {
    opacity: 1;  
    transform: translateY(0);  
    animation: bounce 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;  
  }
  #fadeDiv {
    margin-top: 0rem;
  }

  .staggered-project span {
    font-size: 4rem;
    line-height: 4rem;
  }
  .img {
    border-radius: 5px;
  }
  .line {
    height: 10vw;
  }

  /* Bounce Keyframes */
  @keyframes bounce {
    0% {
      transform: translateY(50px); /* Start from below */
    }
    60% {
      transform: translateY(0px); /* Go above the final position */
    }
    100% {
      transform: translateY(0); /* Settle in final position */
    }
  }
}

main[data-v-51992d94] {
  grid-gap: var(--row-gap) var(--gap);
  color: var(--color-secondary);
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  max-width: var(--max-width);
  padding: 0 calc(var(--safe-area-inset-right) + var(--padding))
    calc(var(--safe-area-inset-bottom) + var(--padding-bottom))
    calc(var(--safe-area-inset-left) + var(--padding));
  position: relative;
  width: 70%;
}
@media only screen and (min-width: 600px) {
  main[data-v-51992d94] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  main[data-v-51992d94] {
    width: 100%;
  }
}

.hero[data-v-51992d94] {
  --min-top: 2rem;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  grid-column: span 2;
  height: 0;
  margin-top: 2rem;
  margin-top: var(--min-top);
  overflow: hidden;
  padding-top: 80%;
  position: relative;
  width: 100%;
  will-change: transform;
}
.page[visible] .hero img[data-v-51992d94] {
  opacity: 1 !important;
  transform: none !important;
  transition: 2s transform var(--ease-out-quint),
    1s opacity var(--ease-in-out-sine);
}
.hero img[data-v-51992d94] {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  height: 0%;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  rotate: 40deg;
}

.slidedownbanner {
  height: 100% !important; /* Move to original position */
  animation: slidingdownimage 1s cubic-bezier(0.23, 1, 0.48, 1.26) forwards; /* Bounce animation */
}

/* Bounce Keyframes */
@keyframes slidingdownimage {
  0% {
    rotate: 10deg;
    transform: translateY(-130%); /* Start from below */
  }

  100% {
    rotate: 0deg;
    transform: translateY(0); /* Settle in final position */
  }
}

@media only screen and (min-width: 600px) {
  .hero[data-v-51992d94] {
    grid-column: span 3;
    padding-top: 45%;
  }
}
@media only screen and (min-width: 600px) {
  .hero[data-v-51992d94] {
    --min-top: 1.5rem;
  }
}

.info[data-v-51992d94] {
  grid-column: span 2;
  margin: 0 auto;
  width: 100%;
  max-width: 85rem;
  padding: 0 0rem;
  position: relative;
}

.info h1[data-v-51992d94] {
  color: var(--color-secondary);
  font-family: "Formula Condensed", Helvetica, Arial, sans-serif;
  font-size: 4.8rem;
  font-style: normal;
  font-weight: 800;
  grid-area: title;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 2.8rem;
  overflow: hidden;
  text-transform: uppercase;
  width: 100%;
}
.info h1 > span[data-v-51992d94] {
  display: block;
  overflow: hidden;
  padding-top: 0.02em;
  white-space: nowrap;
}

.info .links[data-v-51992d94] {
  display: flex;
  gap: 4rem;
  grid-area: links;
  justify-content: flex-end;
}
.info .links a[data-v-51992d94] {
  align-items: center;
  color: var(--color-blue);
  display: inline-flex;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  gap: 0.25em;
  letter-spacing: -0.0026em;
  line-height: 1.4;
  position: relative;
  left: 0%;
  transition: 0.1s background-color var(--ease-out-cubic),
    0.1s left var(--ease-out-cubic);
  white-space: nowrap;
}

.info .links a[data-v-51992d94]:hover {
  font-style: italic;
  text-decoration: solid;
  text-decoration: underline;
  left: 2%;
  transition: 0.5s all var(--ease-out-cubic);
  color: white;
}

.info .links a svg[data-v-51992d94] {
  fill: currentColor;
  height: 0.7em;
  margin-top: 0.15em;
}

@media only screen and (min-width: 600px) {
  .info .links a[data-v-51992d94] {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 600px) {
  .info h1[data-v-51992d94] {
    font-size: 9rem;
  }
}
@media only screen and (min-width: 600px) {
  .info[data-v-51992d94] {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 600px) {
  .info .content[data-v-51992d94],
  .info .label[data-v-51992d94] {
    font-size: 2rem;
  }
}
.page[visible] .content[data-v-51992d94],
.page[visible] .gallery[data-v-51992d94],
.page[visible] .label[data-v-51992d94],
.page[visible] .links[data-v-51992d94] {
  opacity: 1 !important;
  transform: none !important;
  transition: 1s opacity var(--ease-in-out-sine),
    1s transform var(--ease-out-cubic);
  transition-delay: 0.2s;
}

.info .content[data-v-51992d94],
.info .label[data-v-51992d94] {
  color: var(--color-text);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.0026em;
  line-height: 1.4;
  margin-top: 5%;
  /* white-space: pre-line; */
  padding: 0;
}
.label[data-v-51992d94] {
  margin: 2em 0 1em;
}
dt[data-v-51992d94] {
  float: left;
  margin-right: 0.25em;
}
dt[data-v-51992d94]:after {
  content: ":";
}
.label[data-v-51992d94] {
  margin: 2em 0 1em;
}

.gallery[data-v-51992d94] {
  grid-gap: var(--gap);
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
.gallery .img[data-v-51992d94] {
  border-radius: var(--radius);
  grid-column: span 2;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .gallery[data-v-51992d94] {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 600px) {
  .gallery .img[size="s"][data-v-51992d94] {
    grid-column: span 1;
  }
}

footer[data-v-51992d94] {
  padding: var(--padding) calc(var(--padding) + var(--safe-area-inset-right))
    var(--padding) calc(var(--padding) + var(--safe-area-inset-left));
}
footer[data-v-bfdc6f28] {
  color: var(--color-secondary);
  display: flex;
  grid-column: span 2;
  justify-content: space-between;
}
@media only screen and (min-width: 600px) {
  footer[data-v-bfdc6f28] {
    grid-column: span 3;
  }
}
.social[data-v-bfdc6f28] {
  display: flex;
  gap: var(--padding);
  grid-area: social;
}
a[data-v-bfdc6f28],
p[data-v-bfdc6f28] {
  font-family: "Formula Condensed", Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.social a[data-v-bfdc6f28] {
  display: inline-block;
  height: 0.84em;
  outline: 0;
  position: relative;
  white-space: nowrap;
}
a[data-v-bfdc6f28] {
  height: 0.84em;
  outline: 0;
  position: relative;
}

.copyright[data-v-bfdc6f28] {
  grid-area: copyright;
  justify-self: flex-end;
}
@media only screen and (max-width: 599px) {
  .portfolio[data-v-bfdc6f28],
  .social[data-v-bfdc6f28] {
    display: none;
  }
}
@media only screen and (max-width: 599px) {
  .social[data-v-bfdc6f28] {
    align-self: flex-end;
    flex-direction: column;
    gap: 1em;
  }
}
@media only screen and (max-width: 599px) {
  .copyright[data-v-bfdc6f28] {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.gobackbtn {
  color: #ffffff;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.0026em;
  line-height: 18px;
  margin-bottom: 10px;
  white-space: pre-line;
  padding: 0;
  margin-left: 0px;
  transition: 1s all ease;
}
.gobackbtn button {
  color: #888888;
  transition: 1s all ease;
}

.gobackbtn button:hover {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
  margin-left: 5px;
  transition: 1s all ease;
  cursor: pointer;
}

.marquee-animation,
.marquee-animation2 {
  height: auto;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  grid-column: span 2;
  width: 100%;
  border-radius: 1rem;
}
.marquee-animation img,
.marquee-animation2 img {
  height: 60px;
  will-change: transform;
  /*position: relative;
	will-change: transform;
	display: inline-block;
	font-size: 0;
   
    width: auto;
    margin: 0 -1px;*/
}

.marquee-animation img.animated,
.marquee-animation2 img.animated2 {
  animation: slider-top-banner 30s linear 0s infinite;
}

@keyframes slider-top-banner {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}