/* j2.css | for j2theme styles, custom styles, and media queries */

html { 
  scroll-behavior: smooth; 
  -webkit-font-smoothing: antialiased; 
  moz-osx-font-smoothing: grayscale; 
}

* { 
  box-sizing: border-box;
}

body {
	/* min-height: 101vh; */
 font-size: var(--font18);
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

#wpadminbar {
	background: var(--tertiary) !important;
	/* outline: 2px solid var(--secondary) !important; */
}

/* Elementit */
.j2-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  background: var(--primary);
  color: var(--nav-text);
  border: 1px solid var(--black);
}

.j2-button-text {
  position: relative;
  display: inline-block;
  font-weight: 700;
}

.j2-button-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;

  background: currentColor;
  border-radius: 999px;

  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--nav-transition);
}

.j2-button:hover .j2-button-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.j2-button svg {
    transform: translateX(-2px);
}

/* arrow move constantly */
.j2-button:hover svg {
  animation: arrowMove 0.4s ease-in-out infinite alternate;
}

@keyframes arrowMove {
  from {
    transform: translateX(-2px);
  }

  to {
    transform: translateX(2px);
  }
}

/* Vain safarille */
video:paused { opacity: 0.6; }

/* Deafult is 4px for space variable */

.h-full { height: 100% !important; }
.w-full { width: 100% !important; }

.p-0, .p-none { padding: 0 !important; }
.m-0, .m-none { margin: 0 !important; }

.p-1  { padding: calc(var(--space) * 1); }
.p-2  { padding: calc(var(--space) * 2); }
.p-3  { padding: calc(var(--space) * 3); }
.p-4  { padding: calc(var(--space) * 4); }
.p-5  { padding: calc(var(--space) * 5); }
.p-6  { padding: calc(var(--space) * 6); }
.p-7  { padding: calc(var(--space) * 7); }
.p-8  { padding: calc(var(--space) * 8); }
.p-9  { padding: calc(var(--space) * 9); }
.p-10 { padding: calc(var(--space) * 10); }
.p-12 { padding: calc(var(--space) * 12); }
.p-14 { padding: calc(var(--space) * 14); }
.p-16 { padding: calc(var(--space) * 16); }
.p-20 { padding: calc(var(--space) * 20); }
.p-24 { padding: calc(var(--space) * 24); }
.p-28 { padding: calc(var(--space) * 28); }
.p-30 { padding: calc(var(--space) * 30); }
.p-32 { padding: calc(var(--space) * 32); }

.pt-1  { padding-top: calc(var(--space) * 1); }
.pt-2  { padding-top: calc(var(--space) * 2); }
.pt-3  { padding-top: calc(var(--space) * 3); }
.pt-4  { padding-top: calc(var(--space) * 4); }
.pt-5  { padding-top: calc(var(--space) * 5); }
.pt-6  { padding-top: calc(var(--space) * 6); }
.pt-7  { padding-top: calc(var(--space) * 7); }
.pt-8  { padding-top: calc(var(--space) * 8); }
.pt-9  { padding-top: calc(var(--space) * 9); }
.pt-10 { padding-top: calc(var(--space) * 10); }
.pt-12 { padding-top: calc(var(--space) * 12); }
.pt-14 { padding-top: calc(var(--space) * 14); }
.pt-16 { padding-top: calc(var(--space) * 16); }
.pt-20 { padding-top: calc(var(--space) * 20); }
.pt-24 { padding-top: calc(var(--space) * 24); }
.pt-28 { padding-top: calc(var(--space) * 28); }
.pt-30 { padding-top: calc(var(--space) * 30); }
.pt-32 { padding-top: calc(var(--space) * 32); }

