@font-face {
  font-family: "IPAMincho_Regular";
  src: url("./assets/fonts/IPAMincho_Regular.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  font-family: "IPAMincho_Regular", serif;
}

html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100vw;
  position: relative;
  min-width: 100%;
  overflow-x: hidden;
}

.button_scroll {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  height: 100px;
  width: 100px;
  cursor: pointer;
  overflow: hidden;
}

.scroll-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



p {
  margin: 0;
  overflow-x: hidden;
}

.pt-2 {
  padding-top: 2rem;
}

.pt-4 {
  padding-top: 4rem;
}

.pt-6 {
  padding-top: 6rem;
}

.pt-8 {
  padding-top: 8rem;
}

.pt-12 {
  padding-top: 12rem;
}

.pt-14 {
  padding-top: 14rem;
}

.pt-18 {
  padding-top: 18rem;
}

.pt-24 {
  padding-top: 24rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mr-3 {
  margin-right: 3rem;
}

.w-2rem {
  width: 2rem;
}

.w-40 {
  width: 40%;
}

.w-56rem {
  width: 56rem !important;
}

.w-60vw {
  width: 60vw !important;
}

.w-70vw {
  width: 70vw !important;
}

.w-full {
  width: 100%;
}

.video-full {
  width: 100%;
  object-fit: cover;
}

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

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 1.75rem;
}


hr {
  border: none;
  border-top: 1px solid #ccc;
  width: 50%;
}

.divider {
  height: 5rem;
  width: 100%;
  background-color: white;
}

.text-step {
  color: #867560;
  font-size: 2rem;
  font-weight: bold;
}

/* container 1 */
.hero-section {
  height: 300vh;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: -1;
  transition: opacity 1s ease;
}

.hidden {
  display: none;
}

/* center item */
.centered-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  animation: fadeIn 1.5s forwards 0.5s;
  z-index: 3;
  transition: opacity 0.5s ease;
  text-align: center;
  font-weight: bold;
}

.centered-text img {
  width: 26rem;
}

.centered-text p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Background image */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("assets/charcoal-bg.jpg") no-repeat center/cover;
  transform: scale(1.2);
  opacity: 0;
  transition: transform 1s ease, opacity 0.5s ease;
  z-index: -1;
  background-size: cover;
}

/* Video background */
.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-section {
  position: relative;
  top: 100vh;
  min-height: 120vh;
  padding-bottom: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  z-index: 4;
}

.japanese-text {
  margin-left: auto;
  margin-right: 10vw;
  writing-mode: vertical-rl;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: white;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

.japanese-text p {
  line-height: 3.5rem;
  transition: opacity 1s ease, transform 1s ease;
}

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

.text1,
.text2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
  opacity: 0;
  width: 50%;
}

.vertical-text-container {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 3.5rem;
  display: flex;
  flex-direction: row-reverse;
}

.vertical-text-container > p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1));
}

.horizontal-text {
  color: #dbd7d7;
  line-height: 200%;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
  font-size: 1rem;
}

/* container 2 */
.commitment {
  z-index: 100;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5rem;
}
.commitment .block {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 6rem;
  text-align: center;
}

.commitment .block .box {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  text-align: center;
  height: auto;
}
.commitment .block .description{
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}


.commitment .block .box-container {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  width: 100%;
  justify-content: end;
  gap: 0.5rem;
}

.commitment .block .box-container .box {
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: 1rem;
  width: 35%;
  align-items: start;
  justify-content: start;
  gap: 0.5rem;
}

.commitment .block img {
  width: 19.0625rem;
  height: auto;
}
.commitment .block title {
  font-size: 1.25rem;
  color: rgb(141, 0, 0);
}
.commitment .content {
  display: flex;
  align-items: flex-start;
  gap: 4.5rem;
  
}

.commitment .content .parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 30vw;
  flex: 1;
}

.commitment .content .parallax-container .parallax1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
}

.commitment .content .parallax-content {
  flex: 1;
  padding-top: 11.375rem;
  padding-right: 8.5rem;
}

