body{
	padding: 0;
	margin: 0;
	 cursor: none;
   background: var(--washi-cream-light);
}

::selection {
  background: var(--torii-red);
  color: var(--washi-cream-light);
}

a{
	text-decoration: none;
	color: inherit;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* Page Transition */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--washi-cream-light); /* your color */
  z-index: 9999;
  transform: translateY(0); /* fully covered at start */
  transition: transform 0.6s ease;
}

.page-transition.hide {
  transform: translateY(100%);
}

/* Slide-up animation class */
.slide-up {
  transform: translateY(-130%);
}

@media screen and (max-width: 991px) {
  .logo-wrapper svg{
    width: 150px;
  }
}

/* Fixed BG */
.fixed-background-cta{
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/cta-bg.jpg');
}


/* Line Divider */

hr.divider-washi-cream-dark{
  background: var(--washi-cream-dark);
  height: 2px;
  margin: 0 80px;
  border: 0;
}

@media screen and (max-width: 992px) {
  hr.divider-washi-cream-dark{
    margin: 0 20px;
  }
}

/* Custom cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background-color: #BC002D;
  color: white;
  font-size: 16px;
  font-family: "Inter", sans-serif !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.15s ease, background-color 0.3s ease, width 0.3s, height 0.3s;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  user-select: none;
}

/* For "Go" state */
.custom-cursor.cursor-go {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* For "View" state */
.custom-cursor.cursor-view {
  width: 72px;
  height: 72px;
  font-size: 18px;
}

@media screen and (max-width: 992px) {
	.custom-cursor{
		display: none;
	}
}

@media (hover: none) and (pointer: coarse) {
  * {
    cursor: default !important; /* atau 'auto' */
  }
}


/* Font Components */
h1 {
  font-family: "Buda", serif !important;
  font-size: 56px !important;
  font-weight: 300 !important;
  line-height: 100% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
}

h2 {
  font-family: "Buda", serif !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  line-height: 100% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
}

h3 {
  font-family: "Buda", serif !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  line-height: 100% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
}

h4 {
  font-family: "Buda", serif !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 100% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
}

h5 {
  font-family: "Buda", serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 100% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

p {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

p.small {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

p.text-lead {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 140% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

p.bold{
  font-weight: 700 !important;
}

p span.text-lead {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 140% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tag{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.tag p{
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.red-circle{
	aspect-ratio: 1/1;
	width: 12px;
	height: 12px;
	border-radius: 99px;
	background: var(--torii-red);
}


@media screen and (max-width: 992px) {
  h1 {
    font-family: "Buda", serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
  }

  h2 {
    font-family: "Buda", serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
  }

  h3 {
    font-family: "Buda", serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
  }

  h4 {
    font-family: "Buda", serif !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
  }

  h5 {
    font-family: "Buda", serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 100% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  p {
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  p.small {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  p.text-lead {
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 140% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  p span.text-lead {
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 140% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tag{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .tag p{
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    font-style: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .red-circle{
    aspect-ratio: 1/1;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--torii-red);
  }
}

/* Image Reveal */

.image-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-reveal img {
  display: block;
  width: 100%;
  height: auto;
}

.reveal-overlay {
  position: absolute;
  inset: 0;
  background: var(--washi-cream-dark); /* color block */
  transform: translateX(0);
  transition: transform 1s ease-in-out;
  z-index: 2;
}

/* When active, slide the overlay out to the right */
.image-reveal.active .reveal-overlay {
  transform: translateX(-100%);
}

/* Color Components */
:root {
  --white: #ffffff;
  --thin-grey: #DCDCDC;
  --light-grey: #E7E7E7;
  --bold-grey: #434343;
  --dark-grey: #393939;
  --black: #000000;
  --washi-cream-light: #FCEFDE;
  --washi-cream-dark: #EEDFCC;
  --deep-aizome-blue-light: #284366;
  --deep-aizome-blue: #213855;
  --deep-aizome-blue-dark: #1B2D44;
  --torii-red-light: #E51849;
  --torii-red: #BC002D;
  --torii-red-dark: #A10027;
}

/* Button Components */
.btn-washi-cream{
  position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 10px 12px 28px;
	font-size: 16px;
  font-family: "Inter", sans-serif !important;
  color: var(--deep-aizome-blue-dark);
  background: var(--washi-cream-light);
  transition: all ease-out 0.3s;
}

.btn-washi-cream a{
  display: flex;
  gap: 8px;
  z-index: 5;
  transition: all ease-out 0.3s;
}

.btn-washi-cream svg{
  opacity: 0;
  transition: all ease-out 0.3s;
}

.btn-washi-cream:hover a{
  color: var(--washi-cream-light);
}

.btn-washi-cream:hover svg{
  transform: rotate(45deg);
  opacity: 1;
}

.btn-washi-cream:hover svg path{
  fill: var(--washi-cream-light);
}

.btn-washi-cream::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--torii-red);
  transition: 0.3s;
  z-index: -1;
}

.btn-washi-cream:hover::before{
  width: 100%;
  z-index: 5;
}

.btn-washi-cream:hover{
	padding: 12px 24px 12px 28px;
}

/* Link Button Components */

/* Link White */
a.link-button-white{
  position: relative;
  cursor: pointer;
}

a.link-button-white::after{
  margin-top: 4px;
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: var(--white);
  top: 100%;
  right: 0;
  border-radius: 3px;
  transition: 0.3s width;
}

a.link-button-white:hover::after{
  width: 100%;
  right: unset;
  left: 0;
}

/* Link Black */
a.link-button-black{
  position: relative;
  cursor: pointer;
}

a.link-button-black::after{
  margin-top: 4px;
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: var(--black);
  top: 100%;
  right: 0;
  border-radius: 3px;
  transition: 0.3s width;
}

a.link-button-black:hover::after{
  width: 100%;
  right: unset;
  left: 0;
}


/* Container Components */
.container-s{
	padding: 80px 80px 80px 80px;
}

.container-m{
	padding: 120px 80px 120px 80px;
}

.container-m-ornament{
	padding: 120px 80px 240px 80px;
}

.container-l{
	padding: 240px 80px 240px 80px;
}

.wrapper{
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: center;
}

@media screen and (max-width: 992px) {
	.container-s{
		padding: 48px 20px;
	}

	.container-m{
		padding: 64px 20px;
	}

	.container-m-ornament{
		padding: 64px 20px 120px 20px;
	}

	.container-l{
		padding: 120px 20px;
	}
}

/* Headline Components */

/* Headline v1 */
.headline-tag-title-desc-vertical-center{
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-align: center;
	width: 75%;
	align-items: center;
}


.headline-tag-title-desc-vertical-left{
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
  width: 75%;
  align-items: left;
}

/* Headline v2 */
.headline-title-desc-horizontal{
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 120px;
}

/* Headline v3 */
.headline-tag-title-horizontal{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.headline-tag-title-horizontal .tag{
	width: 25%;
}

.headline-tag-title-horizontal h3{
	width: 75%;
}

/* Headline v4 */
.headline-tag-title-desc-horizontal{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.headline-tag-title-desc-horizontal .title{
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 45%;
}

.headline-tag-title-desc-horizontal p{
	width: 45%;
}

/* Headline v5 */
.headline-tag-title-vertical{
	width: 100%;
	display: flex;
	flex-direction: column;
}

.headline-tag-title-vertical .title{	
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 45%;
}

/* Headline v6 */
.headline-title-desc-vertical{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;

}

/* Headline v7 */
.headline-tag-title-button-vertical-center{
	width: 100%;
	display: flex;
	flex-direction: column;
}


@media screen and (max-width: 992px) {
  /* Headline v1 */
  .headline-tag-title-desc-vertical-center{
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    width: 100%;
    align-items: center;
  }


  .headline-tag-title-desc-vertical-left{
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
    width: 100%;
    align-items: left;
  }

  /* Headline v2 */
  .headline-title-desc-horizontal{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 120px;
  }

  /* Headline v3 */
  .headline-tag-title-horizontal{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .headline-tag-title-horizontal .tag{
    width: 100%;
  }

  .headline-tag-title-horizontal h3{
    width: 100%;
  }

  /* Headline v4 */
  .headline-tag-title-desc-horizontal{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
  }

  .headline-tag-title-desc-horizontal .title{
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  .headline-tag-title-desc-horizontal p{
    width: 100%;
  }

  /* Headline v5 */
  .headline-tag-title-vertical{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .headline-tag-title-vertical .title{  
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  /* Headline v6 */
  .headline-title-desc-vertical{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;

  }

  /* Headline v7 */
  .headline-tag-title-button-vertical-center{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

}


/* Content Components */
.content{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.content-list{
	display: flex;
	flex-direction: column;
	gap: 12px;
}


/* Image Components */
.image-gallery{
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.image-wrapper-4-3{
	width: 33.3%;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.image-wrapper-4-3 img{
	width: 100%;
}

.image-wrapper-1-1{
	width: 45%;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.image-wrapper-1-1 img{
	height: 100%;
}

.image-wrapper-6{
  width: 50%;
}

.image-wrapper-6 img{
  width: 100%;
}


@media screen and (max-width: 992px) {
  .image-gallery{
    flex-direction: column;
  }

  .image-wrapper-4-3, .image-wrapper-1-1, .image-wrapper-6{
    width: 100%;
  }

  .image-wrapper-4-3 img, .image-wrapper-1-1 img, .image-wrapper-6 img{
    width: 100%;
  }

  .image-wrapper-1-1{
    overflow: hidden;
  }
}


/* Header Components */

ul.header__nav{
  margin-bottom: 0;
}

span.sr-only{
  display: none;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent;
  z-index: 9999;
  transition: background-color 400ms, 400ms ease;
}

.header.scrolled {
  background-color: var(--washi-cream-light);
  transition: background-color 400ms, 400ms ease;
}


.header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 75px;
  margin: 0 auto;
  transition: all ease-out 0.3s;
}

.scrolled .header__wrapper{
  padding: 20px 80px;
}

.header__logo {
  display: flex;
  align-items: center;
  position: relative;
}

.header__logo img {
  object-fit: contain;
  height: 64px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 5%;
  left: 0;
  transform: translate(0, -50%);
  transition: opacity 400ms, 400ms ease;
}

.scrolled .header__logo img.color,
.header__logo img.white,
.drawer-open .header__logo img.color {
  opacity: 1;
  visibility: visible;
}

.scrolled .header__logo img.white,
.drawer-open .header__logo img.white {
  opacity: 0;
  visibility: hidden;
}

.header__toggle {
  display: none;
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 9999;
  background: none;
  border: none;
}

.header__toggle .close,
.header__toggle .open {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.header__toggle svg {
  width: 24px;
  height: 24px;
}

.header__toggle .open,
.header__toggle[aria-expanded=true] .close {
  opacity: 1;
}

.header__toggle[aria-expanded=true] .open {
  opacity: 0;
}

.header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav {
  position: relative;  
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: stretch;
    flex-wrap: wrap;
    align-items: stretch;

}

.nav[data-visible=true] {
  transform: translate(0);
}

.nav__item {
  margin: 0 10px;
  position: relative;
}

.nav__item--mobile {
  display: none;
}

.nav__link {
  color: var(--washi-cream-light);
  text-decoration: none;
  font-size: 18px;
  line-height: 24px;
  transition: color 400ms, 400ms ease;
  position: relative;
}

.nav__link::after{
  margin-top: 4px;
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: var(--white);
  top: 100%;
  right: 0;
  border-radius: 3px;
  transition: 0.3s width;
}

.nav__link:hover::after{
  width: 100%;
  right: unset;
  left: 0;
}

.scrolled .nav__link,
.nav__submenu .nav__link {
  color: var(--black);
}

.scrolled .nav__link::after{
  background: var(--black);
}

.nav__link--cta {
  position: relative;
  display: flex;
  gap: 8px;
  background-color: transparent;
  color: var(--washi-cream-light);
  border: 1px solid var(--washi-cream-light);
  font-size: 18px;
  line-height: 23.4px;
  padding: 12px 10px 12px 28px;
  transition: background-color 400ms, 400ms ease;
  font-family: "Inter", sans-serif !important;
}

.nav__link--cta::after{
  height: 0 !important;
}

.nav__link--cta span{
  z-index: 5;
}

.nav__link--cta::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--torii-red);
  transition: 0.3s;
  z-index: -1;
}

.nav__link--cta:hover::before{
  width: 100%;
  z-index: 4;
}

.nav__link--cta img{
  transform: rotate(0);
  transition: all ease-out 0.3s;
}

.nav__link--cta:hover img{
  z-index: 5;
  opacity: 1;
  transform: rotate(45deg);
}

.scrolled .nav__link--cta,
.drawer-open .nav__link--cta {
  transition: all ease-out 0.3s;
  color: var(--washi-cream-light);
  background-color: var(--deep-aizome-blue-light);
  border-color: var(--deep-aizome-blue-light);
}

.nav__link--cta:hover {
  border-color: var(--torii-red);
  transition: background-color 400ms, 400ms ease;
  padding: 12px 28px;
  gap: 8px;
}

.nav__link--cta svg {
  width: 24px;
  height: 24px;
}

.nav__link--cta img{
  opacity: 0;
}

/* Submenu */
.nav__submenu-wrapper {
  /*top: 90px;*/
  opacity: 0;
  visibility: hidden;
  position: fixed;
  transition: all .3s ease-in-out;
}

.nav__item-has-submenu {
  position: relative;
  margin-right: 0 !important;
}

.nav__item-has-submenu.active .nav__submenu-wrapper {
  opacity: 1;
  visibility: visible;
  transition: all .3s ease-in-out;
}

.nav__link-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nav__icon {
  padding-top: 4px;
  pointer-events: none;
  background: none;
  border: none;
}

.nav__icon svg {
  position: relative;
  transform: rotate(0deg);
  transition: transform .3s ease-in-out;
  line-height: 0;
  width: 24px;
  height: 24px;
}

.nav__submenu-toggle svg path {
  fill: var(--washi-cream-light);
}

.scrolled .nav__submenu-toggle svg path,
.drawer-open .nav__submenu-toggle svg path {
  fill: var(--black);
}

.nav__item-has-submenu:hover .nav__icon svg,
.nav__item-has-submenu.active .nav__icon svg {
  transform: rotate(180deg);
}

.nav__submenu {
  margin-top: 18px;
  background-color: var(--washi-cream-light);
  padding: 20px 20px;
}

.nav__item-sub {
  margin: 0;
  padding: 8px 18px;
}

@media screen and (max-width: 991px) {

  .scrolled .header__wrapper{
    padding: 20px;
  }

  .header__wrapper {
    padding: 20px;
  }

  .header__logo {
    position: relative;
    z-index: 999;
  }

  .header__logo img {
    height: 54px;
  }

  .header__toggle {
    display: block;
  }

  .header__toggle .open svg path {
    fill: var(--white);
  }

  .scrolled .header__toggle .open svg path {
    fill: var(--black);
  }

  .header__nav {
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }

  ul.header__nav {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .header__nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 2px;
    background-color: var(--washi-cream-dark);
  }

  .nav {
    position: absolute;
    background-color: var(--washi-cream-light);
    height: 100vh;
    transform: translate(100%);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: transform .3s ease-in-out;
    padding: 72px 20px;
    overflow: hidden;
  }

  .nav__link {
    font-size: 18px;
    color: var(--black);
  }

  .nav__link--cta{
    margin: 24px 0;
    font-size: 14px;
  }

  .nav__item-sub .nav__link {
    font-size: 20px;
  }

  .nav--cta {
    display: none;
  }

  .nav__item {
    margin: 10px 0 !important;
  }

  .nav__item-sub{
    padding: 4px 12px !important;
  }

  .nav__item-has-submenu {
    margin: 10px 0 -10px;
    width: 100%;
  }

  .nav__item .nav__item-has-submenu:active{
    margin: 10px 0 !important;
  }

  .open .nav__item-has-submenu{
    margin: 10px 0 !important;
  }

  .nav__item--mobile {
    display: block;
  }

  #open-modal{
    margin: 0 !important;
  }

  .nav__submenu-wrapper {
    position: relative;
    height: 0;
  }

  .nav__icon {
    position: absolute;
    pointer-events: visible;
    right: 0;
    width: 40px;
    height: 40px;
  }

  .nav__submenu {
    background-color: var(--washi-cream-light);
    padding: 0 12px;

  }
}

@media screen and (min-width: 992px) {
  .nav__item-has-submenu:hover .nav__submenu-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-in-out;
  }
}

/* Hero Components */
.hero{
	z-index: -1;
	width: 100%;
	position: fixed;
	background: url('img/background.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	color: var(--washi-cream-light);
	display: flex;
	justify-content: center;
  padding: 28vh 0 0 0;
}

.hero .wrapper{
	gap: 10px !important;
}

.hero h1{
	font-size: 200px !important;
	text-transform: capitalize;
}

.hero p{
	font-size: 32px !important;
}

@media (max-width: 1290px){
  .foreground-image img{
    margin: 64px 0 0 0 !important;
  }
}

@media (max-width: 1440px){
  .foreground-image img{
    margin: 40px 0 0 0 !important;
  }
}

@media (max-width: 1920px) {
  .foreground-image img{
    margin: -100px 0 0 0;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero{
    padding: 25vh 0 0 0 !important;
  }

  .custom-cursor{
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .custom-cursor{
    display: none;
  }

  .foreground-image img{
    margin: 300px 0 0 0 !important;
  }
}

/* Hero Color */
.hero-color{
  padding: 140px 80px 80px 80px;
  background: var(--deep-aizome-blue-dark);
  color: var(--washi-cream-light);
  height: 50vh;
  position: relative;
  z-index: 30;
}

.hero-color .wrapper{
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
}

.hero-color .breadcrumbs{
  display: flex;
  gap: 12px;
  color: var(--washi-cream-light);
  align-items: center;
}

.hero-color .breadcrumbs a{
  text-decoration: none;
  color: var(--washi-cream-light);
  display: flex;
  gap: 8px;
}

.hero-color .breadcrumbs .divider-arrow img{
  width: 12px;
  transform: rotate(90deg);
}


@media screen and (max-width: 992px) {
  .hero-color{
    padding: 110px 20px 64px 20px;
  }
}

/* Hero Color Service */
.hero-color-service{
  padding: 140px 80px 80px 80px;
  background: var(--deep-aizome-blue-dark);
  color: var(--washi-cream-light);
  overflow: visible;
}

.hero-color-service .wrapper{
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 140px;
  margin-bottom: 360px;
}

.hero-color-service .breadcrumbs{
  display: flex;
  gap: 12px;
  color: var(--washi-cream-light);
  align-items: center;
}

.hero-color-service .breadcrumbs a{
  text-decoration: none;
  color: var(--washi-cream-light);
  display: flex;
  gap: 8px;
}

.hero-color-service .breadcrumbs .divider-arrow img{
  width: 12px;
  transform: rotate(90deg);
}

.image-banner{
  margin-top: -380px;
  padding: 0 80px;
}

.image-banner img{
  width: 100%;
}


@media screen and (max-width: 992px) {
  .hero-color-service{
    padding: 110px 20px 64px 20px;
  }
}

/* Hero Color Full Height*/
.hero-color-full-height{
  background: var(--deep-aizome-blue-dark);
  color: var(--washi-cream-light);
  height: 100vh;
}

.hero-color-full-height .wrapper{
  height: 100%;
  padding: 0 80px 0 80px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 30;
}

.hero-color-full-height .breadcrumbs{
  display: flex;
  gap: 12px;
  color: var(--washi-cream-light);
  align-items: center;
  margin-top: 140px;
}


.hero-color-full-height .headline-tag-title-desc-horizontal{
  margin-bottom: 80px;
}
.hero-color-full-height .breadcrumbs a{
  text-decoration: none;
  color: var(--washi-cream-light);
  display: flex;
  gap: 8px;
}

.hero-color-full-height .breadcrumbs .divider-arrow img{
  width: 12px;
  transform: rotate(90deg);
}


@media screen and (max-width: 992px) {
  .hero-color-full-height{
    padding: 110px 20px 64px 20px;
    height: 80vh;
  }

  .hero-color-full-height .wrapper{
    padding: 0 0;
  }

  .hero-color-full-height .breadcrumbs{
    margin-top: 0;
  }

  .hero-color-full-height .headline-tag-title-desc-horizontal{
    margin-bottom: 0;
    gap: 18px;
  }
}

/* Foreground Image Components */
.foreground-image{
	width: 100%;
	display: flex;
}

.foreground-image img{
	width: 100%;
}


@media screen and (max-width: 992px) {
  .hero{
    align-items: flex-start;
    padding: 35vh 0 0 0;
  }

  .foreground-image{
    display: flex;
    align-items: flex-end;
  }

  .foreground-image img{
    width: 100%;
    margin: 40vh 0 0 0 !important;
  }

  .hero h1{
    font-size: 92px !important;
  }

  .hero p{
    font-size: 18px !important;
  }
}

/* About Us Components */
.about-us{
	background: var(--deep-aizome-blue-dark);
	color: var(--washi-cream-light);
}

/* Our Story Components */
.our-story{
	background: var(--washi-cream-light);
	display: flex;
	flex-direction: column;
	gap: 64px;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.our-story .wrapper{
	width: 100%;
}

.our-story .ornament{
	bottom: -140px;
	left: 0;
	width: 100%;
	position: absolute;
}

.our-story .ornament img{
	width: 100%;
}


@media screen and (max-width: 992px) {
  .our-story .ornament{
    bottom: -24px;
    left: unset;
    width: 150%;
  }
}

/* Vision Components */
.vision{
	background: var(--deep-aizome-blue);
	color: var(--washi-cream-light);
  position: relative;
  z-index: 30;
}

/* Mission Components */
.mission{
	background: var(--deep-aizome-blue-light);
	color: var(--washi-cream-light);
  position: relative;
  z-index: 30;
}

/* Services Components */
.services{
	background: var(--washi-cream-light);
}

.services .content{
	width: 100%;
}

.card-service{
	position: relative;
	aspect-ratio: 21/9;
	background-size: cover !important;
	background-position: center;
	padding: 0;
	overflow: hidden;
	background-repeat: no-repeat !important;
	color: var(--washi-cream-light);
	transition: all ease 0.5s;
	display: flex;
	flex-direction: column;
}

.card-service .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(27, 45, 68, 1); /* Your hover color */
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.card-service .card-detail{
	height: 100%;
	padding: 80px 80px 34px 80px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all ease-out 0.3s;
}

.card-service .ornament{
	height: 0;
	transition: all ease-out 400ms;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.card-service .icon{
	width: fit-content;
	transition: all ease-out 300ms;
}

.card-service .icon svg path{
	fill: var(--washi-cream-light);
}

.card-service .description{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.card-service .description p{
	opacity: 0;
	transition: all ease-out 300ms;
}

.card-service:hover .icon{
	transform: rotate(45deg);
}

.card-service:hover .description p{
	opacity: 1;
}

.card-service:hover .overlay {
  opacity: 1;
}

.card-service:hover .card-detail{
	z-index: 2;
}

.card-service:hover .ornament{
	height: 200px;
	margin-top: -150px;
	z-index: 1;
}


@media screen and (max-width: 992px) {
  .card-service{
    aspect-ratio: 4/5;
  }

  .card-service .card-detail{
    padding: 32px;
  }

  .card-service .description p{
    display: none;
  }

  .card-service:hover .description p{
    display: block;
  }
}

/* Case Scenario Components */
.case-scenario{
	background: var(--washi-cream-dark);
}

.case-wrapper{
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 48px;
}

.case-scenario .content{
	width: 100%;
	gap: 32px !important;
}

.case-scenario .content hr{
	width: 100%;
	margin: 0;
}

.card-info{
	width: 100%;
	display: flex;
	gap: 0;
	padding: 0;
	transition: all ease 0.3s;
	border-right: 1px solid rgba(27, 45, 68, 0.25);
}

.reversed{
	flex-direction: row-reverse;
	border-right: 0;
	border-left: 1px solid rgba(27, 45, 68, 0.25);
}

.reversed .detail{
	padding: 32px 32px 32px 32px !important;
}

.card-info .image-stack{
	width: 50%;
	aspect-ratio: 21/9;
	overflow: hidden;
}

.card-info .image-stack img{
	width: 100%;
	transition: all ease 1.5s;
}

.card-info .detail{
	padding: 32px 32px 32px 32px;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-info .detail .icon img{
	width: 32px;
	height: 32px;
}

.card-info .description{
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: all ease 0.3s;
}

.card-info:hover{
	background: var(--deep-aizome-blue);
}

.card-info:hover .description{
	color: var(--washi-cream-light);
}

.card-info:hover svg path{
	fill: var(--washi-cream-light);
}

.card-info:hover .image-stack img{
	transform: scale(1.2);
}



@media screen and (max-width: 992px) {
  .case-scenario .content{
    gap: 40px !important;
  }

  .card-info{
    flex-direction: column;
    border-left: 0;
    border-right: 0;
    gap: 20px;
    border-bottom: 1px solid rgba(27, 45, 68, 0.25);
    padding: 0 0 40px 0;
  }

  .card-info .image-stack, .card-info .detail{
    width: 100%;
  }

  .card-info .detail{
    padding: 0 !important;
    gap: 20px;
  }
}

/* Statistic Components */
.statistic{
	background: var(--washi-cream-light);
}

/* Testimonial Components */
.testimonial{
	background: var(--washi-cream-dark);
}


/* Executive Profile Components */
.executive-profile{
  background: var(--washi-cream-light);
  position: relative;
  overflow: hidden;
}

.executive-profile .wrapper{
  flex-direction: row;
}

.executive-profile .image-gallery{
  width: unset;
}

.executive-profile .image-gallery .image-wrapper-1-1{
  width: 100%;
}

.executive-profile .image-gallery .image-wrapper-1-1 img{
  width: 100%;
}

.executive-profile .ornament{
  bottom: -140px;
  left: 0;
  width: 100%;
  position: absolute;
}

.executive-profile .ornament img{
  width: 100%;
}


@media screen and (max-width: 992px) {
  .executive-profile .wrapper{
    flex-direction: column;
  }

  .executive-profile .image-gallery{
    width: 100%;
  }

  .executive-profile .image-gallery .image-wrapper{
    width: 100%;
  }

  .executive-profile .image-gallery .image-wrapper img{
    width: 100%;
  }
}

/* Call To Action Components */
.call-to-action{
	color: var(--washi-cream-light);
  position: relative;
  z-index: 30;
}

.cta-parallax {
  position: relative;
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%; /* larger for smooth movement */
  background: url('img/cta-bg.jpg') center / cover no-repeat;
  z-index: -1;
}

.call-to-action .wrapper {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  padding: 0 20px;
}

/* Footer Components */
footer{
	background: var(--deep-aizome-blue-dark) !important;
	color: var(--washi-cream-light);
	overflow: hidden;
	position: relative;
}

footer hr{
	width: 100%;
}

footer .wrapper{
  position: relative;
  z-index: 1;
}

.footer-top{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.footer-bottom{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

footer .list{
	width: 100%;
	display: flex;
}

footer .list #office{
	width: 75%;
}

footer .ornament{
	bottom: -180px;
	left: 0;
	width: 100%;
	position: absolute;
}

footer .ornament img{
	width: 100%;
}

.footer-information{
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 992px) {
	footer .logo img{
		width: 220px;
	}

	footer .list{
		flex-direction: column;
		gap: 32px;
	}

	footer .footer-bottom{
		flex-direction: column;
    gap: 12px;
	}

  footer .wrapper{
    gap: 32px;
  }

  footer .ornament{
    bottom: -64px;
    width: 160%;
    left: -10%;
  }
}



/* Contact Us Page - Contact Details Components */
.contact-detail{
  background: var(--washi-cream-light);
  position: relative;
  overflow: hidden;
}

.contact-list-wrapper{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.card-contact{
  position: relative;
  width: 33%;
  padding: 24px 28px;
  aspect-ratio: 16/9;
  background: var(--washi-cream-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all ease-out 0.3s;
  overflow: hidden;
}

.card-contact::before{
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--deep-aizome-blue-dark);
  transition: all ease-out 0.3s;
  z-index: -1;
}

.card-contact:hover::before{
  bottom: 0;
  width: 100%;
  z-index: 5;
}

.card-contact svg{
  transition: all ease-out 0.5s;
  z-index: 6;
}

.card-contact .detail{
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 6;
}

.card-contact:hover{
  color: var(--washi-cream-light);
}

.card-contact:hover .icon{
  z-index: 7;
}

.card-contact:hover svg{
  transform: rotate(45deg);
  z-index: 7;
}

.card-contact:hover svg path{
  fill: var(--washi-cream-light);
  z-index: 7;
}

.contact-maps {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 21/9;
}

.contact-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


@media screen and (max-width: 992px) {
  .contact-list-wrapper{
    flex-direction: column;
    overflow: hidden;
  }

  .card-contact{
    width: 100%;
    padding: 32px 24px;
  }

  .card-contact p, .card-contact h5{
    width: 80%;
  }

  .contact-maps{
    aspect-ratio: 4/6;
  }

}


/* Information - Privacy Policy - Terms & Conditions */
.copy-detail{
  position: relative;
  background: var(--washi-cream-light);
  color: var(--deep-aizome-blue-dark);
  overflow: hidden;
}

.copy-detail .wrapper{
  padding: 80px 280px;
}

.copy-detail .text-wrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.copy-detail .ornament{
  bottom: -140px;
  left: 0;
  width: 100%;
  position: absolute;
}

.copy-detail .ornament img{
  width: 100%;
}

@media screen and (max-width: 992px) {
  .copy-detail .wrapper{
    padding: 0 0;
  }
}


/* Testimonial */

.testimonial{
  position: relative;
  overflow: hidden;
  background: var(--washi-cream-light);
  overflow: hidden;
}

.card-wrapper-left{
  display: flex;
  justify-content: flex-start;
}

.card-wrapper-right{
  display: flex;
  justify-content: flex-end;
}

.card-review{
  padding: 32px;
  width: 55%;
  background: var(--deep-aizome-blue-dark);
  color: var(--washi-cream-light);
  display: flex;
  gap: 32px;
  position: relative;
  overflow: hidden;
  z-index: 9;
}

.card-review .image-wrapper-1-1{
  aspect-ratio: 1/1 !important;
  height: 64px !important;
  width: 64px !important;
  background: var(--white);
  border-radius: 999px;
  z-index: 10;
}

.card-review .description{
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 64px;
  z-index: 10;
}

.card-review .reviewer-profile{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-review .ornament{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -200px !important;
  z-index: 0;
  transition: all ease-out 0.3s;
}

.card-review .ornament img{
  width: 100%;
}

.card-review:hover .ornament{
  bottom: -64px !important;
  z-index: 9;
}

.testimonial .ornament{
  bottom: -140px;
  left: 0;
  width: 100%;
  position: absolute;
}

.testimonial .ornament img{
  width: 100%;
}

@media screen and (max-width: 992px) {
  .testimonial .wrapper{
    gap: 20px;
  }

  .card-review{
    width: 100%;
    flex-direction: column;
  }

  .card-review .image-wrapper-1-1{
    overflow: hidden;
  }

  .card-review .description{
    width: 100%;
  }
}