.pr-1  { padding-right: calc(var(--space) * 1); }
.pr-2  { padding-right: calc(var(--space) * 2); }
.pr-3  { padding-right: calc(var(--space) * 3); }
.pr-4  { padding-right: calc(var(--space) * 4); }
.pr-5  { padding-right: calc(var(--space) * 5); }
.pr-6  { padding-right: calc(var(--space) * 6); }
.pr-7  { padding-right: calc(var(--space) * 7); }
.pr-8  { padding-right: calc(var(--space) * 8); }
.pr-9  { padding-right: calc(var(--space) * 9); }
.pr-10 { padding-right: calc(var(--space) * 10); }
.pr-12 { padding-right: calc(var(--space) * 12); }
.pr-14 { padding-right: calc(var(--space) * 14); }
.pr-16 { padding-right: calc(var(--space) * 16); }
.pr-20 { padding-right: calc(var(--space) * 20); }
.pr-24 { padding-right: calc(var(--space) * 24); }
.pr-28 { padding-right: calc(var(--space) * 28); }
.pr-30 { padding-right: calc(var(--space) * 30); }
.pr-32 { padding-right: calc(var(--space) * 32); }

.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: calc(var(--space) * 1); }
.pb-2  { padding-bottom: calc(var(--space) * 2); }
.pb-3  { padding-bottom: calc(var(--space) * 3); }
.pb-4  { padding-bottom: calc(var(--space) * 4); }
.pb-5  { padding-bottom: calc(var(--space) * 5); }
.pb-6  { padding-bottom: calc(var(--space) * 6); }
.pb-7  { padding-bottom: calc(var(--space) * 7); }
.pb-8  { padding-bottom: calc(var(--space) * 8); }
.pb-9  { padding-bottom: calc(var(--space) * 9); }
.pb-10 { padding-bottom: calc(var(--space) * 10); }
.pb-12 { padding-bottom: calc(var(--space) * 12); }
.pb-14 { padding-bottom: calc(var(--space) * 14); }
.pb-16 { padding-bottom: calc(var(--space) * 16); }
.pb-20 { padding-bottom: calc(var(--space) * 20); }
.pb-24 { padding-bottom: calc(var(--space) * 24); }
.pb-28 { padding-bottom: calc(var(--space) * 28); }
.pb-30 { padding-bottom: calc(var(--space) * 30); }    
.pb-32 { padding-bottom: calc(var(--space) * 32); }

.pl-1  { padding-left: calc(var(--space) * 1); }
.pl-2  { padding-left: calc(var(--space) * 2); }
.pl-3  { padding-left: calc(var(--space) * 3); }
.pl-4  { padding-left: calc(var(--space) * 4); }
.pl-5  { padding-left: calc(var(--space) * 5); }
.pl-6  { padding-left: calc(var(--space) * 6); }
.pl-7  { padding-left: calc(var(--space) * 7); }
.pl-8  { padding-left: calc(var(--space) * 8); }
.pl-9  { padding-left: calc(var(--space) * 9); }
.pl-10 { padding-left: calc(var(--space) * 10); }
.pl-12 { padding-left: calc(var(--space) * 12); }
.pl-14 { padding-left: calc(var(--space) * 14); }
.pl-16 { padding-left: calc(var(--space) * 16); }
.pl-20 { padding-left: calc(var(--space) * 20); }
.pl-24 { padding-left: calc(var(--space) * 24); }
.pl-28 { padding-left: calc(var(--space) * 28); }
.pl-30 { padding-left: calc(var(--space) * 30); }    
.pl-32 { padding-left: calc(var(--space) * 32); }

