:root {
  --blue: #1e90ff;
  --color-white: #ffffff;
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);

  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-900: oklch(40.8% 0.123 38.172);

  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);

  --color-purple-500: oklch(62.7% 0.265 303.9);

  --color-pink-500: oklch(65.6% 0.241 354.308);

  --space: 0.25rem;
  --border-style: solid;
  /* --container-6xl: 72rem;  */
  --container-md: 28rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-7xl: 80rem;

  --radius-lg: 0.5rem;
  --radius-2xl: 1rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --text-sm-line-height: calc(1.25 / 0.875);
  --text-lg-line-height: calc(1.75 / 1.125);
  --text-xl-line-height: 1.75;
  --text-4xl-line-height: calc(2.5 / 2.25);
  --text-5xl-line-height: 1;
  --text-6xl-line-height: 1;
  --text-7xl-line-height: 1;

  --leading-relaxed: 1.625;

  --tracking-wide: 0.025em;
  --default-transition-duration: 300ms;
  --default-transition-timing-function: ease-in-out;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --animate-pulse: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-fade-in: fade-in 1s ease-out forwards;

  --shadow: 0 10px 15px -3px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
}
a {
  text-decoration: inherit;
  color: inherit;
}
ol,
li {
  list-style: none;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  box-sizing: border-box;
  background: #fefbea;
  font-family: "Lato", sans-serif;
}

/* Width CSS Start */
.max-w-md {
  max-width: var(--container-md);
}
.max-w-3xl {
  max-width: var(--container-3xl);
}
.max-w-4xl {
  max-width: var(--container-4xl);
}
.max-w-7xl {
  max-width: var(--container-7xl);
}
.w-full {
  width: 100%;
}
.w-9 {
  width: calc(var(--space) * 9);
}
.w-10 {
  width: calc(var(--space) * 10);
}
.w-12 {
  width: calc(var(--space) * 12);
}
.w-20 {
  width: calc(var(--space) * 20);
}
.w-24 {
  width: calc(var(--space) * 24);
}
.w-32 {
  width: calc(var(--space) * 32);
}
.w-40 {
  width: calc(var(--space) * 40);
}
/* Width CSS End */

/* Height CSS Start */
.min-h-screen {
  min-height: 100vh;
}
.h-full {
  height: 100%;
}
.h-8 {
  height: calc(var(--space) * 8);
}
.h-9 {
  height: calc(var(--space) * 9);
}
.h-12 {
  height: calc(var(--space) * 12);
}
.h-20 {
  height: calc(var(--space) * 20);
}
.h-24 {
  height: calc(var(--space) * 24);
}
.h-32 {
  height: calc(var(--space) * 32);
}
.h-40 {
  height: calc(var(--space) * 40);
}
/* Height CSS End */

/* Margin CSS Start */
.m-4 {
  margin: calc(var(--space) * 4);
}

.my-4 {
  margin-block: calc(var(--space) * 4);
}

.mx-auto {
  margin-inline: auto;
}
.mt-8 {
  margin-top: calc(var(--space) * 8);
}

.mb-2 {
  margin-bottom: calc(var(--space) * 2);
}
.mb-4 {
  margin-bottom: calc(var(--space) * 4);
}
.mb-6 {
  margin-bottom: calc(var(--space) * 6);
}
.mb-8 {
  margin-bottom: calc(var(--space) * 8);
}
.mb-12 {
  margin-bottom: calc(var(--space) * 12);
}
.mb-16 {
  margin-bottom: calc(var(--space) * 16);
}
/* Margin CSS End */

/* Padding CSS Start */
.p-2 {
  padding: calc(var(--space) * 2);
}
.p-4 {
  padding: calc(var(--space) * 4);
}
.p-6 {
  padding: calc(var(--space) * 6);
}

.pt-8 {
  padding-top: calc(var(--space) * 8);
}

.px-4 {
  padding-inline: calc(var(--space) * 4);
}
.px-6 {
  padding-inline: calc(var(--space) * 6);
}
.px-8 {
  padding-inline: calc(var(--space) * 8);
}

.py-4 {
  padding-block: calc(var(--space) * 4);
}
.py-3 {
  padding-block: calc(var(--space) * 3);
}
.py-12 {
  padding-block: calc(var(--space) * 12);
}
.py-20 {
  padding-block: calc(var(--space) * 20);
}

/* Padding CSS End */

/* Display CSS Start */
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}

.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}

.gap-2 {
  gap: calc(var(--space) * 2);
}
.gap-4 {
  gap: calc(var(--space) * 4);
}
.gap-8 {
  gap: calc(var(--space) * 8);
}
.gap-12 {
  gap: calc(var(--space) * 12);
}
/* Display CSS End */

/* Position CSS Start */
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}

.top-0 {
  top: calc(var(--space) * 0);
}
.top-20 {
  top: calc(var(--space) * 20);
}
.top-40 {
  top: calc(var(--space) * 40);
}

.bottom-20 {
  bottom: calc(var(--space) * 20);
}
.bottom-40 {
  bottom: calc(var(--space) * 40);
}