.commitment .content .parallax-content .description {
  line-height: 200%;
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
}

.commitment .content .parallax-content .quote > p {
  color: rgb(134, 117, 96);
  line-height: 200%;
  font-size: 1.1rem;
}

/* container 3 */
.image-gallery {
  width: 100%;
  height: 100vh;
  padding-top: 6rem;
  padding-bottom: 12rem;
  position: relative;
  background-color: white;
}

.image-gallery .image1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45vw;
  aspect-ratio: 600/490;
  z-index: 0;
}

.image-gallery .image2 {
  position: absolute;
  top: 10%;
  left: 3.75rem;
  width: 30vw;
  aspect-ratio: 16 / 9;
}

.image-gallery .image3 {
  position: absolute;
  top: 0;
  right: 3.75rem;
  width: 22vw;
  aspect-ratio: 197/207;
}

.image-gallery .image4 {
  position: absolute;
  top: 60%;
  right: 3.75rem;
  width: 34vw;
  aspect-ratio: 16 / 9;
}

/* container 4 */
.image-banner1 {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: url("./assets/header_1.jpg") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.image-banner1 .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  z-index: 1;
}

.image-banner1 .content {
  position: relative;
  height: 100%;
  z-index: 2;
  color: #fff;
  padding: 2rem;
  display: flex;
}

.image-banner1 .content .description {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: end;
}

.image-banner1 .content .description > p {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 8rem 8rem;
}

.image-banner1 .content div {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: end;
  padding-top: 4rem;
  padding-right: 4rem;
}

.image-banner1 .content div img {
  width: 50%;
}

/* container 5 and 9 */
.staggered-gallery {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: start;
  background-color: #ffffff;
  padding-top: 5rem;
  z-index: 100;
  flex-wrap: wrap;
}

.staggered-gallery .block {
  width: 100%;
  display: flex;
}

.staggered-gallery .block .left {
  width: 50%;
  padding: 0 2rem 0 5rem;
}

.staggered-gallery .block .left h1 {
  line-height: 2.4rem;
  text-align: center;
}

.staggered-gallery .block .left .quote {
  color: #ff0000;
  line-height: 1.4;
}

.staggered-gallery .block .left .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}

.staggered-gallery .block .left img {
  width: 100%;
  height: 32rem;
  object-fit: contain;
}

.staggered-gallery .block .right {
  width: 50%;
  padding: 15rem 5rem 0 5rem;
}

.staggered-gallery .block .right .quote {
  color: #ff0000;
  line-height: 1.4;
}

.staggered-gallery .block .right h1 {
  line-height: 2.4rem;
  text-align: center;
}

.staggered-gallery .block .right .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}

.staggered-gallery .block .right img {
  width: 100%;
  height: 32rem;
  object-fit: contain;
}

/* container 6 */
.image-banner2 {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: url("./assets/header_1.jpg") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.image-banner2 .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  z-index: 1;
}

.image-banner2 .content {
  position: relative;
  height: 100%;
  z-index: 2;
  color: #fff;
  padding: 2rem;
  display: flex;
}

.image-banner2 .content .description {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: end;
}

.image-banner2 .content .description > p {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 8rem 8rem;
}

.image-banner2 .content div {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: end;
  padding-top: 4rem;
  padding-right: 4rem;
}

.image-banner2 .content div img {
  width: 23%;
}

/* container 7 */
.step-list {
  width: 100%;
  display: flex;
  align-items: start;
  background-color: #ffffff;
  padding-top: 5rem;
  z-index: 100;
  flex-wrap: wrap;
}

.step-list .title {
  width: 100%;
  text-align: center;
  padding: 2rem;
}

.step-list .block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 0  5rem
}

.step-list .block-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 5rem;
}

.step-list .block .title-box {
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 1rem;
  width: 100%;
  justify-content: center;
  padding:  2rem 0;
}

.step-list .block .title-box .description {
  color: #867560;
  font-size: 1.1rem;
  min-height: 1.3rem;
}
.step-list .block-box .content  .description {
  color: #867560;
  line-height: 200%;
  padding-top: 2rem;
  font-size: 1.1rem;
}