.px-1  { padding-left: calc(var(--space) * 1); padding-right: calc(var(--space) * 1); }
.px-2  { padding-left: calc(var(--space) * 2); padding-right: calc(var(--space) * 2); }
.px-3  { padding-left: calc(var(--space) * 3); padding-right: calc(var(--space) * 3); }
.px-4  { padding-left: calc(var(--space) * 4); padding-right: calc(var(--space) * 4); }
.px-5  { padding-left: calc(var(--space) * 5); padding-right: calc(var(--space) * 5); }
.px-6  { padding-left: calc(var(--space) * 6); padding-right: calc(var(--space) * 6); }
.px-7  { padding-left: calc(var(--space) * 7); padding-right: calc(var(--space) * 7); }
.px-8  { padding-left: calc(var(--space) * 8); padding-right: calc(var(--space) * 8); }
.px-9  { padding-left: calc(var(--space) * 9); padding-right: calc(var(--space) * 9); }
.px-10 { padding-left: calc(var(--space) * 10); padding-right: calc(var(--space) * 10); }
.px-12 { padding-left: calc(var(--space) * 12); padding-right: calc(var(--space) * 12); }
.px-14 { padding-left: calc(var(--space) * 14); padding-right: calc(var(--space) * 14); }
.px-16 { padding-left: calc(var(--space) * 16); padding-right: calc(var(--space) * 16); }
.px-20 { padding-left: calc(var(--space) * 20); padding-right: calc(var(--space) * 20); }
.px-24 { padding-left: calc(var(--space) * 24); padding-right: calc(var(--space) * 24); }
.px-28 { padding-left: calc(var(--space) * 28); padding-right: calc(var(--space) * 28); }
.px-30 { padding-left: calc(var(--space) * 30); padding-right: calc(var(--space) * 30); }
.px-32 { padding-left: calc(var(--space) * 32); padding-right: calc(var(--space) * 32); }

.py-1  { padding-top: calc(var(--space) * 1); padding-bottom: calc(var(--space) * 1); }
.py-2  { padding-top: calc(var(--space) * 2); padding-bottom: calc(var(--space) * 2); }
.py-3  { padding-top: calc(var(--space) * 3); padding-bottom: calc(var(--space) * 3); }
.py-4  { padding-top: calc(var(--space) * 4); padding-bottom: calc(var(--space) * 4); }
.py-5  { padding-top: calc(var(--space) * 5); padding-bottom: calc(var(--space) * 5); }
.py-6  { padding-top: calc(var(--space) * 6); padding-bottom: calc(var(--space) * 6); }
.py-7  { padding-top: calc(var(--space) * 7); padding-bottom: calc(var(--space) * 7); }
.py-8  { padding-top: calc(var(--space) * 8); padding-bottom: calc(var(--space) * 8); }
.py-9  { padding-top: calc(var(--space) * 9); padding-bottom: calc(var(--space) * 9); }
.py-10 { padding-top: calc(var(--space) * 10); padding-bottom: calc(var(--space) * 10); }
.py-12 { padding-top: calc(var(--space) * 12); padding-bottom: calc(var(--space) * 12); }
.py-14 { padding-top: calc(var(--space) * 14); padding-bottom: calc(var(--space) * 14); }
.py-16 { padding-top: calc(var(--space) * 16); padding-bottom: calc(var(--space) * 16); }
.py-20 { padding-top: calc(var(--space) * 20); padding-bottom: calc(var(--space) * 20); }
.py-24 { padding-top: calc(var(--space) * 24); padding-bottom: calc(var(--space) * 24); }
.py-28 { padding-top: calc(var(--space) * 28); padding-bottom: calc(var(--space) * 28); }
.py-30 { padding-top: calc(var(--space) * 30); padding-bottom: calc(var(--space) * 30); }
.py-32 { padding-top: calc(var(--space) * 32); padding-bottom: calc(var(--space) * 32); }

