html {
  overflow-y: auto;
}
.horizontalLayout {
  .page-wrapper {
    .v-container {
      padding-top: 20px;
    }
  }
}
.spacer {
  padding: 100px 0;
  @media (max-width: 1264px) {
    padding: 72px 0;
  }
}
@media (max-width: 800px) {
  .spacer {
    padding: 40px 0;
  }
}

.cursor-pointer {
  cursor: pointer;
}
.page-wrapper {
  background: rgb(var(--v-theme-containerBg));
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;

  .page-content-container {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 15px;
    @media (max-width: 1550px) {
      max-width: 100%;
    }
    @media (min-width: 768px) {
      padding-inline: 40px;
    }
  }

  .page-footer-container {
    flex-shrink: 0;
  }

  .v-container {
    padding: 15px;
    @media (max-width: 1550px) {
      max-width: 100%;
    }
    @media (min-width: 768px) {
      padding-inline: 40px;
    }
  }
}
.maxWidth {
  max-width: 1200px;
  margin: 0 auto;
}
$sizes: (
  'display-1': 44px,
  'display-2': 40px,
  'display-3': 30px,
  'h1': 36px,
  'h2': 30px,
  'h3': 21px,
  'h4': 18px,
  'h5': 16px,
  'h6': 14px,
  'text-8': 8px,
  'text-10': 10px,
  'text-13': 13px,
  'text-18': 18px,
  'text-20': 20px,
  'text-24': 24px,
  'body-text-1': 10px
);

@each $pixel, $size in $sizes {
  .#{$pixel} {
    font-size: $size;
    line-height: $size + 10;
  }
}

.customizer-btn {
  .icon {
    animation: progress-circular-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all 0.2s ease-in-out;
  }
}
.fixed-width {
  max-width: 1300px;
}
.ga-2 {
  gap: 8px;
}

// font family
body {
  font-family: 'Public Sans', sans-serif;
  .Roboto {
    font-family: 'Roboto', sans-serif !important;
  }

  .Poppins {
    font-family: 'Poppins', sans-serif !important;
  }

  .Inter {
    font-family: 'Inter', sans-serif !important;
  }

  .Public {
    font-family: 'Public sans', sans-serif !important;
  }
}

@keyframes slideY {
  0%,
  50%,
  100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(10px);
  }
}

.link {
  color: rgb(var(--v-theme-lightText));
  text-decoration: none;
  &:hover {
    color: rgb(var(--v-theme-primary));
  }
}