.left-0 {
  left: calc(var(--space) * 0);
}
.left-10 {
  left: calc(var(--space) * 10);
}
.left-1\/4 {
  left: calc(1 / 4 * 100%);
}

.right-0 {
  right: calc(var(--space) * 0);
}
.right-10 {
  right: calc(var(--space) * 10);
}
.right-20 {
  right: calc(var(--space) * 20);
}
.right-30 {
  right: calc(var(--space) * 30);
}

/* Position CSS End */

/* Background Color CSS Start */
.bg-linear-45 {
  --gradient-position: 45deg in oklab;
  background-image: linear-gradient(
    var(--gradient-position),
    var(--gradient-from),
    var(--gradient-to)
  );
}
.bg-gradient-to-br {
  --gradient-position: to bottom right in oklab;
  background-image: linear-gradient(
    var(--gradient-position),
    var(--gradient-from),
    var(--gradient-to)
  );
}

.bg-gradient-to-r {
  --gradient-position: to right in oklab;
  background-image: linear-gradient(
    var(--gradient-position),
    var(--gradient-from),
    var(--gradient-to)
  );
}

.from-gray-50 {
  --gradient-from: var(--color-gray-50);
}
.from-gray-200 {
  --gradient-from: var(--color-gray-200);
}

.from-orange-50 {
  --gradient-from: var(--color-orange-50);
}
.from-orange-400 {
  --gradient-from: var(--color-orange-400);
}
.from-orange-500 {
  --gradient-from: var(--color-orange-500);
}
.from-orange-600 {
  --gradient-from: var(--color-orange-600);
}
.hover\:from-orange-500:hover {
  --gradient-from: var(--color-orange-500);
}
.hover\:from-orange-600:hover {
  --gradient-from: var(--color-orange-600);
}

.from-purple-500 {
  --gradient-from: var(--color-purple-500);
}

.from-red-50 {
  --gradient-from: var(--color-red-50);
}
.from-red-400 {
  --gradient-from: var(--color-red-400);
}
.from-red-500 {
  --gradient-from: var(--color-red-500);
}
.hover\:from-red-500:hover {
  --gradient-from: var(--color-red-500);
}

.to-gray-200 {
  --gradient-to: var(--color-gray-200);
}
.to-gray-400 {
  --gradient-to: var(--color-gray-400);
}

.to-orange-400 {
  --gradient-to: var(--color-orange-400);
}
.to-orange-500 {
  --gradient-to: var(--color-orange-500);
}
.hover\:to-orange-500:hover {
  --gradient-to: var(--color-orange-500);
}

.to-pink-500 {
  --gradient-to: var(--color-pink-500);
}

.to-red-50 {
  --gradient-to: var(--color-red-50);
}
.to-red-400 {
  --gradient-to: var(--color-red-400);
}
.to-red-500 {
  --gradient-to: var(--color-red-500);
}
.to-red-600 {
  --gradient-to: var(--color-red-600);
}
.hover\:to-red-600:hover {
  --gradient-to: var(--color-red-600);
}

.dark .dark\:from-gray-900 {
  --gradient-from: var(--color-gray-900);
}

.dark .dark\:to-gray-800 {
  --gradient-to: var(--color-gray-800);
}

.bg-transparent {
  background: transparent;
}
.bg-white {
  background-color: var(--color-white);
}

.bg-white\/90 {
  background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}

.bg-gray-50 {
  background-color: var(--color-gray-50);
}

.bg-gray-100,
.hover\:bg-gray-100:hover {
  background-color: var(--color-gray-100);
}
.bg-gray-900 {
  background-color: var(--color-gray-900);
}

.dark .dark\:bg-gray-800 {
  background-color: var(--color-gray-800);
}

.dark .dark\:bg-gray-900 {
  background-color: var(--color-gray-900);
}

.dark .dark\:bg-gray-900\/90 {
  background-color: color-mix(in oklab, var(--color-gray-900) 90%, transparent);
}

.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Background Color CSS End */

/* Text Color CSS Start */
.hover\:bg-orange-100:hover {
  background-color: var(--color-orange-100);
}
.dark .dark\:hover\:bg-orange-900:hover {
  background-color: var(--color-orange-900);
}

.text-orange-100 {
  color: var(--color-orange-100);
}

.text-orange-400:hover,
.hover\:text-orange-400:hover {
  color: var(--color-orange-400);
}
.text-orange-600 {
  color: var(--color-orange-600);
}
.hover\:text-orange-600:hover {
  color: var(--color-orange-600);
}
.dark .dark\:text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-900 {
  color: var(--color-gray-900);
}

.dark .dark\:text-white,
.text-white {
  color: var(--color-white);
}

.text-transparent {
  color: transparent;
}
/* Text Color CSS End */