.m-1  { margin: calc(var(--space) * 1); }
.m-2  { margin: calc(var(--space) * 2); }
.m-3  { margin: calc(var(--space) * 3); }
.m-4  { margin: calc(var(--space) * 4); }
.m-5  { margin: calc(var(--space) * 5); }
.m-6  { margin: calc(var(--space) * 6); }
.m-7  { margin: calc(var(--space) * 7); }
.m-8  { margin: calc(var(--space) * 8); }
.m-9  { margin: calc(var(--space) * 9); }
.m-10 { margin: calc(var(--space) * 10); }
.m-12 { margin: calc(var(--space) * 12); }
.m-14 { margin: calc(var(--space) * 14); }
.m-16 { margin: calc(var(--space) * 16); }
.m-20 { margin: calc(var(--space) * 20); }
.m-24 { margin: calc(var(--space) * 24); }
.m-28 { margin: calc(var(--space) * 28); }
.m-30 { margin: calc(var(--space) * 30); }
.m-32 { margin: calc(var(--space) * 32); }

.mt-1  { margin-top: calc(var(--space) * 1); }
.mt-2  { margin-top: calc(var(--space) * 2); }
.mt-3  { margin-top: calc(var(--space) * 3); }
.mt-4  { margin-top: calc(var(--space) * 4); }
.mt-5  { margin-top: calc(var(--space) * 5); }
.mt-6  { margin-top: calc(var(--space) * 6); }
.mt-7  { margin-top: calc(var(--space) * 7); }
.mt-8  { margin-top: calc(var(--space) * 8); }
.mt-9  { margin-top: calc(var(--space) * 9); }
.mt-10 { margin-top: calc(var(--space) * 10); }
.mt-12 { margin-top: calc(var(--space) * 12); }
.mt-14 { margin-top: calc(var(--space) * 14); }
.mt-16 { margin-top: calc(var(--space) * 16); }
.mt-20 { margin-top: calc(var(--space) * 20); }
.mt-24 { margin-top: calc(var(--space) * 24); }
.mt-28 { margin-top: calc(var(--space) * 28); }
.mt-30 { margin-top: calc(var(--space) * 30); }
.mt-32 { margin-top: calc(var(--space) * 32); }

.mr-1  { margin-right: calc(var(--space) * 1); }
.mr-2  { margin-right: calc(var(--space) * 2); }
.mr-3  { margin-right: calc(var(--space) * 3); }
.mr-4  { margin-right: calc(var(--space) * 4); }
.mr-5  { margin-right: calc(var(--space) * 5); }
.mr-6  { margin-right: calc(var(--space) * 6); }
.mr-7  { margin-right: calc(var(--space) * 7); }
.mr-8  { margin-right: calc(var(--space) * 8); }
.mr-9  { margin-right: calc(var(--space) * 9); }
.mr-10 { margin-right: calc(var(--space) * 10); }
.mr-12 { margin-right: calc(var(--space) * 12); }
.mr-14 { margin-right: calc(var(--space) * 14); }
.mr-16 { margin-right: calc(var(--space) * 16); }
.mr-20 { margin-right: calc(var(--space) * 20); }
.mr-24 { margin-right: calc(var(--space) * 24); }
.mr-28 { margin-right: calc(var(--space) * 28); }
.mr-30 { margin-right: calc(var(--space) * 30); }
.mr-32 { margin-right: calc(var(--space) * 32); }

.mb-1  { margin-bottom: calc(var(--space) * 1); }
.mb-2  { margin-bottom: calc(var(--space) * 2); }
.mb-3  { margin-bottom: calc(var(--space) * 3); }
.mb-4  { margin-bottom: calc(var(--space) * 4); }
.mb-5  { margin-bottom: calc(var(--space) * 5); }
.mb-6  { margin-bottom: calc(var(--space) * 6); }
.mb-7  { margin-bottom: calc(var(--space) * 7); }
.mb-8  { margin-bottom: calc(var(--space) * 8); }
.mb-9  { margin-bottom: calc(var(--space) * 9); }
.mb-10 { margin-bottom: calc(var(--space) * 10); }
.mb-12 { margin-bottom: calc(var(--space) * 12); }
.mb-14 { margin-bottom: calc(var(--space) * 14); }
.mb-16 { margin-bottom: calc(var(--space) * 16); }
.mb-20 { margin-bottom: calc(var(--space) * 20); }
.mb-24 { margin-bottom: calc(var(--space) * 24); }
.mb-28 { margin-bottom: calc(var(--space) * 28); }
.mb-30 { margin-bottom: calc(var(--space) * 30); }
.mb-32 { margin-bottom: calc(var(--space) * 32); }