.step-list .block img  {
  width: 100%;  
  height: 38rem;
  object-fit: cover;
}
  

.step-list .block .content {
  width: 40%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-list .block-box .content {
  width: 40%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-list .block .content h1 {
  line-height: 2.4rem;
}

.step-list .block .content .quote {
  color: #ff0000;
  line-height: 1.4;
}

.step-list .block .content .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}

.step-list .block .content .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}


/* container 7.1 price */
.price-section {
  z-index: 100;
  width: 100%;
  display: flex;
  align-items: start;
  background-color: #ffffff;
  padding-top: 5rem;
  z-index: 100;
  flex-wrap: wrap;
}

.price-section .price-tile {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.price-section .block {
  display: flex;
  flex-direction: row;
  gap: 10rem;
  width: 100%;
  padding: 6rem;
}

.price-section .block .box {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.price-section .block .box img {
  min-height: 20rem;
  width: 100%;
  object-fit: cover;
}

.price-section .block .box .price-content {
  display: flex;
  flex-direction: row;
  padding:  1rem 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.price-section .block .box .price-content p {
  font-size: 2rem;
}

.price-section .block .box .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 2rem;
}

.price-section .block .box .price-content .button-box {
  padding: 1rem 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #000000;
  font-size: 1.5rem;
  line-height: 1.75rem;
}

.price-section-note {
  text-align: right;
  color: red;
  font-size: 1.5rem;
}

/* container 7.1 comment*/
.comment-section {
  z-index: 100;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding-top: 5rem;
  flex-wrap: wrap;
}

.comment-section .comment-tile {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.comment-section .block {
  display: flex;
  width: 55%;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 0 6rem 6rem 6rem;
}

.comment-section .block .box {
  display: flex;
  align-items: start;
  flex-direction: column;
}

.comment-section .block .box .description {
  color: #867560;
  line-height: 1.5rem;
  font-size: 1.1rem;
}

/* container 8 */
.image-banner3 {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: url("./assets/header_3.jpg") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.image-banner3 .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  z-index: 1;
}

.image-banner3 .content {
  position: relative;
  height: 100%;
  z-index: 2;
  color: #fff;
  display: flex;
}

.image-banner3 .content .description {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: end;
}

.image-banner3 .content .description > p {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 2rem 8rem;
}

.image-banner3 .content .block-img {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: end;
  padding-top: 2rem;
  padding-right: 4rem;
}

.image-banner3 .content .block-img img {
  width: 40%;
}

/* container 9  */
.image-text-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  padding-top: 10rem;
  z-index: 100;
} 

.image-text-section .title {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.image-text-section .block {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem;
}

.image-text-section .block .description {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.6rem;
}

.image-text-section .block .description.hidden {
  visibility: hidden;
}

.image-text-section .block .block-image {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 90%;
}

.image-text-section .block .block-image img {
  width: 100%;
  height: 38rem;
  object-fit: cover;
}

.image-text-section .block .content {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.image-text-section .block .content h1 {
  line-height: 2.4rem;
}

.image-text-section .block .content .quote {
  color: #ff0000;
  line-height: 1.4;
}

.image-text-section .block .content .content-description {
  color: rgb(134, 117, 96);
  line-height: 200%;
  font-size: 1.1rem;
  padding-top: 0.5rem;
}

/* container 11  */
.image-section {
  width: 100%;
  display: flex;
  align-items: start;
  background-color: #ffffff;
  padding-top: 5rem;
  z-index: 100;
  flex-wrap: wrap;
}

.image-section .title {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.image-section .block .box p {
  font-size: 1.5rem;
  text-align: center;
}

.image-section .box img {
  height: 20rem;
  object-fit: cover;
  width: 100%;
}

.image-section .block {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
  padding: 0 6rem ;
}
.image-section .block .arrow-box-down {
  display: none;
}

.image-section .block-full {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
  padding: 0 6rem ;
}

.image-section .block-full .box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2rem;
  flex: 1
}
.image-section .block-full .arrow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
}


.image-section  .block-full .box .image-arrow {
  height: 80px;
  width: 80px;
  object-fit: cover;
}

.image-section  .block-full .arrow-box-down {
  flex:1;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-section .block .arrow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
}

.image-section .block .box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2rem;
  flex: 1
}

.image-section .block .box .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-arrow {
  height: 80px;
  width: 80px;
  object-fit: cover;
}

.image-section .block .box .content h1 {
  line-height: 2.4rem;
}

.image-section .block .box .content .quote {
  color: #ff0000;
  line-height: 1.4;
}

.image-section .block .box .content .description {
  color: #867560;
  line-height: 200%;
  font-size: 1.1rem;
}

/* footer */
.footer-container {
  width: 100%;
  display: flex;
  align-items: start;
  background-color: #1a1a1a;
  color: white;
  padding-top: 5rem;
  z-index: 100;
  flex-direction: column;
}

.footer-branding {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  align-items: center;
}
.footer-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("./assets/footer.png") no-repeat center center;
  background-size: cover;
}

.footer-bg .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 1) 5%,
    rgba(26, 26, 26, 0.9) 15%,
    rgba(26, 26, 26, 0) 50%
  );
  pointer-events: none;
}