/* Alignment CSS Start */
.text-center {
  text-align: center;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
/* Alignment CSS End */

/* Text Decoration CSS Start */
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

.justify {
  text-align: justify;
}

/* Text Decoration CSS End */

/* Border CSS Start */
.border {
  border-style: var(--border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--border-style);
  border-top-width: 1px;
}

.border-b {
  border-bottom-style: var(--border-style);
  border-bottom-width: 1px;
}

.border-gray-200 {
  border-color: var(--color-gray-200);
}
.border-gray-300 {
  border-color: var(--color-gray-300);
}
.border-gray-400 {
  border-color: var(--color-gray-400);
}
.border-gray-500 {
  border-color: var(--color-gray-500);
}
.border-gray-600 {
  border-color: var(--color-gray-600);
}

.dark .dark\:border-gray-700 {
  border-color: var(--color-gray-700);
}

.border-gray-800 {
  border-color: var(--color-gray-800);
}

/* Border CSS End */

/* Radius CSS Start */
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
/* Radius CSS End */

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0px, 1fr));
}

/* Z-index CSS Start */
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
/* Z-index CSS End */

/* Font Weight CSS Start */
.font-light {
  font-weight: var(--font-weight-light);
}
.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}
/* Font Weight CSS End */

/* Font Size CSS Start */
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading, var(--text-sm-line-height));
}
.text-md {
  font-size: var(--text-md);
  line-height: 1.5;
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg-line-height);
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl-line-height);
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-line-height);
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-line-height);
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--text-5xl-line-height);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}
/* Font Size CSS End */

/* Spance CSS Start */
.space-x-2 {
  :where(& > :not(:last-child)) {
    margin-inline-end: calc(var(--space) * 2);
  }
}

.space-y-2 {
  :where(& > :not(:last-child)) {
    margin-block-end: calc(var(--space) * 2);
  }
}
.space-y-4 {
  :where(& > :not(:last-child)) {
    margin-block-end: calc(var(--space) * 4);
  }
}

/* Spance CSS End */

/* Opacity CSS Start */
.opacity-50 {
  opacity: 50%;
}
.opacity-60 {
  opacity: 60%;
}
.opacity-70 {
  opacity: 70%;
}
.opacity-80 {
  opacity: 80%;
}
/* Opacity CSS End */

/* Shadow CSS Start */
.shadow-lg {
  --shadow: 0 10px 15px -3px var(--shadow-color, rgb(0 0 0 / 0.1)),
    0 4px 6px -4px var(--shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--shadow);
}
.shadow-xl,
.hover\:shadow-xl:hover {
  --shadow: 0 20px 25px -5px var(--shadow-color, rgb(0 0 0 / 0.1)),
    0 8px 10px -6px var(--shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--shadow);
}

/* Shadow CSS End */

/* Animation CSS Start */
.rotate-180 {
  rotate: 180deg;
}

.transform {
  transform: var(--rotate-x) var(--rotate-y) var(--rotate-z) var(--scale-x)
    var(--scale-y) var(--scale-z) var(--translate-x) var(--translate-y)
    var(--translate-z);
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(
    --ease,
    var(--default-transition-timing-function)
  );
  transition-duration: var(--duration, var(--default-transition-duration));
}

.hover\:scale-105:hover {
  --scale-x: 105%;
  --scale-y: 105%;
  --scale-z: 105%;
  scale: var(--scale-x) var(--scale-y);
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(
    --ease,
    var(--default-transition-timing-function)
  );
  transition-duration: var(--duration, var(--default-transition-duration));
}

.duration-300 {
  --duration: 300ms;
  transition-duration: 300ms;
}

.animate-pulse {
  animation: var(--animate-pulse);
}
.animate-bounce {
  animation: var(--animate-bounce);
}
.animate-fade-in {
  animation: var(--animate-fade-in);
}

/* Animation CSS End */

.cursor-pointer {
  cursor: pointer;
}

.overflow-hidden {
  overflow: hidden;
}

.inset-0 {
  inset: calc(var(--space) * 0);
}

.tracking-wide {
  --tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #beautyLab,
  #webGuard,
  #voltVPN {
    background-image: none !important;
  }
}

@media (width >= 40rem) {
  .sm\:px-6 {
    padding-inline: calc(var(--space) * 6);
  }
}

@media (width >= 48rem) {
  .md\:w-40 {
    width: calc(var(--space) * 40);
  }

  .md\:h-40 {
    height: calc(var(--space) * 40);
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }

  .md\:gap-8 {
    gap: calc(var(--space) * 8);
  }

  .md\:justify-end {
    justify-content: end;
  }

  .md\:items-end {
    align-items: end;
  }

  .md\:left-1\/4 {
    left: calc(1 / 4 * 100%);
  }

  .md\:right-30 {
    right: calc(var(--space) * 30);
  }

  .md\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl-line-height);
  }
  .md\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl-line-height);
  }
  .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl-line-height);
  }
  .md\:text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl-line-height);
  }

  .md\:text-start {
    text-align: start;
  }
  .md\:text-end {
    text-align: end;
  }

  .md\:mx-0 {
    margin-inline: calc(var(--space) * 0);
  }

  .md\:pt-8 {
    padding-top: calc(var(--space) * 8);
  }

  .dark .md\:dark\:text-white,
  .md\:text-white {
    color: #fff;
  }
}

@media (width >= 64rem) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  .lg\:px-8 {
    padding-inline: calc(var(--space) * 8);
  }
  .lg\:text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--text-7xl-line-height);
  }
}

/* 1. Define the keyframes */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-20%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}