.ml-1  { margin-left: calc(var(--space) * 1); }
.ml-2  { margin-left: calc(var(--space) * 2); }
.ml-3  { margin-left: calc(var(--space) * 3); }
.ml-4  { margin-left: calc(var(--space) * 4); }
.ml-5  { margin-left: calc(var(--space) * 5); }
.ml-6  { margin-left: calc(var(--space) * 6); }
.ml-7  { margin-left: calc(var(--space) * 7); }
.ml-8  { margin-left: calc(var(--space) * 8); }
.ml-9  { margin-left: calc(var(--space) * 9); }
.ml-10 { margin-left: calc(var(--space) * 10); }
.ml-12 { margin-left: calc(var(--space) * 12); }
.ml-14 { margin-left: calc(var(--space) * 14); }
.ml-16 { margin-left: calc(var(--space) * 16); }
.ml-20 { margin-left: calc(var(--space) * 20); }
.ml-24 { margin-left: calc(var(--space) * 24); }
.ml-28 { margin-left: calc(var(--space) * 28); }
.ml-30 { margin-left: calc(var(--space) * 30); }
.ml-32 { margin-left: calc(var(--space) * 32); }

.mx-1  { margin-left: calc(var(--space) * 1); margin-right: calc(var(--space) * 1); }
.mx-2  { margin-left: calc(var(--space) * 2); margin-right: calc(var(--space) * 2); }
.mx-3  { margin-left: calc(var(--space) * 3); margin-right: calc(var(--space) * 3); }
.mx-4  { margin-left: calc(var(--space) * 4); margin-right: calc(var(--space) * 4); }
.mx-5  { margin-left: calc(var(--space) * 5); margin-right: calc(var(--space) * 5); }
.mx-6  { margin-left: calc(var(--space) * 6); margin-right: calc(var(--space) * 6); }
.mx-7  { margin-left: calc(var(--space) * 7); margin-right: calc(var(--space) * 7); }
.mx-8  { margin-left: calc(var(--space) * 8); margin-right: calc(var(--space) * 8); }
.mx-9  { margin-left: calc(var(--space) * 9); margin-right: calc(var(--space) * 9); }
.mx-10 { margin-left: calc(var(--space) * 10); margin-right: calc(var(--space) * 10); }
.mx-12 { margin-left: calc(var(--space) * 12); margin-right: calc(var(--space) * 12); }
.mx-14 { margin-left: calc(var(--space) * 14); margin-right: calc(var(--space) * 14); }
.mx-16 { margin-left: calc(var(--space) * 16); margin-right: calc(var(--space) * 16); }
.mx-20 { margin-left: calc(var(--space) * 20); margin-right: calc(var(--space) * 20); }
.mx-24 { margin-left: calc(var(--space) * 24); margin-right: calc(var(--space) * 24); }
.mx-28 { margin-left: calc(var(--space) * 28); margin-right: calc(var(--space) * 28); }
.mx-30 { margin-left: calc(var(--space) * 30); margin-right: calc(var(--space) * 30); }    
.mx-32 { margin-left: calc(var(--space) * 32); margin-right: calc(var(--space) * 32); }

