/* Master Styles */
@font-face {
  font-family: "Mexa";
  src: url("font/mexa.woff2") format("woff2"),
    url("font/mexa.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* width */
::-webkit-scrollbar {
  width: 0;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px transparent;
  border-radius: 0px;
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--var-color-two);
  border-radius: 0;
}

/* Scroll Styles*/
:root {
  --var-color-one: rgb(
    243,
    240,
    231
  ); /* rgb(
    219,
    206,
    197
  ); /*rgb(
    196,
    188,
    180
  ); /*  /*rgb(164, 119, 100); /*rgb(202, 149, 194);*/
  --var-color-two: rgb(102, 81, 75); /*rgb(33, 15, 18);*/
  --var-color-four: rgb(197, 189, 181); /*rgb(247, 244, 244);*/
}

* {
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/*@font-face {
  font-family: super-magic;
  src: url("fonts/super-magic-font/SuperMagic-L3XVn.ttf") format("ttf");
  font-style: normal;
  font-weight: 300 400 600 800 900 1000;
}*/

html,
body {
  font-family: "mulish", sans-serif;
  background-color: /*var(--var-color-two)*/ rgb(102, 81, 75);
  background: radial-gradient(
    rgb(218, 209, 199),
    rgb(243, 240, 231),
    rgb(243, 240, 231)
  );

  color: var(--var-color-two);
  width: 100%;
  max-width: 2000px;
}

body {
  overflow-x: hidden;
}

#content {
  min-height: calc(100% - 20px);
}

/* Nav Styles*/
.nav {
  position: fixed;
  display: flex;
  background-color: transparent;
  z-index: 9999999999999999999;
  max-width: 100%;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  min-height: 4vh;
  padding-top: 0;
  padding-bottom: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: 0.1s ease-in-out;
  opacity: 1;
  transform: translateY(0.5rem);
}

@media screen and (max-width: 1000px) {
  .nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.nav-active {
  opacity: 1;
  background-color: transparent;
  background: radial-gradient(ellipse at top, transparent),
    radial-gradient(ellipse at bottom, transparent, var(--var-color-two));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
  padding-bottom: 1px;
  min-height: 8vh;
}

@media screen and (max-width: 1000px) {
  .nav-active {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.nav-active .left-side .brand {
  font-size: 1.8rem;
  font-weight: 600;
  opacity: 1;
  animation: enlargeFont 1s ease-in-out 1 alternate;
}

@keyframes enlargeFont {
  0% {
    font-size: 1rem;
    opacity: 0;
  }

  45% {
    transform: skewX(0);
  }
  50% {
    font-size: 2.4rem;
    transform: skewX(-790deg);
  }
  55% {
    transform: skewX(0deg);
  }

  100% {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 600px) {
  .nav-active .left-side .brand {
    animation: enlargeFontSmall 1s ease-in-out 1 alternate;
    font-size: 1.8rem;
  }
}

@keyframes enlargeFontSmall {
  0% {
    font-size: 1rem;
    opacity: 0;
  }

  45% {
    transform: skewX(0);
  }
  50% {
    font-size: 2.4rem;
    transform: skewX(-790deg);
  }
  55% {
    transform: skewX(0deg);
  }

  100% {
    font-size: 1.8rem;
  }
}

.nav-active .left-side .brand a:link {
  color: var(--var-color-two);
}

.nav-active .nav-links {
  display: flex;
}

.nav-active .nav-links a:link {
  color: var(--var-color-two);
}

.left-side .brand {
  display: flex;
  text-align: center;
  letter-spacing: 0;
  font-size: 1.8rem;
  font-weight: 600;
  opacity: 1;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .left-side .brand {
    font-size: 2rem;
  }
}

.left-side .brand:hover {
  cursor: pointer;
}

.left-side .brand a {
  outline: none;
  text-decoration: none;
  font-family: "plaster", serif;
}

.left-side .brand a:hover {
  color: var(--var-color-four);
}

.left-side .brand a:link {
  color: var(--var-color-two);
}

.left-side .brand a:visited {
  color: var(--var-color-two);
}

.left-side .brand a:focus {
  border-bottom: 1px solid;
}

.left-side .brand a:after {
  display: block;
  content: "";
  border-bottom: solid 1px transparent;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

.left-side .brand a:after {
  transform-origin: 100% 50%;
}

.left-side .brand a:hover:after {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.left-side .brand a:active {
  background: transparent;
}

.left-side .brand li {
  list-style: none;
}

.nav-links {
  display: flex;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-links:hover {
  cursor: pointer;
}

.nav-links a {
  outline: none;
  text-decoration: none;
  font-family: "mulish", sans-serif;
}

.nav-links a:hover {
  opacity: 0.3;
}

.nav-links a:link {
  color: var(--var-color-two);
}

.nav-links a:visited {
  color: var(--var-color-two);
}

.nav-links a:focus {
  border-bottom: 1px solid;
}

.nav-links a:after {
  display: block;
  content: "";
  border-bottom: solid 1px transparent;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

.nav-links a:after {
  transform-origin: 100% 50%;
}

.nav-links a:hover:after {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.nav-links a:active {
  background: transparent;
}

.nav-links div {
  list-style: none;
  padding: 10px;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger:hover {
  opacity: 0.3;
}

.hamburger div {
  width: 20px;
  height: 1.6px;
  background-color: var(--var-color-six);
  transition: all 0.3s ease;
  margin: 5px;
}

.line2 {
  opacity: 1;
}

@media screen and (max-width: 200px) {
  body {
    overflow-x: hidden;
  }

  .hamburger {
    display: block;
  }

  .nav-links {
    z-index: 99999999999999999999999999999999999999999999999999999999999999999999;
    position: absolute;
    width: 100%;
    transition: transform 0.5s ease-in;
    font-family: "inter", sans-serif;
  }

  .nav-links div {
    opacity: 0;
    width: 80px;
    padding: 2px;
  }

  .nav-active .nav-links {
    display: flex;
    padding-bottom: 10%;
  }

  .nav-active .hamburger {
    display: block;
  }

  .nav-active {
    transform: translateX(0%);
  }

  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(200px);
    }
    to {
      opacity: 1;
      transform: translateX(100px);
    }
  }

  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 10px);
    opacity: 1;
  }
  .toggle .line2 {
    transform: rotate(180deg) translate(-5px, -6px);
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(-360deg) translate(-5px, 5px);
    opacity: 1;
  }
}

@media screen and (max-width: 1000px) {
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
}

@media screen and (max-width: 700px) {
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(-100px);
    }
  }
}

/*Container Styles*/
.container-1 {
  display: block;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: auto;
}

.container-2 {
  display: block;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 100%;
  background-color: transparent;
  padding: 0;
  margin: auto;
  padding-left: 10rem;
  padding-right: 10rem;
  padding-bottom: 6rem;
  padding-top: 6rem;
}

@media screen and (max-width: 1000px) {
  .container-2 {
    padding-bottom: 3rem;
    padding-top: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*Portfolio Image Styles*/

.portfolio-img-background-top0 {
  display: flex;
  height: 100vh;
  width: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out; /* Animation */
  background-color: var(--var-color-two);
  /* background: radial-gradient(rgb(33, 15, 18), rgb(53, 32, 30));*/
  animation: appearImage 3s ease-in-out 1 alternate;
  opacity: 0.6;
  filter: blur(1px) contrast(120%);
  /*filter: brightness(0.6) contrast(120%) saturate(120%) sepia(0.3);*/
}
@media screen and (max-width: 1000px) {
  .portfolio-img-background-top0 {
    display: block;
    height: 100vh;
    width: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out; /* Animation */
    background-color: transparent;
    animation: appearImage 1s ease-in-out 1 alternate;
    opacity: 0.1;
  }
}

@media screen and (max-width: 700px) {
  .portfolio-img-background-top0 {
    display: block;
    height: 100vh;
    width: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out; /* Animation */
    background-color: transparent;
    animation: appearImage 1s ease-in-out 1 alternate;
    opacity: 1;
    /*filter: brightness(100%) contrast(120%) saturate(120%) sepia(0.3);*/
  }
}
@keyframes appearImage {
  0% {
    opacity: 1;
    filter: blur(100px);
  }

  100% {
    filter: blur(0) brightness(60%) sepia(30%);
  }
}

/* Full-page video background */
.video-background {
  position: relative;
  height: 100vh; /* Make the section fill the viewport height */
  width: 100%; /* Ensure it covers the full width */
  overflow: hidden;
}

.video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* Make sure the video covers the entire container */
  z-index: -1; /* Place the video behind the content */
  animation: appearImage 1s ease-in-out 1 alternate;
  opacity: 0.15;
  filter: brightness(100%) contrast(100%) saturate(120%) sepia(100%);
}
@keyframes appearImage {
  0% {
    opacity: 0;
    filter: blur(100px) brightness(60%) sepia(60%);
  }

  100% {
    opacity: 0.15;
    filter: blur(10px) brightness(100%) sepia(100%);
  }
}

/* Top Text Styles*/
.top-text {
  display: block;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transition: color 0.3s ease; /* Smooth transition for color change */
}

/*.top-text h1 {
  z-index: 999999999999999999999;
  display: block;
  position: absolute;
  width: 100%;
  margin: 0;
  justify-content: center;
  text-align: center;
  line-height: 1;
  color: var(--var-color-one);
  font-weight: 600;
  font-size: 9vw;
  font-family: "mulish", sans-serif;
  letter-spacing: 0.5rem;
  transform: translateY(-32rem);
  text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
  .top-text h1 {
    width: 100%;
    font-size: 12vw;
    letter-spacing: 0.3rem;
    transform: translateY(-29rem);
    font-weight: 500;
  }
}

@media screen and (max-width: 700px) {
  .top-text h1 {
    width: 100%;
    font-size: 12vw;
    transform: translateY(-28rem);
    letter-spacing: 0.1rem;
  }
}*/

.top-text h1 {
  display: block;
  position: absolute;
  width: 100%;
  margin: 0;
  justify-content: center;
  text-align: center;
  line-height: 1;
  color: var(--var-color-one);
  font-weight: 300;
  font-size: 3vw;
  font-family: "aboreto", "mexa", "mulish", sans-serif;
  letter-spacing: 0.8rem;
  transform: translateY(-32rem);
  opacity: 0;
}

@media screen and (max-width: 1000px) {
  .top-text h1 {
    width: 100%;
    font-size: 4vw;
    letter-spacing: 0.5rem;
    transform: translateY(-31rem);
  }
}

@media screen and (max-width: 700px) {
  .top-text h1 {
    font-size: 5vw;
    transform: translateY(-33rem);
  }
}

.top-text h2 {
  display: block;
  position: absolute;
  width: 100%;
  margin: 0;
  justify-content: center;
  text-align: center;
  line-height: 1;
  color: var(--var-color-one);
  font-weight: 300;
  font-size: 3vw;
  font-family: "aboreto", "mexa", "mulish", sans-serif;
  letter-spacing: 0.03rem;
  transform: translateY(-33rem);
}

@media screen and (max-width: 1000px) {
  .top-text h2 {
    width: 100%;
    font-size: 4vw;

    transform: translateY(-31.5rem);
  }
}

@media screen and (max-width: 700px) {
  .top-text h2 {
    font-size: 5vw;
    transform: translateY(-30rem);
  }
}

.top-text h3 {
  display: block;
  position: absolute;
  width: 100%;
  margin: 0;
  justify-content: center;
  text-align: center;
  line-height: 1;
  color: var(--var-color-one);
  font-weight: 600;
  font-size: 1.5vw;
  font-family: "mulish", "mexa", "mulish", sans-serif;
  letter-spacing: 0.03rem;
  transform: translateY(-29.5rem);
  text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
  .top-text h3 {
    width: 100%;
    font-size: 2vw;

    transform: translateY(-28.5rem);
  }
}

@media screen and (max-width: 700px) {
  .top-text h3 {
    font-size: 3vw;
    transform: translateY(-27.5rem);
  }
}
/* Mid Text Styles*/

.mid-text {
  display: flex;
  justify-content: space-between;
  align-items: left;
  text-align: left;
  position: relative;
  letter-spacing: 0.01rem;
}

.mid-text h1 {
  width: 100%;
  margin: 0;
  text-align: left;
  text-transform: none;
  color: var(--var-color-two);
  font-weight: 300;
  font-size: 3vw;
  font-family: "aboreto", "playfair display", "mexa", "mulish", serif;
  letter-spacing: 0.03rem;
  line-height: 1.4;
  padding-top: 1rem;
}

@media screen and (max-width: 1000px) {
  .mid-text h1 {
    font-size: 4vw;
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .mid-text h1 {
    font-size: 5vw;
    width: 100%;
    letter-spacing: 0rem;
  }
}

.mid-text h2 {
  width: 100%;
  margin: 0;
  align-items: right;
  right: 0;
  text-align: center;
  color: var(--var-color-two);
  font-weight: 600;
  font-size: 0.8rem;
  font-family: "mulish", serif;
  padding: 1rem;
  line-height: 1.4;
}

@media screen and (max-width: 1000px) {
  .mid-text h2 {
    font-size: 0.8rem;
  }
}

.mid-text p {
  width: 100%;
  margin: 0;
  text-align: left;
  color: var(--var-color-two);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  line-height: 1.4;
  font-family: "mulish", sans-serif;
}

@media screen and (max-width: 1000px) {
  .mid-text p {
    width: 35%;
  }
}

.mid-text p a {
  width: auto;
  margin: 0;
  text-align: right;
  color: var(--var-color-two);
  cursor: pointer;
  font-family: "mulish", sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.mid-textH3grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 3rem;
  padding-left: 10rem;

  padding-top: 1rem;
}
@media screen and (max-width: 1000px) {
  .mid-textH3grid {
    padding-left: 0;
    column-gap: 3rem;
  }
}

.mid-textH3grid h3 {
  width: 100%;
  margin: 0;
  justify-content: center;
  text-align: left;
  color: var(--var-color-two);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  line-height: 1.8;
  font-family: "mulish", sans-serif;

  padding-top: 2rem;
}

@media screen and (max-width: 1000px) {
  .mid-textH3grid h3 {
    width: 100%;
  }
}

/* Photo Goods Styles*/
.container-photo-goods {
  padding-bottom: 12rem;
  padding-top: 6rem;
}

@media screen and (max-width: 1000px) {
  .container-photo-goods {
    padding-bottom: 9rem;
    padding-top: 3rem;
  }
}

.container-photo-goods .photo-goods-text {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (max-width: 1000px) {
  .container-photo-goods .photo-goods-text {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.photo-goods-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container-photo-goods .photo-goods-text h2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container-photo-goods .photo-goods-text h2 {
  width: 100%;
  position: relative;

  padding-top: 1rem;

  font-weight: 300;
  font-size: 3vw;
  font-family: "aboreto", "playfair display", "mexa", "mulish", serif;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0.03rem;
}

@media screen and (max-width: 1000px) {
  .container-photo-goods .photo-goods-text h2 {
    font-size: 4vw;
  }
}
@media screen and (max-width: 700px) {
  .container-photo-goods .photo-goods-text h2 {
    font-size: 5vw;
  }
}

/* Photo Goods Portfolio Images Styles*/

.portfolio-items-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1rem;
  row-gap: 3rem;
  padding-left: 10rem;
  padding-right: 10rem;

  position: relative;
  background-color: transparent;
}

@media screen and (max-width: 1000px) {
  .portfolio-items-wrapper {
    row-gap: 1rem;
    column-gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.portfolio-item-wrapper {
  position: relative;
  text-align: center;
}

.portfolio-img-background-1 {
  position: relative;
  text-align: center;
  height: 350px;
  width: 100%;
  z-index: 99999999;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out;
  filter: drop-shadow(0 0 1px #000);
  background-color: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  border-radius: 10px;
}

/*.portfolio-img-background-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  mix-blend-mode: overlay; 
  opacity: 0.1;
  border-radius: 10px;
}*/

@media screen and (max-width: 1200px) {
  .portfolio-img-background-1 {
    height: 250px;
  }
}

@media screen and (max-width: 960px) {
  .portfolio-img-background-1 {
    height: 200px;
  }
}

@media screen and (max-width: 700px) {
  .portfolio-img-background-1 {
    height: 180px;
  }
}

@media screen and (max-width: 600px) {
  .portfolio-img-background-1 {
    height: 140px;
  }
}

.portfolio-img-background-1:hover {
  transform: scale(0.9);
  filter: drop-shadow(0 0 0 var(--var-color-thirty-one));
  cursor: pointer;
  opacity: 1;
}

.img-darken {
  transition: 1s;
  filter: brightness(60%);
}

/*Portfolio Images in Photo Goods Section Slide-in JS Animation Text*/

.portfolio-item-wrapper ul {
  position: absolute;
  margin: auto;
  height: 4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  .portfolio-item-wrapper ul {
    height: 3rem;
  }
}

.portfolio-item-wrapper ul li {
  height: 4rem;
  display: flex;
  overflow: hidden;
  margin-bottom: 0.5rem;
  justify-content: center;
}

.portfolio-item-wrapper ul li span {
  display: block;
  text-align: center;
  transform: translateY(200%);
  color: var(--var-color-two);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  line-height: 1.8;
  font-family: "mulish", sans-serif;
  padding-top: 1rem;
}

@media screen and (max-width: 1000px) {
  .portfolio-item-wrapper ul li span {
    padding-top: 0.6rem;
  }
}

.portfolio-item-wrapper ul li span.active {
  transform: translateY(0%);
  transition: 1s ease-out;
}

.portfolio-item-wrapper ul li:hover {
  opacity: 1;
}

.portfolio-item-wrapper ul a:hover {
  text-decoration: none;
  list-style: none;
}

.gap {
  width: 0.3rem;
}

/*Footer Styles*/
.portfolio-img-background-bottom4 {
  height: 100vh /*100vh*/;
  width: 100%;
  z-index: 99999999;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out; /* Animation */
  filter: drop-shadow(0 0 1px var(--var-color-two) blur(0) brightness(100%));
  background-color: transparent;
  animation: appearImage 2s ease-in-out 1 alternate;
  border-radius: 10px;
}

@media screen and (max-width: 1000px) {
  .portfolio-img-background-bottom4 {
    border-radius: 0;
  }
}

.footer-box {
  display: block;
  background-color: transparent;
  padding-top: 6rem;
  padding-bottom: 18rem;
  background-color: var(--var-color-one);
  /*background: radial-gradient(
    circle,
    rgb(208, 175, 150),
    rgb(198, 162, 133),
    rgb(190, 150, 122),
    rgb(180, 145, 117),
    rgb(139, 99, 73)
  );*/

  color: var(--var-color-two);
}

@media screen and (max-width: 1000px) {
  .footer-box {
    padding-top: 3rem;
  }
}

.footer-content {
  width: 100%;
  position: relative;
  padding-top: 3rem;
  opacity: 1;
  padding-left: 10rem;
  padding-right: 10rem;
}

@media screen and (max-width: 1000px) {
  .footer-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.footer-divide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}

@media screen and (max-width: 1000px) {
  .footer-divide {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.footer-content h1 {
  width: 100%;
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-size: 3vw;
  font-family: "aboreto", "playfair display", "mulish", serif;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0.03rem;
}

@media screen and (max-width: 1000px) {
  .footer-content h1 {
    font-size: 4vw;
  }
}

@media screen and (max-width: 700px) {
  .footer-content h1 {
    font-size: 5vw;
  }
}

.footer-content h1 a {
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  color: var(--var-color-two);
}

.footer-content h1 span {
  width: 100%;
  position: relative;

  text-align: left;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 3vw;
  font-family: "mulish", sans-serif;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}

@media screen and (max-width: 1000px) {
  .footer-content h1 span {
    font-size: 5vw;
  }
}

.footer-content h1 a span {
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  color: var(--var-color-two);
}

.footer-content h2 {
  width: 100%;
  position: relative;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  line-height: 1.8;
  text-align: left;
  font-family: "mulish", sans-serif;

  padding-top: 1rem;
  padding-bottom: 1rem;
}

.footer-content h2 a {
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  color: var(--var-color-two);
}

.footer-content h3 {
  width: 150%;
  position: relative;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  text-align: left;
  font-family: "plaster", serif;
  line-height: 1.8;
}

.footer-content h3 a {
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

@media screen and (max-width: 1000px) {
  .footer-content h3 {
    font-size: 1.2rem;
  }
}

hr {
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--var-color-four);
}

/* Slides Styles*/
.gallery-container {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6rem;
  padding-right: 10rem;
  padding-left: 10rem;
  padding-bottom: 3rem;
}

@media screen and (max-width: 1000px) {
  .gallery-container {
    padding-top: 6rem;
    padding-bottom: 3rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media screen and (max-width: 600px) {
  .gallery-container {
    padding-top: 6rem;
    padding-bottom: 1rem;
  }
}

.thumbnails {
  position: absolute;
  bottom: 18px;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.thumbnails div {
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: var(--var-color-one);
  border-radius: 100%;
  z-index: 9999999999999999999;
}

.thumbnails div.highlighted {
  background-color: var(--var-color-two);
}

.slides {
  margin: 0;
  width: 100vw;
  height: 900px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  display: flex;
  flex-wrap: nowrap;
  gap: 3rem;
  justify-content: flex-start;
  overflow-x: auto; /* Makes the gallery scrollable horizontally */
  perspective: 1500px; /* Add perspective to create depth */
  padding: 20px;
  scroll-behavior: smooth; /* Smooth scrolling */
}

@media screen and (max-width: 1000px) {
  .slides {
    height: 900px;
    gap: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .slides {
    height: 900px;
    gap: 5rem;
  }
}

/*.slides > div {
  scroll-snap-align: start;
}*/

.slides img {
  width: 250px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.6s ease; /* Slower and smoother transition */
  transform-style: preserve-3d; /* Ensures 3D transformations are applied */
  will-change: transform; /* Optimizes for animation */
  animation: scroll-gallery 20s linear infinite;
  opacity: 0.9;
}

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

.slides img:hover {
  opacity: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9); /* Softer shadow */
}

@media screen and (max-width: 1000px) {
  .slides img {
    width: 300px;
    height: 400px;
  }
}

@media screen and (max-width: 600px) {
  .slides img {
    width: 300px;
    height: 300px;
  }
}

.slides img.wide {
  width: 400px;
}

.slides h1 {
  text-align: center;
  color: var(--var-color-four);
  transform: translateY(-450px);
  font-weight: 700;
  font-size: 5vw;
  font-family: "mulish", sans-serif;
  letter-spacing: 0.01rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.slides::-webkit-scrollbar {
  display: none;
}

/* Slides LEFT Styles*/
.gallery-container2 {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 1rem;
}

@media screen and (max-width: 1000px) {
  .gallery-container2 {
    padding-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
  }
}

.thumbnails2 {
  position: absolute;
  bottom: 18px;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.thumbnails2 div {
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: var(--var-color-one);
  border-radius: 100%;
  z-index: 9999999999999999999;
}

.thumbnails2 div.highlighted {
  background-color: var(--var-color-two);
}

.slides2 {
  border-radius: 10px;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 6rem;
  width: 100vw;
  height: 200px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /*transform: translateX(-12rem);*/
}

@media screen and (max-width: 1000px) {
  .slides2 {
    width: 100vw;
    height: 200px;
    gap: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .slides2 {
    width: 100vw;
    height: 200px;
    gap: 1rem;
  }
}

@media screen and (max-width: 600px) {
  .slides2 {
    width: 500px;
    height: 250px;
  }
}

.slides2 > div {
  scroll-snap-align: start;
}

.slides2 img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  /*filter: brightness(90%) grayscale(0.3);*/
}

@media screen and (max-width: 1000px) {
  .slides2 img {
    width: 150px;
    height: 200px;
  }
}

@media screen and (max-width: 600px) {
  .slides2 img {
    width: 150px;
    height: 200px;
  }
}

.slides2 h1 {
  text-align: center;
  color: var(--var-color-four);
  transform: translateY(-450px);
  font-weight: 700;
  font-size: 5vw;
  font-family: "mulish", sans-serif;
  letter-spacing: 0.01rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.slides2::-webkit-scrollbar {
  display: none;
}

/* Initial style for all images to be invisible */
.portfolio-img-background-top1,
.portfolio-img-background-top2,
.portfolio-img-background-top3,
.portfolio-img-background-bottom4,
.portfolio-img-background-1,
.horizontal-slider-image {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Fade effect */
}

/* When the image enters the viewport, this class will be added to make it visible */
.portfolio-img-background-top1.visible,
.portfolio-img-background-top2.visible,
.portfolio-img-background-top3.visible,
.portfolio-img-background-bottom4.visible,
.portfolio-img-background-1.visible,
.horizontal-slider-image.visible {
  opacity: 1;
}

/* Add a bit of spacing at the top for smooth scroll visibility */
.portfolio-img-background-top1,
.portfolio-img-background-top2,
.portfolio-img-background-top3,
.portfolio-img-background-bottom4,
.portfolio-img-background-1,
.horizontal-slider-image {
  margin-top: 50px; /* Adjust this value based on your layout */
}

/* Cookie Pop up */
.cookie-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background-color: var(--var-color-one);
  color: var(--var-color-two);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: none;
  z-index: 1000;
  text-transform: uppercase;
}

.cookie-popup p {
  margin: 0 0 10px;
  font-size: 0.7rem;
}

.cookie-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cookie-buttons button {
  border: none;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.accept-btn {
  background-color: var(--var-color-two);
  color: var(--var-color-one);
  border: 1px solid var(--var-color-two);
}

.accept-btn:hover {
  background-color: var(--var-color-one);
  color: var(--var-color-two);
  border: 1px solid var(--var-color-two);
}

.deny-btn {
  border: 1px solid var(--var-color-two);
  background-color: var(--var-color-four);
  color: var(--var-color-two);
}

.deny-btn:hover {
  background-color: var(--var-color-one);
  color: var(--var-color-two);
  border: 1px solid var(--var-color-two);
}

/**************LOGIN / SIGNUP***************/

.hidden {
  display: none;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-bg);
  color: var(--var-color-four);
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  z-index: 1002; /* Make sure the form is above the blur */
}

/* This is the background blur */
body.blurred::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px); /* Apply blur to background */
  z-index: 1000; /* Behind the popup */
}

.popup-content {
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

.input-field {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 5px;
  border: 1px solid var(--border-color);
}

.btn-primary,
.btn-secondary {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  line-height: 1.8;
  font-family: "mulish", sans-serif;
}

.btn-primary {
  background: transparent;
  color: var(--var-color-two);
}

.btn-secondary {
  background: transparent;
  color: var(--var-color-two);
  border: 1px solid var(--var-color-four);
  border-radius: 50px;
}

.btn-primary:hover {
  background: transparent;
  color: var(--var-color-two);
  border: 1px solid transparent;
  border-radius: 30px;
}

.btn-secondary:hover {
  background: transparent;
  color: var(--var-color-two);
  border: 1px solid var(--var-color-two);
}

.nav-active .btn-primary {
  background: transparent;
  color: var(--var-color-two);
}

.nav-active .btn-secondary {
  background: transparent;
  color: var(--var-color-two);
  border: 1px solid var(--var-color-four);
  border-radius: 50px;
}

.nav-active .btn-primary:hover {
  background: transparent;
  color: var(--var-color-four);
  border: 1px solid transparent;
  border-radius: 50px;
}

.nav-active .btn-secondary:hover {
  background: transparent;
  color: var(--var-color-two);
  border: 1px solid var(--var-color-two);
}

.toggle-link a {
  color: var(--var-color-one);
  text-decoration: none;
}

.toggle-link a:hover {
  text-decoration: underline;
}

/* Initial opacity setup for sections to be faded in */
.container-1,
.mid-text,
.mid-textH3grid,
.container-photo-goods,
.footer-content {
  opacity: 0;
  transform: translateY(
    30px
  ); /* Initial offset for a smooth fade-in from below */
  transition: opacity 1.5s ease, transform 1s ease;
}

/* When section is in view, we apply the fade-in effect */
.fadeInVisible {
  opacity: 1;
  transform: translateY(0); /* Move into the original position */
}

/* Optional: Letter-by-letter animation */
.top-text h1 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInLetters 0.5s forwards;
}

.top-text h1 span:nth-child(odd) {
  animation-delay: 0.1s;
}

.top-text h1 span:nth-child(even) {
  animation-delay: 0.3s;
}

/* Letter-by-letter animation */
@keyframes fadeInLetters {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/***********Scroll & IMAGE GROWS***************/
/*body {
  height: 1000vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}*/
.image-container {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease, height 0.3s ease;
}
img {
  width: 33vw;
  height: 40vh;
  object-fit: cover;
  transition: width 0.3s ease, height 0.3s ease;
}

#dynamicImage {
  display: block;
  margin: 0 auto; /* Centering */
  object-fit: cover;
  border-radius: 100px;
}