/* Navbar and Grid Hover */
.navbar {
  opacity: 0;
}

/* Fix for missing fonts - Alias Gotham/Hatton to Suse/Marcellus */
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/SUSE-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/SUSE-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/SUSE-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Hatton';
  src: url('../fonts/Marcellus-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Hatton';
  src: url('../fonts/Marcellus-Regular.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Hatton';
  src: url('../fonts/Marcellus-Regular.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

.grid-hover {
  transition: opacity 0.2s, height 0.2s;
}

.grid-image-hover {
  transition: opacity 0.4s, transform 0.4s ease-out;
}

/* Global Styles */
html {
  font-size: calc(0.625rem + 0.41666666666666663vw);
}

@media screen and (max-width:1920px) {
  html {
    font-size: calc(0.625rem + 0.41666666666666674vw);
  }
}

@media screen and (max-width:1440px) {
  html {
    font-size: calc(0.8126951092611863rem + 0.20811654526534862vw);
  }
}

@media screen and (max-width:479px) {
  html {
    font-size: calc(0.7494769874476988rem + 0.8368200836820083vw);
  }
}

/* Make text look crisper and more legible in all browsers */
.body_new {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

/* hover effect */
.menu-item {
  cursor: pointer;
  position: relative;
  color: var(#ffffff);
}

.menu-item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.menu-item:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* btn hover effect*/
.Button-Nav {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  /* Adjust padding */
  background-color: #007AFF;
  /* Button color */
  border: none;
  /* Remove border */
  border-radius: 4px;
  /* Optional: Rounded corners */
  color: #ffffff;
  /* Text color */
}

.Button-Nav-text-1,
.Button-Nav-text-2 {
  transition: opacity 0.3s ease;
  position: absolute;
  /* Position text blocks absolutely */
  left: 0;
  /* Align to the left */
  top: 50%;
  /* Center vertically */
  transform: translateY(-50%);
  /* Adjust vertical alignment */
}

.Button-Nav-text-2 {
  opacity: 0;
  /* Initially hidden */
}

.Button-Nav:hover .Button-Nav-text-1 {
  opacity: 0;
  /* Fade out on hover */
}

.Button-Nav:hover .Button-Nav-text-2 {
  opacity: 1;
  /* Fade in on hover */
}

/* Button components (button-nav, button-main, button-secondary, price-button) */
.button-nav {
  transition: background 0.2s;
}

.button-nav::before {
  position: absolute;
}

.button-nav::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
}

.button-nav::after,
.button-nav::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.button-nav .button-wrapper,
.button-nav .button-cta-nav,
.button-nav .button-cta-nav-hide {
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-nav .button-cta-nav {
  top: 50%;
}

.button-nav .button-cta-nav,
.button-nav .button-cta-nav-hide {
  transition: top 0.3s;
}

.button-nav .button-cta-nav-hide {
  top: 150%;
}

.button-nav:hover .button-cta-nav {
  top: -100%;
}

.button-nav:hover .button-cta-nav-hide {
  top: 50%;
}

.button-nav:hover:before,
.button-nav:hover:after {
  opacity: 1;
  visibility: visible;
}

.button-main {
  transition: background 0.2s;
}

.button-main::before {
  position: absolute;
}

.button-main::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
}

.button-main::after,
.bbutton-main::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.button-main .button-wrapper,
.button-main .button-text,
.button-main .button-text-hided {
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-main .button-text {
  top: 50%;
}

.button-main .button-text,
.button-main .button-text-hided {
  transition: top 0.3s;
}

.button-main .button-text-hided {
  top: 150%;
}

.button-main:hover .button-text {
  top: -100%;
}

.button-main:hover .button-text-hided {
  top: 50%;
}

.button-main:hover:before,
.button-main:hover:after {
  opacity: 1;
  visibility: visible;
}

.button-secondary {
  transition: background 0.2s;
}

.button-secondary::before {
  position: absolute;
}

.button-secondary::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
}

.button-secondary::after,
.button-secondary::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.button-secondary .button-wrapper,
.button-secondary .button-line,
.button-secondary .button-line-hided {
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-secondary .button-line {
  top: 50%;
}

.button-secondary .button-line,
.button-secondary .button-line-hided {
  transition: top 0.3s;
}

.button-secondary .button-line-hided {
  top: 150%;
}

.button-secondary:hover .button-line {
  top: -100%;
}

.button-secondary:hover .button-line-hided {
  top: 50%;
}

.button-secondary:hover:before,
.button-secondary:hover:after {
  opacity: 1;
  visibility: visible;
}

.price-button {
  transition: background 0.2s;
}

.price-button::before {
  position: absolute;
}

.price-button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
}

.price-button::after,
.price-button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.price-button .button-wrapper,
.price-button .price-button-txt,
.price-button .price-button-txt-hide {
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.price-button .price-button-txt {
  top: 50%;
}

.price-button .price-button-txt,
.price-button .price-button-txt-hide {
  transition: top 0.3s;
}

.price-button .price-button-txt-hide {
  top: 150%;
}

.price-button:hover .price-button-txt {
  top: -100%;
}

.price-button:hover .price-button-txt-hide {
  top: 50%;
}

.price-button:hover:before,
.price-button:hover:after {
  opacity: 1;
  visibility: visible;
}

.edge-darkness {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  /* Щоб не блокувати взаємодію з контентом */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.8) 100%);
  height: 100%;
  /* На всю висоту блоку */
  z-index: 90;
  /* Щоб затемнення було над контентом */
}

.edge-darkness-horizontal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 999;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 10%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 1) 100%);
  height: 100%;
}