.my-1  { margin-top: calc(var(--space) * 1); margin-bottom: calc(var(--space) * 1); }
.my-2  { margin-top: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 2); }
.my-3  { margin-top: calc(var(--space) * 3); margin-bottom: calc(var(--space) * 3); }
.my-4  { margin-top: calc(var(--space) * 4); margin-bottom: calc(var(--space) * 4); }
.my-5  { margin-top: calc(var(--space) * 5); margin-bottom: calc(var(--space) * 5); }
.my-6  { margin-top: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 6); }
.my-7  { margin-top: calc(var(--space) * 7); margin-bottom: calc(var(--space) * 7); }
.my-8  { margin-top: calc(var(--space) * 8); margin-bottom: calc(var(--space) * 8); }
.my-9  { margin-top: calc(var(--space) * 9); margin-bottom: calc(var(--space) * 9); }
.my-10 { margin-top: calc(var(--space) * 10); margin-bottom: calc(var(--space) * 10); }    
.my-12 { margin-top: calc(var(--space) * 12); margin-bottom: calc(var(--space) * 12); }
.my-14 { margin-top: calc(var(--space) * 14); margin-bottom: calc(var(--space) * 14); }
.my-16 { margin-top: calc(var(--space) * 16); margin-bottom: calc(var(--space) * 16); }
.my-20 { margin-top: calc(var(--space) * 20); margin-bottom: calc(var(--space) * 20); }
.my-24 { margin-top: calc(var(--space) * 24); margin-bottom: calc(var(--space) * 24); }
.my-28 { margin-top: calc(var(--space) * 28); margin-bottom: calc(var(--space) * 28); }
.my-30 { margin-top: calc(var(--space) * 30); margin-bottom: calc(var(--space) * 30); }
.my-32 { margin-top: calc(var(--space) * 32); margin-bottom: calc(var(--space) * 32); }

.rounded-none { border-radius: 0 !important; }
.rounded-full { border-radius: 100%; }
.rounded-sm { border-radius: var(--space); }
.rounded-md { border-radius: calc(var(--space) * 2); }
.rounded-lg { border-radius: calc(var(--space) * 3); }
.rounded-xl { border-radius: calc(var(--space) * 4); }

.font-100 { font-weight: 100; }
.font-200 { font-weight: 200; }
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: calc(var(--space) * 1) !important; }
.gap-2 { gap: calc(var(--space) * 2) !important; }
.gap-3 { gap: calc(var(--space) * 3) !important; }
.gap-4 { gap: calc(var(--space) * 4) !important; }
.gap-5 { gap: calc(var(--space) * 5) !important; }
.gap-6 { gap: calc(var(--space) * 6) !important; }
.gap-7 { gap: calc(var(--space) * 7) !important; }
.gap-8 { gap: calc(var(--space) * 8) !important; }
.gap-9 { gap: calc(var(--space) * 9) !important; }
.gap-10 { gap: calc(var(--space) * 10) !important; }
.gap-12 { gap: calc(var(--space) * 12) !important; }
.gap-14 { gap: calc(var(--space) * 14) !important; }
.gap-16 { gap: calc(var(--space) * 16) !important; }
.gap-20 { gap: calc(var(--space) * 20) !important; }
.gap-24 { gap: calc(var(--space) * 24) !important; }

.grid { display: grid; }
.grid-col { display: grid; grid-auto-flow: column; }

.flex { display: flex; }

.tb-top { align-content: start; }
.tb-center { align-content: center; }
.tb-bottom { align-content: end; }
.lr-left { justify-content: start; }
.lr-center { justify-content: center; }	
.lr-right { justify-content: end; }

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