.footer-container .info {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.footer-container .info .content {
  width: 50%;
  display: flex;
  padding-left: 8%;
}

.footer-container .info .content .column {
  flex: 1;
  padding-left: 2rem;
}

.footer-container .info .content .column .leather-type {
  margin-bottom: 1.5rem;
}

.footer-container .info .content .column .leather-type h3 {
  margin: 0;
  font-weight: normal;
  font-size: 1.5rem;
}

.footer-container .info .content .column .leather-type p {
  margin: 0.3rem 0 0 0;
  font-size: 1rem;
  opacity: 0.8;
  color: #867560;
}

.info-section p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.info-section a {
  color: white;
}

.info-section .label {
  display: inline-block;
  width: 8em;
}

/* Existing styles remain unchanged above this point */

/* Responsive Styles */
@media (max-width: 768px) {
  /* General adjustments */
  body,
  p {
    overflow-x: hidden;
  }

  .pt-2 {
    padding-top: 1rem;
  }
  .pt-4 {
    padding-top: 2rem;
  }
  .pt-6 {
    padding-top: 2rem;
  }
  .pt-8 {
    padding-top: 2rem;
  }

  .mr-1 {
    margin-right: 0.5rem;
  }
  .mr-2 {
    margin-right: 1rem;
  }
  .mr-3 {
    margin-right: 1.5rem;
  }

  .w-40 {
    width: 100%;
  }
  .w-56rem {
    width: 100% !important;
  }
  .w-70vw {
    width: 90vw !important;
  }
  .w-full {
    width: 100%;
  }

  .text-xs {
    font-size: 0.65rem;
  }
  .text-sm {
    font-size: 0.8rem;
  }
  .text-base {
    font-size: 0.9rem;
  }
  .text-lg {
    font-size: 1rem;
  }
  .text-xl {
    font-size: 1.1rem;
  }

  hr {
    width: 80%;
  }

  .divider {
    height: 3rem;
    background-color: white;
  }

  .text-step {
    font-size: 2rem;
  }

  .hero-section {
    height: 260vh;
  }

  .centered-text img {
    width: 14rem;
  }

  .centered-text p {
    font-size: 1.2rem;
  }

  .japanese-text p {
    line-height: 2.5rem;
  }

  .button_scroll {
    height: 80px;
    width: 80px;
    padding-right: 2px;
  }

  .text1,
  .text2 {
    width: 100%;
    height: auto;
    padding: 1rem;
    flex-direction: column;
  }

  .vertical-text-container {
    font-size: 1.5rem;
  }

  .horizontal-text {
    font-size: 0.9rem;
  }

  /* Commitment Section */
  .commitment .block {
    gap: 1rem;
    width: 100%;
    padding: 2rem;
  }
  
  .commitment .block .box {
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
    text-align: center;
    height: auto;
    font-size: 1.5rem;
  }
  
  .commitment .block .box-container {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    width: 100%;
    justify-content: end;
    gap: 0.5rem;
  }
  
  .commitment .block .box-container .box {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: 1rem;
    width: 50%;
    align-items: start;
    justify-content: start;
    gap: 0.5rem;
  }

  .commitment .block img {
    width: 100%;
    max-width: 15rem;
  }

  .commitment .content {
    flex-direction: column;
    gap: 2rem;
  }

  .commitment .content .parallax-container {
    width: 100%;
    height: 50vh;
  }

  .commitment .content .parallax-content {
    padding: 1.4rem;
  }

  .commitment .content .parallax-container .parallax1 {
    position: relative;
    top: 0;
    left: 0;
    width: 85%;
    object-fit: cover;
    transform: translateZ(0);
    will-change: transform;
  }

  /* Image Gallery */
  .image-gallery {
    position: relative;
    top: 0;
    height: 45vh;
    background: white;
    width: 100%;
  }

  .image-gallery .image1 {
    position: absolute;
    top: 30%;
    z-index: 1;
    left: 10%;
    right: auto;
    transform: none;
    width: 80%;
  }

  .image-gallery .image2 {
    position: absolute;
    z-index: 2;
    top: 5%;
    left: 4%;
    right: auto;
    transform: none;
    width: 60%;
    margin: 1rem 0;
  }

  .image-gallery .image3 {
    position: absolute;
    z-index: 0;
    top: 16%;
    left: auto;
    right: 4%;
    transform: none;
    width: 30%;
    margin: 1rem 0;
  }

  .image-gallery .image4 {
    position: absolute;
    z-index: 2;
    top: 70%;
    left: auto;
    right: 5%;
    transform: none;
    width: 60%;
    margin: 1rem 0;
  }

  /* Image Banner 1, 2, 3 */
  .image-banner1 .content,
  .image-banner2 .content,
  .image-banner3 .content {
    flex-direction: column-reverse;
    padding: 1rem;
  }

  .image-banner1 .content .description,
  .image-banner2 .content .description,
  .image-banner3 .content .description {
    width: 100%;
    align-items: center;
  }

  .image-banner1 .content .description > p,
  .image-banner2 .content .description > p,
  .image-banner3 .content .description > p {
    font-size: 1.5rem;
    margin: 0 0 2rem 0;
    text-align: center;
  }

  .image-banner1 .content div,
  .image-banner2 .content div,
  .image-banner3 .content .block-img {
    width: 100%;
    justify-content: center;
    padding: 1rem 0;
    overflow: hidden;
  }

  .image-banner1 .content div img,
  .image-banner3 .content .block-img img {
    width: 70%;
    height: 100%;
  }

  .image-banner2 .content div img {
    width: 42%;
    height: 100%;
  }

  /* Staggered Gallery */
  .staggered-gallery .block {
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .staggered-gallery .block .left,
  .staggered-gallery .block .right {
    width: 100%;
    padding: 0 0 6rem 0;
  }

  .staggered-gallery .block .left img,
  .staggered-gallery .block .right img {
    height: 20rem;
  }

  /* Step List */
  .step-list .block {
    flex-direction: column;
    padding: 0 0 4rem 0;
    width: 90%;
    margin: auto;
  }
  .step-list .block-box {
    flex-direction: column-reverse;
    gap: 2rem;
    padding: 0 0 4rem 0;
    width: 90%;
    margin: auto;
  }

  .step-list .block .w-40 {
    width: 100%;
    order: 1;
    padding: 0;
  }

  .step-list .block .content {
    width: 100%;
    order: 2;
    padding: 0;
  }

  .step-list .block-box  .content{
    width: 100%;
    order: 2;
    padding: 0;
  }

  .step-list .block img {
    height: 12rem;
    object-fit: contain;
  }

  /* Image Text Section */
  .image-text-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    z-index: 100;
  }

  .image-text-section .block {
    flex-direction: row;
    padding: 0 0 2rem 0rem;
    width: 90%;
    margin: auto;
  }

  .image-text-section .block .description {
    width: 18%;
    font-size: 3rem;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: justify;
    letter-spacing: 0.2rem;
  }

  .image-text-section .block .block-image {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .image-text-section .block .block-image img {
    width: 100% !important;
    height: auto;
  }

  .image-text-section .block .content {
    width: 100%;
    padding: 0rem;
    text-align: justify;
  }

  /* Footer */
  .footer-container .info {
    flex-direction: column;
  }

  .footer-container .info .content {
    width: 100%;
    padding: 1rem;
  }

  .footer-container .info .content .column {
    padding: 1rem;
  }

  .footer-social {
    flex-direction: column;
    gap: 1rem;
  }

  .comment-section .block {
    padding: 2rem;
    width: 100%;
  }

  /* Price Section */
  .price-section .block {
    padding: 2rem;
    flex-wrap: wrap;
  }

  .price-section .block .box img {
    min-height: 14rem;
    object-fit: contain;
  }

  .price-section-note {
    font-size: 0.875rem;
  }
  
  /* container 11  */
  .image-section .block {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    width: 100%;
    padding: 0 2rem ;
  }

  .image-section .block.block-revert {
    flex-direction: column-reverse;
  }

  .image-section .block .arrow-box {
    display: none;
  }
  .image-section .block .arrow-box-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
  }
  .image-section .block-full .box {
    display: none;
  }
  .image-section .block-full .arrow-box {
    display: none;
  }

  .info-section p {
    margin: 0.5rem 0;
    font-size: 1rem;
  }
  
  .info-section a {
    color: white;
  }
  
  .info-section .label {
    display: inline-block;
    width: 4rem;
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 480px) {
  * {
    overflow-x: hidden;
  }
  .text-step {
    font-size: 1rem;
  }

  .step-list .block .title-box .description {
    font-size: 0.9rem;
    min-height: 1rem;
  }


  .step-list .block img {
    height: 12rem;
    object-fit: contain;
  }

  .hero-section .block1 .centered-text .quote {
    font-size: 1rem;
  }

  .vertical-text-container {
    font-size: 1.2rem;
  }
  .commitment .block {
    width: 100%;
    padding: 2rem;
  }

  .comment-section .block {
    padding: 1rem;
    width: 100%;
  }
  
  .image-banner1 .content .description > p,
  .image-banner2 .content .description > p,
  .image-banner3 .content .description > p {
    font-size: 1.2rem;
  }

  .staggered-gallery .block .left .description,
  .staggered-gallery .block .right .description {
    font-size: 0.9rem;
  }

  .step-list .block .content .description {
    font-size: 0.9rem;
  }

  .step-list .block-box .content .description {
    font-size: 0.9rem;
  }
  
  .image-text-section .block .description {
    font-size: 2rem;
  }

  .footer-container .info .content .column .leather-type h3 {
    font-size: 1.2rem;
  }

  .footer-container .info .content .column .leather-type p {
    font-size: 0.9rem;
  }

  .price-section .price-tile {
    width: 100%;
    padding: 2rem;
    text-align: center;
    font-size: 1.5rem;
  }

  .price-section .block .box .price-content p {
    font-size: 1.25rem;
  }

  .price-section .block .box .price-content .button-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 3rem; 
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid gray;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .comment-section .comment-tile {
    font-size: 1.5rem;
  }

  .image-text-section .title {
    font-size: 1.5rem;
  }

  .step-list .title {
    font-size: 1.5rem;
  }

  .image-text-section .block .content .content-description {
    font-size: 0.9rem;
  }

  .commitment .block h1 {
    font-size: 1.5rem;
    text-align: center;
  }

  .commitment .block .box{
    font-size: 0.9rem;
  }

  .commitment .block .box-container .box {
    font-size: 0.9rem;
  }

  .price-section .block .box .description {
    font-size: 0.9rem;
  }

  .comment-section .block .box {
    font-size: 0.9rem;
  }

  .comment-section .block .box .description {
    font-size: 0.9rem;
  }
}