.text-white { color: #fff; }
.text-black { color: #000; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-tertiary { color: var(--tertiary); }
.text-quaternary { color: var(--quaternary); }

.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-tertiary { background-color: var(--tertiary); }
.bg-quaternary { background-color: var(--quaternary); }


/* Animation Keyframes */
/* Basic */
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-down-center {
	-webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.rotate-in-center {
	-webkit-animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Contact form 7 */

.wpcf7 input[type="text"], .wpcf7 input[type="url"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 textarea {
    width: calc(100% - 10px);
    color: var(--black);
    margin-top: 5px;
    background-color: var(--white);
    font-size: var(--font18);
    font-family: Lexend, sans-serif !important;
    border: 1px solid var(--black);
    outline: none;
    padding: 5px;
}

.wpcf7-form-control.wpcf7-textarea {
	resize: vertical;
}

.wpcf7-form-control.wpcf7-submit {
	padding: 10px 20px;
	background-color: var(--secondary);
	color: var(--white);
	border: none;
	cursor: pointer;
	transition: 0.3s ease-out;
	-moz-transition:    0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	-o-transition:      0.3s ease-out;
	font-weight: 700;
    font-family: 'Source Sans 3';
	font-size: var(--font18);
}

label {
	font-weight: 700;
    font-family: 'Source Sans 3';
	font-size: var(--font18);
}

/* Navigation */

html.menu-open {
	overflow: hidden;
}

.site {
	min-height: 100vh;
}

.site-header {
	position: relative;
	z-index: 1000;
}

.main-navigation {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: var(--nav-height);
	background: var(--nav-bg);
	border-bottom: 1px solid var(--nav-border);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.nav-inner {
	/* width: min(
		calc(100% - (var(--nav-padding) * 2)),
		1440px
	); */
	height: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.nav-logo {

}
.nav-logo-link {
    display: inline-flex;
    align-items: center;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity var(--nav-transition), transform var(--nav-transition);
    height: 100%;
    display: block;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}
.nav-logo-link:hover {
	transform: translateY(-1px);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.5vw, 42px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-item {
	position: relative;
  color: var(--nav-text);
}

.nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	color: var(--nav-text);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.2;
	transition:
		color var(--nav-transition),
		opacity var(--nav-transition);
}
.nav-link:hover {
	color: var(--nav-hover);
}
.nav-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
	transform: scaleX(0);
	transform-origin: right center;
	transition:
		transform var(--nav-transition);
}

.nav-item:hover::after,
.nav-item.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.nav-arrow {
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition:
		transform var(--nav-transition);
}
.nav-item:hover .nav-arrow {
	transform: rotate(225deg);
}

.nav-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	min-width: 220px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--nav-border);
	border-radius: var(--nav-dropdown-radius);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:
		translate(-50%, 8px)
		scale(.98);
	transform-origin: top center;
	transition:
		opacity var(--nav-transition),
		transform var(--nav-transition),
		visibility var(--nav-transition);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;

	transform:
		translate(-50%, 0)
		scale(1);
}
.nav-dropdown a {
	display: block;
	padding: 10px 12px;
	color: var(--nav-text);
	text-decoration: none;
	border-radius: 8px;
	transition:
		background var(--nav-transition),
		color var(--nav-transition);
}
.nav-dropdown a:hover {
	background: rgba(0, 0, 0, .05);
	color: var(--nav-text);
}

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--nav-text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	-webkit-tap-highlight-color: transparent;
	transition:
		background var(--nav-transition);
}
.menu-toggle:hover {
	background: rgba(0, 0, 0, .05);
}
.menu-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.menu-toggle span {
	display: block;
	width: 23px;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
	transform-origin: center;
	transition:
		transform var(--nav-transition),
		opacity var(--nav-transition);
}

.menu-toggle.is-open span:nth-child(1) {
	transform:
		translateY(7px)
		rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.menu-toggle.is-open span:nth-child(3) {
	transform:
		translateY(-7px)
		rotate(-45deg);
}
.mobile-navigation {
	display: none;
}

@media (max-width: 900px) {
	.main-navigation {
		height: var(--nav-mobile-height);
	}
	.nav-inner {
		/* width: min(
			calc(100% - 32px),
			1440px
		); */
		gap: 20px;
	}
	.nav-menu {
		display: none;
	}
	.menu-toggle {
		display: inline-flex;
	}
	.mobile-navigation {
		display: block;
		position: fixed;
		top: var(--nav-mobile-height);
		right: 0;
		left: auto;
		width: min(82vw, 420px);
		bottom: 0px;
		z-index: 999;
		background: var(--nav-mobile-bg);
		border: 1px solid var(--nav-border);
		border-right: 0;
		/* border-radius: 0 0 0 20px; */
		box-shadow:
			-12px 20px 50px rgba(0, 0, 0, .14);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(30px);
		transition:
			opacity var(--nav-transition),
			transform var(--nav-transition),
			visibility var(--nav-transition);
	}
	.mobile-navigation.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
	}
	.mobile-navigation-inner {
		width: 100%;
		max-width: none;
		margin: 0;
		padding:
			28px
			28px
			40px;
		box-sizing: border-box;
		margin-top: 32px;
	}
	.mobile-logo {
		margin-bottom: 28px;
	}
	.mobile-logo .nav-logo-link {
		font-size: 1rem;
	}
	.mobile-menu {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mobile-menu-item {
		position: relative;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--nav-border);
	}
	.mobile-menu-item:last-child {
		border-bottom: 0;
	}
	.mobile-menu-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		width: 100%;
		padding: 18px 0;
		color: var(--nav-text);
		text-decoration: none;
		font-size:
			clamp(
				1.1rem,
				4vw,
				1.5rem
			);
		font-weight: 600;
		line-height: 1.2;
		transition:
			opacity var(--nav-transition),
			transform var(--nav-transition);
	}
	.mobile-menu-link:hover {
		opacity: .6;
	}
	.mobile-menu-link:active {
		transform: scale(.98);
	}
	.mobile-menu-link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 4px;
		border-radius: 4px;
	}
	.mobile-submenu {
		padding:
			0
			0
			16px
			14px;
	}
	.mobile-submenu a {
		display: block;
		padding: 7px 0;
		color: var(--nav-hover);
		text-decoration: none;
		font-size: .95rem;
		line-height: 1.4;
		transition:
			color var(--nav-transition),
			transform var(--nav-transition);
	}
	.mobile-submenu a:hover {
		color: var(--nav-text);
		transform: translateX(3px);
	}

	.mobile-menu-arrow {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		flex: 0 0 30px;
		border: 1px solid var(--nav-border);
		border-radius: 50%;
	}
	.mobile-menu-arrow span {
		position: absolute;
		width: 7px;
		height: 1px;
		background: currentColor;
		border-radius: 999px;
	}
	.mobile-menu-arrow span:first-child {
		transform:
			rotate(45deg)
			translateX(-2px);
	}
	.mobile-menu-arrow span:last-child {
		transform:
			rotate(-45deg)
			translateX(2px);
	}
}

@media (max-width: 600px) {
	.main-navigation {
		height: 64px;
	}
	.nav-inner {
		/* width: calc(100% - 24px); */
	}
	.mobile-navigation {
		top: 64px;
		width: min(84vw, 380px);
		/* bottom: 12px;
		border-radius: 0 0 0 18px; */
	}
	.mobile-navigation-inner {
		padding:
			24px
			22px
			32px;
	}
	.mobile-logo {
		margin-bottom: 20px;
	}
	.mobile-menu-link {
		padding: 16px 0;
	}
}

@media (max-width: 380px) {
	.nav-inner {
		/* width: calc(100% - 16px); */
	}
	.mobile-navigation {
		top: 46px;
		width: 88vw;
		/* bottom: 8px;
		border-radius: 0 0 0 16px; */
	}
	.mobile-navigation-inner {
		padding:
			20px
			18px
			28px;
	}
	.mobile-menu-link {
		font-size: 1.05rem;
	}
}

@media (max-height: 500px) and (max-width: 900px) {
	.mobile-navigation {
		/* top: 72px; */
		/* bottom: 8px; */
	}
	.mobile-navigation-inner {
		padding-top: 18px;
		padding-bottom: 24px;
	}
	.mobile-logo {
		margin-bottom: 12px;
	}
	.mobile-menu-link {
		padding: 12px 0;
	}
}