@layer base, components, utilities, overrides;

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

@supports (-moz-appearance:none){
  *{
    scrollbar-color: initial;
    scrollbar-width: initial;
  }
}

:root {
  --font-roboto: 'Roboto', sans-serif;
  --mgt-dark: #1e1e1e;
  --mgt-color-primary: #FFB34A;
  --mgt-color-teal: #14B8A6;
  --mgt-color-error: #FB7185;
  --mgt-color-link: #FFD78A;
  --mgt-color-link-hover: var(--mgt-color-primary);
  /** variable from figma **/
  --Type-Font-Weight-Light: "light";
  --Type-Font-Family-Heading: "Roboto";
  --Type-letter-spacing-sm: 1px;
  --Type-letter-spacing-md: 2px;
  --Type-letter-spacing-lg: 4px;
  --Type-letter-spacing-xl: 8px;
  --Type-Font-Family-Body: "Roboto";
  --Type-Font-Weight-Regular: "regular";
  --Type-Font-Weight-Medium: "medium";
  --Type-Font-Weight-Bold: "bold";
  --Colors-Slate-50: rgb(247, 250, 252);
  --Colors-Gray-50: rgb(250, 250, 250);
  --Colors-Orange-50: rgb(255, 247, 237);
  --Colors-Yellow-50: rgb(255, 247, 230);
  --Colors-Teal-50: rgb(240, 252, 250);
  --Colors-Blue-50: rgb(240, 245, 255);
  --Colors-Violet-50: rgb(245, 242, 255);
  --Colors-Rose-50: rgb(255, 242, 242);
  --Colors-Rose-100: rgb(255, 227, 230);
  --Colors-Rose-200: rgb(255, 204, 212);
  --Colors-Rose-300: rgb(252, 163, 176);
  --Colors-Rose-400: rgb(250, 112, 133);
  --Colors-Rose-500: rgb(245, 64, 94);
  --Colors-Rose-600: rgb(224, 28, 71);
  --Colors-Rose-700: rgb(191, 18, 61);
  --Colors-Rose-800: rgb(158, 18, 56);
  --Colors-Rose-900: rgb(135, 18, 56);
  --Colors-Rose-950: rgb(77, 5, 26);
  --Colors-Violet-100: rgb(237, 232, 255);
  --Colors-Violet-200: rgb(222, 214, 255);
  --Colors-Violet-300: rgb(196, 181, 252);
  --Colors-Violet-400: rgb(166, 140, 250);
  --Colors-Violet-500: rgb(140, 92, 245);
  --Colors-Violet-600: rgb(125, 59, 237);
  --Colors-Violet-700: rgb(110, 41, 217);
  --Colors-Violet-800: rgb(92, 33, 181);
  --Colors-Violet-900: rgb(77, 28, 148);
  --Colors-Violet-950: rgb(46, 15, 102);
  --Colors-Blue-100: rgb(219, 235, 255);
  --Colors-Blue-200: rgb(191, 219, 255);
  --Colors-Blue-300: rgb(148, 196, 252);
  --Colors-Blue-400: rgb(97, 166, 250);
  --Colors-Blue-500: rgb(59, 130, 245);
  --Colors-Blue-600: rgb(38, 99, 235);
  --Colors-Blue-700: rgb(28, 79, 217);
  --Colors-Blue-800: rgb(31, 64, 176);
  --Colors-Blue-900: rgb(31, 59, 138);
  --Colors-Blue-950: rgb(23, 38, 84);
  --Colors-Teal-100: rgb(204, 250, 242);
  --Colors-Teal-200: rgb(153, 245, 227);
  --Colors-Teal-300: rgb(94, 235, 212);
  --Colors-Teal-400: rgb(46, 212, 191);
  --Colors-Teal-500: rgb(20, 184, 166);
  --Colors-Teal-600: rgb(13, 148, 135);
  --Colors-Teal-700: rgb(15, 117, 110);
  --Colors-Teal-800: rgb(18, 94, 89);
  --Colors-Teal-900: rgb(18, 79, 74);
  --Colors-Teal-950: rgb(5, 46, 46);
  --Colors-Yellow-100: rgb(255, 232, 184);
  --Colors-Yellow-200: rgb(255, 214, 138);
  --Colors-Yellow-300: rgb(255, 199, 102);
  --Colors-Yellow-400: rgb(255, 179, 74);
  --Colors-Yellow-500: rgb(242, 161, 54);
  --Colors-Yellow-600: rgb(207, 133, 28);
  --Colors-Yellow-700: rgb(158, 102, 10);
  --Colors-Yellow-800: rgb(110, 71, 0);
  --Colors-Yellow-900: rgb(61, 41, 0);
  --Colors-Yellow-950: rgb(13, 10, 0);
  --Colors-Orange-100: rgb(255, 237, 214);
  --Colors-Orange-200: rgb(255, 214, 171);
  --Colors-Orange-300: rgb(252, 186, 115);
  --Colors-Orange-400: rgb(250, 145, 61);
  --Colors-Orange-500: rgb(250, 115, 23);
  --Colors-Orange-600: rgb(235, 89, 13);
  --Colors-Orange-700: rgb(194, 64, 13);
  --Colors-Orange-800: rgb(153, 51, 18);
  --Colors-Orange-900: rgb(125, 46, 18);
  --Colors-Orange-950: rgb(66, 20, 8);
  --Colors-Gray-100: rgb(245, 245, 245);
  --Colors-Gray-200: rgb(230, 230, 230);
  --Colors-Gray-300: rgb(212, 212, 212);
  --Colors-Gray-400: rgb(168, 163, 158);
  --Colors-Gray-500: rgb(120, 112, 107);
  --Colors-Gray-600: rgb(87, 84, 79);
  --Colors-Gray-700: rgb(64, 64, 64);
  --Colors-Gray-800: rgb(41, 38, 36);
  --Colors-Gray-850: rgb(31, 31, 31);
  --Colors-Gray-900: rgb(28, 26, 23);
  --Colors-Gray-925: rgb(18, 18, 15);
  --Colors-Gray-950: rgb(10, 10, 10);
  --Colors-Slate-100: rgb(242, 245, 250);
  --Colors-Slate-200: rgb(227, 232, 240);
  --Colors-Slate-300: rgb(204, 214, 224);
  --Colors-Slate-400: rgb(148, 163, 184);
  --Colors-Slate-500: rgb(99, 115, 140);
  --Colors-Slate-600: rgb(71, 84, 105);
  --Colors-Slate-700: rgb(51, 64, 84);
  --Colors-Slate-800: rgb(31, 41, 59);
  --Colors-Slate-900: rgb(15, 23, 41);
  --Colors-Slate-950: rgb(3, 5, 23);
  --White: rgb(255, 255, 255);
  --Black: rgb(0, 0, 0);
  --Scale-0: 0;
  --Scale-25: 1px;
  --Scale-50: 2px;
  --Scale-100: 4px;
  --Scale-200: 8px;
  --Scale-300: 12px;
  --Scale-400: 16px;
  --Scale-500: 20px;
  --Scale-600: 24px;
  --Scale-700: 28px;
  --Scale-800: 32px;
  --Scale-900: 36px;
  --Scale-1000: 40px;
  --Scale-1100: 44px;
  --Scale-1200: 48px;
  --Scale-1300: 52px;
  --Scale-1400: 56px;
  --Scale-1500: 60px;
  --Scale-1600: 64px;
  --Layout-1-of-12: 1px;
  --Layout-2-of-12: 2px;
  --Layout-3-of-12: 3px;
  --Layout-4-of-12: 4px;
  --Layout-5-of-12: 5px;
  --Layout-6-of-12: 6px;
  --Layout-7-of-12: 7px;
  --Layout-8-of-12: 8px;
  --Layout-9-of-12: 9px;
  --Layout-10-of-12: 10px;
  --Layout-11-of-12: 11px;
  --Layout-12-of-12: 12px;
  --Colors-Cyan-50: rgb(237, 255, 255);
  --Colors-Cyan-100: rgb(207, 250, 255);
  --Colors-Cyan-200: rgb(166, 242, 252);
  --Colors-Cyan-300: rgb(102, 232, 250);
  --Colors-Cyan-400: rgb(33, 212, 237);
  --Colors-Cyan-500: rgb(5, 181, 212);
  --Colors-Cyan-600: rgb(8, 145, 179);
  --Colors-Cyan-700: rgb(13, 115, 143);
  --Colors-Cyan-800: rgb(20, 94, 117);
  --Colors-Cyan-900: rgb(23, 79, 99);
  --Colors-Cyan-950: rgb(8, 51, 69);
  --Type-Font-Weight-Semibold: "SemiBold";
  --Title-Example: "The quick brown fox jumps over the lazy dog.";
  --Paragraph-Example: "So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.";
  --Boolean: 1;
  --Text-FontSize-Body-xs: 10px;
  --Text-FontSize-Body-sm: 14px;
  --Text-Spacing-Body-sm: 14px;
  --Text-Spacing-Body-md: 16px;
  --Text-Spacing-Body-lg: 20px;
  --Text-Spacing-Heading-xs: 24px;
  --Text-Spacing-Heading-sm: 28px;
  --Text-Spacing-Heading-md: 32px;
  --Text-Spacing-Heading-lg: 36px;
  --Text-Spacing-Heading-xl: 40px;
  --Text-Spacing-Heading-xxl: 48px;
  --Text-FontSize-Body-md: 16px;
  --Text-FontSize-Body-lg: 20px;
  --Text-FontSize-Heading-xs: 20px;
  --Text-FontSize-Heading-sm: 24px;
  --Text-FontSize-Heading-md: 32px;
  --Text-FontSize-Heading-lg: 40px;
  --Text-FontSize-Heading-xl: 48px;
  --Text-FontSize-Heading-xxl: 60px;
  --Text-Lineheight-Body-xs: 16px;
  --Text-Lineheight-Body-sm: 20px;
  --Text-Lineheight-Heading-xs: 24px;
  --Text-Lineheight-Heading-sm: 28px;
  --Text-Lineheight-Heading-md: 40px;
  --Text-Lineheight-Heading-lg: 48px;
  --Text-Lineheight-Heading-xl: 60px;
  --Text-Lineheight-Heading-xxl: 72px;
  --Text-Lineheight-Body-md: 24px;
  --Text-Lineheight-Body-lg: 32px;
  --Screen-sm: 640px;
  --Screen-md: 768px;
  --Screen-lg: 1024px;
  --Screen-xl: 1280px;
  --Screen-xxl: 1536px;
  --Text-FontSize-Display-xs: 20px;
  --Text-FontSize-Display-sm: 36px;
  --Text-FontSize-Display-md: 54px;
  --Text-FontSize-Display-lg: 80px;
  --Text-FontSize-Display-xl: 120px;
  --Text-FontSize-Display-xxl: 180px;
  --Text-Lineheight-Display-xs: 24px;
  --Text-Lineheight-Display-sm: 44px;
  --Text-Lineheight-Display-md: 64px;
  --Text-Lineheight-Display-lg: 96px;
  --Text-Lineheight-Display-xl: 144px;
  --Text-Lineheight-Display-xxl: 216px;
  --Text-Spacing-Display-xs: 24px;
  --Text-Spacing-Display-sm: 30px;
  --Text-Spacing-Display-md: 44px;
  --Text-Spacing-Display-lg: 66px;
  --Text-Spacing-Display-xl: 100px;
  --Text-Spacing-Display-xxl: 150px;
  --Number: var(--Scale-400);
  --Neutral-50: var(--Colors-Slate-50);
  --Primary-50: var(--Colors-Yellow-50);
  --Primary-100: var(--Colors-Yellow-100);
  --Primary-200: var(--Colors-Yellow-200);
  --Primary-300: var(--Colors-Yellow-300);
  --Primary-400: var(--Colors-Yellow-400);
  --Primary-500: var(--Colors-Yellow-500);
  --Primary-600: var(--Colors-Yellow-600);
  --Primary-700: var(--Colors-Yellow-700);
  --Primary-800: var(--Colors-Yellow-800);
  --Primary-900: var(--Colors-Yellow-900);
  --Primary-950: var(--Colors-Yellow-950);
  --Secondary-50: var(--Colors-Teal-50);
  --Secondary-100: var(--Colors-Teal-100);
  --Secondary-200: var(--Colors-Teal-200);
  --Secondary-300: var(--Colors-Teal-300);
  --Secondary-400: var(--Colors-Teal-400);
  --Secondary-500: var(--Colors-Teal-500);
  --Secondary-600: var(--Colors-Teal-600);
  --Secondary-700: var(--Colors-Teal-700);
  --Secondary-800: var(--Colors-Teal-800);
  --Secondary-900: var(--Colors-Teal-900);
  --Secondary-950: var(--Colors-Teal-950);
  --Info-50: var(--Colors-Blue-50);
  --Info-100: var(--Colors-Blue-100);
  --Info-200: var(--Colors-Blue-200);
  --Info-300: var(--Colors-Blue-300);
  --Info-400: var(--Colors-Blue-400);
  --Info-500: var(--Colors-Blue-500);
  --Info-600: var(--Colors-Blue-600);
  --Info-700: var(--Colors-Blue-700);
  --Info-800: var(--Colors-Blue-800);
  --Info-900: var(--Colors-Blue-900);
  --Info-950: var(--Colors-Blue-950);
  --Neutral-100: var(--Colors-Slate-100);
  --Neutral-200: var(--Colors-Slate-200);
  --Neutral-300: var(--Colors-Slate-300);
  --Neutral-400: var(--Colors-Slate-400);
  --Neutral-500: var(--Colors-Slate-500);
  --Neutral-600: var(--Colors-Slate-600);
  --Neutral-700: var(--Colors-Slate-700);
  --Neutral-800: var(--Colors-Slate-800);
  --Neutral-900: var(--Colors-Slate-800);
  --Neutral-950: var(--Colors-Slate-950);
  --Success-50: var(--Colors-Teal-50);
  --Success-100: var(--Colors-Teal-100);
  --Success-200: var(--Colors-Teal-200);
  --Success-300: var(--Colors-Teal-300);
  --Success-400: var(--Colors-Teal-400);
  --Success-500: var(--Colors-Teal-500);
  --Success-600: var(--Colors-Teal-600);
  --Success-700: var(--Colors-Teal-700);
  --Success-800: var(--Colors-Teal-800);
  --Success-900: var(--Colors-Teal-900);
  --Success-950: var(--Colors-Teal-950);
  --Warning-50: var(--Colors-Orange-50);
  --Warning-100: var(--Colors-Orange-100);
  --Warning-200: var(--Colors-Orange-200);
  --Warning-300: var(--Colors-Orange-300);
  --Warning-400: var(--Colors-Orange-400);
  --Warning-500: var(--Colors-Orange-500);
  --Warning-600: var(--Colors-Orange-600);
  --Warning-700: var(--Colors-Orange-700);
  --Warning-800: var(--Colors-Orange-800);
  --Warning-900: var(--Colors-Orange-900);
  --Warning-950: var(--Colors-Orange-950);
  --Error-50: var(--Colors-Rose-50);
  --Error-100: var(--Colors-Rose-100);
  --Error-200: var(--Colors-Rose-200);
  --Error-300: var(--Colors-Rose-300);
  --Error-400: var(--Colors-Rose-400);
  --Error-500: var(--Colors-Rose-500);
  --Error-600: var(--Colors-Rose-600);
  --Error-700: var(--Colors-Rose-700);
  --Error-800: var(--Colors-Rose-800);
  --Error-900: var(--Colors-Rose-900);
  --Error-950: var(--Colors-Rose-950);
  --Basic-White: var(--White);
  --Basic-Black: var(--Black);
  --Border-Width-none: var(--Scale-0);
  --Border-Width-sm: var(--Scale-25);
  --Border-Width-md: var(--Scale-50);
  --Border-Width-lg: var(--Scale-100);
  --Border-Radius-none: var(--Scale-0);
  --Border-Width-xl: var(--Scale-200);
  --Border-Radius-xs: var(--Scale-50);
  --Border-Radius-sm: var(--Scale-100);
  --Border-Radius-md: var(--Scale-200);
  --Border-Radius-lg: var(--Scale-300);
  --Border-Radius-xl: var(--Scale-400);
  --Border-Radius-2xl: var(--Scale-500);
  --Border-Radius-rounded: var(--Scale-1600);
  --Text-Headings: var(--Basic-White);
  --Text-Body: var(--Colors-Gray-400);
  --Text-Link: var(--Primary-200);
  --Text-Link-Hover: var(--Primary-400);
  --Text-Link-Disabled: var(--Colors-Gray-400);
  --Text-Info: var(--Info-400);
  --Text-Success: var(--Success-400);
  --Text-Warning: var(--Warning-400);
  --Text-Error: var(--Error-400);
  --Text-Action-Primary-Solid: var(--Neutral-950);
  --Text-Action-Primary-Text: var(--Primary-400);
  --Text-Action-Secondary-Solid: var(--Colors-Gray-900);
  --Text-Action-Secondary-Text: var(--Secondary-400);
  --Text-Action-Disabled-Solid: var(--Colors-Gray-800);
  --Surface-Body: var(--Colors-Gray-925);
  --Text-Action-Disabled-Text: var(--Colors-Gray-600);
  --Text-Action-Light-Solid: var(--Colors-Gray-800);
  --Text-Action-Light-Text: var(--Basic-White);
  --Text-Action-Dark-Solid: var(--Colors-Gray-50);
  --Text-Action-Dark-Text: var(--Colors-Gray-900);
  --Surface-Page: var(--Colors-Gray-850);
  --Surface-Primary: var(--Primary-400);
  --Surface-Primary-Hover: var(--Primary-500);
  --Surface-Secondary: var(--Secondary-500);
  --Surface-Secondary-Hover: var(--Secondary-600);
  --Surface-Info: var(--Info-500);
  --Surface-Success: var(--Success-100);
  --Surface-Warning: var(--Warning-100);
  --Surface-Error: var(--Error-100);
  --Surface-Disabled: var(--Colors-Gray-600);
  --Surface-Light: var(--Basic-White);
  --Surface-Light-Hover: var(--Colors-Gray-300);
  --Surface-Dark: var(--Colors-Gray-800);
  --Surface-Dark-Hover: var(--Colors-Gray-900);
  --Icon-Primary: var(--Primary-400);
  --Border-Primary: var(--Primary-400);
  --Border-Primary-Hover: var(--Primary-500);
  --Border-Info: var(--Info-100);
  --Border-Success: var(--Success-100);
  --Border-Warning: var(--Warning-100);
  --Border-Error: var(--Error-100);
  --Border-Disabled: var(--Neutral-100);
  --Icon-Body: var(--Colors-Gray-400);
  --Icon-Info: var(--Info-400);
  --Icon-Secondary: var(--Secondary-400);
  --Icon-Success: var(--Success-400);
  --Icon-Warning: var(--Warning-400);
  --Icon-Error: var(--Error-500);
  --Icon-Action-Primary-Solid: var(--Colors-Gray-950);
  --Icon-Action-Primary-Text: var(--Primary-400);
  --Icon-Action-Secondary-Solid: var(--Colors-Gray-900);
  --Icon-Action-Secondary-Text: var(--Secondary-400);
  --Icon-Action-Disabled-Solid: var(--Colors-Gray-400);
  --Icon-Action-Disabled-Text: var(--Colors-Gray-600);
  --Spacing-3xs: var(--Scale-50);
  --Spacing-2xs: var(--Scale-100);
  --Spacing-xs: var(--Scale-200);
  --Spacing-sm: var(--Scale-300);
  --Spacing-md: var(--Scale-400);
  --Spacing-lg: var(--Scale-600);
  --Spacing-xl: var(--Scale-800);
  --Spacing-2xl: var(--Scale-1200);
  --Spacing-3xl: var(--Scale-1600);
  --swiper-pagination-bottom: 32px;
  --swiper-pagination-color: #FFFFFF;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.4;
}

html, body {
  padding: 0 !important;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.bottom-0{
  bottom: 0px;
}

.right-3\.5{
  right: 0.875rem;
}

.top-3{
  top: 0.75rem;
}

.z-10{
  z-index: 10;
}

.m-4{
  margin: 1rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.hidden{
  display: none;
}

.h-6{
  height: 1.5rem;
}

.h-full{
  height: 100%;
}

.min-h-\[29px\]{
  min-height: 29px;
}

.min-h-\[470px\]{
  min-height: 470px;
}

.w-6{
  width: 1.5rem;
}

.w-\[calc\(72\%-52px\)\]{
  width: calc(72% - 52px);
}

.w-full{
  width: 100%;
}

.max-w-\[500px\]{
  max-width: 500px;
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.flex-col{
  flex-direction: column;
}

.items-center{
  align-items: center;
}

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

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.text-nowrap{
  text-wrap: nowrap;
}

.rounded-2xl{
  border-radius: 1rem;
}

.border{
  border-width: 1px;
}

.border-none{
  border-style: none;
}

.bg-mgt-dark{
  background-color: var(--mgt-dark);
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-\[60px\]{
  padding-top: 60px;
  padding-bottom: 60px;
}

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

.font-roboto{
  font-family: var(--font-roboto), sans-serif;
}

.text-\[1\.25rem\]{
  font-size: 1.25rem;
}

.text-\[1rem\]{
  font-size: 1rem;
}

.text-\[3rem\]{
  font-size: 3rem;
}

.text-\[91\%\]{
  font-size: 91%;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.uppercase{
  text-transform: uppercase;
}

.leading-\[60px\]{
  line-height: 60px;
}

.leading-normal{
  line-height: 1.5;
}

.text-mgt-link{
  color: var(--mgt-color-link);
}

.text-rose-500{
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}

.text-stone-400{
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-rose-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity, 1));
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ot-header {
  display: none;
}

.mgt-theme .bg-surface-page {
  background: var(--Surface-Page);
}

/** theme */

.mgt-theme .auth{
  margin: 1rem;
  flex-direction: column;
}

@media (min-width: 1280px){
  .mgt-theme .auth{
    display: flex;
    height: 100dvh;
    max-height: calc(100dvh - 32px);
    flex-direction: row;
  }
}

.mgt-theme .auth-form{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 640px){
  .mgt-theme .auth-form{
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px){
  .mgt-theme .auth-form{
    height: auto;
  }
}

@media (min-width: 1280px){
  .mgt-theme .auth-form{
    width: 40%;
    flex: none;
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

.mgt-theme .auth-form__container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 768px){
  .mgt-theme .auth-form__container{
    max-width: 638px;
  }
}

@media (min-width: 1024px){
  .mgt-theme .auth-form__container{
    max-width: 409px;
  }
}

.mgt-theme .auth-form__content{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.mgt-theme .auth-form__content > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.mgt-theme .auth-form__form-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

@media (min-width: 1024px){
  .mgt-theme .auth-form__form-wrapper{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.mgt-theme .auth-form__title{
  margin-bottom: 0.5rem;
  font-size: 3rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 60px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.mgt-theme .auth-form__subtitle{
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.mgt-theme .auth-form__subtitle--mb-none{
  margin-bottom: 0px;
}

.mgt-theme .auth-form__forgot-password{
  color: var(--mgt-color-link);
  text-decoration-line: underline;
}

.mgt-theme .auth-form__forgot-password:hover{
  color: var(--mgt-color-link-hover);
}

.mgt-theme .auth-form__remember-link{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.mgt-theme .auth-preview{
  position: relative;
  display: none;
  height: 100%;
  flex-direction: column;
  border-radius: 1rem;
  background-color: var(--mgt-dark);
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (min-width: 768px){
  .mgt-theme .auth-preview{
    display: block;
    padding-left: 52px;
    padding-right: 52px;
  }
}

@media (min-width: 1024px){
  .mgt-theme .auth-preview{
    flex: 1 1 0%;
    overflow: hidden;
  }
}

@media (min-width: 1280px){
  .mgt-theme .auth-preview{
    display: flex;
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.mgt-theme .auth-preview__container{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 260px);
  padding-top: 32px;
  padding-bottom: 32px;
}

.mgt-theme .auth-preview__content{
  height: 100%;
  width: 100%;
  align-content: center;
}

.mgt-theme .slider-content{
  height: 100%;
  width: 100%;
  flex-direction: column;
}

@media (min-width: 1280px){
  .mgt-theme .slider-content{
    display: grid;
    grid-template-rows: auto auto;
  }
}

@media (min-width: 1536px){
  .mgt-theme .slider-content{
    align-items: flex-start;
  }
}

.mgt-theme .slider-content__image-web{
  margin-left: auto;
  margin-right: auto;
  display: none;
  min-height: 470px;
  width: calc(72% - 52px);
}

@media (min-width: 768px){
  .mgt-theme .slider-content__image-web{
    display: block;
    max-height: 640px;
  }
}

@media (min-width: 1280px){
  .mgt-theme .slider-content__image-web{
    max-height: calc(100dvh - 60px - 85px - 32px - 128px - 32px);
  }
}

.slider-content__image-wrapper.slider-content__image-wrapper--slider-1 {
  position: relative;
  justify-content: center;
  display: flex;
}

.slider-content__image-wrapper.slider-content__image-wrapper--slider-2 {
  position: relative;
  justify-content: center;
  display: flex;
}

.slider-content__image-feature{
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.mgt-theme .slider-content__info{
  position: relative;
  margin-left: 1rem;
  margin-right: 1rem;
}

.mgt-theme .slider-content__info > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.mgt-theme .slider-content__info{
  text-align: center;
}

@media (min-width: 640px){
  .mgt-theme .slider-content__info{
    margin-left: 0px;
    margin-right: 0px;
  }
}

.mgt-theme .slider-content__title{
  min-height: 29px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.mgt-theme .slider-content__subtitle{
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.mgt-theme .slider-content__image-web{
  margin-left: auto;
  margin-right: auto;
  display: none;
  min-height: 470px;
  width: calc(72% - 52px);
}

@media (min-width: 768px){
  .mgt-theme .slider-content__image-web{
    display: block;
    max-height: 640px;
  }
}

@media (min-width: 1280px){
  .mgt-theme .slider-content__image-web{
    max-height: calc(100dvh - 60px - 85px - 32px - 128px - 32px);
  }
}

.mgt-theme .swiper-pagination {
  position: relative;
  bottom: auto !important;
}

.mgt-theme .auth-form__footer-wrapper > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.mgt-theme .auth-form__footer-wrapper{
  text-align: center;
}

.mgt-theme .auth-form__footer-dont-have-an-account{
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: center;
  font-family: var(--font-roboto), sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
}

.mgt-theme .auth-form__terms-and-conditions{
  display: inline-flex;
  color: var(--mgt-color-link);
  text-decoration-line: underline;
}

.mgt-theme .auth-form__terms-and-conditions:hover{
  color: var(--mgt-color-link-hover);
}

.mgt-theme .checkbox-container__input ~ label::before {
  transition: none;
}

.mgt-theme .checkbox-container__label{
  text-wrap: nowrap;
  font-size: 91%;
  letter-spacing: -0.05em;
}

@media (min-width: 768px){
  .mgt-theme .checkbox-container__label{
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.mgt-theme .checkbox-container__input:checked ~ label::before {
  content: '';
  background-image: url(/wp-content/themes/megatrader-addons/assets/img/checked.svg);
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.mgt-theme .password-wrapper{
  position: relative;
}

.mgt-theme .password-wrapper__password{
  padding-right: 3rem;
}

.mgt-theme .password-wrapper__btn_eye{
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  z-index: 10;
  height: 1.5rem;
  width: 1.5rem;
  border-style: none;
  background-color: transparent;
  -webkit-mask-image: url('/wp-content/themes/megatrader-addons/assets/img/eye-close.svg');
  mask-image: url('/wp-content/themes/megatrader-addons/assets/img/eye-close.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: #a8a29e;
}

.mgt-theme .password-wrapper__password[type=text] ~ .password-wrapper__btn_eye {
  -webkit-mask-image: url('/wp-content/themes/megatrader-addons/assets/img/eye-open.svg');
  mask-image: url('/wp-content/themes/megatrader-addons/assets/img/eye-open.svg');
}

.mgt-theme .auth-form__error_message{
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}

.mgt-theme .form-control.auth-form--error-message{
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity, 1));
}

.mgt-theme .checkbox-container--label-inline{
  display: inline;
}

.mgt-theme .auth-form__phone-wrapper .iti--allow-dropdown{
  width: 100%;
}

.mgt-theme .auth-form__content .woocommerce-notices-wrapper .woocommerce-message {
  margin: 0;
}

.mgt-theme .full-name-wrapper{
  display: flex;
  gap: 1rem;
}

.mgt-theme .auth-form__container{
  display: flex;
  gap: 1rem;
}

.mgt-theme .full-name-wrapper__field{
  width: 100%;
}

.mgt-theme .auth--full-height{
  height: 100%;
  max-height: 100%;
}

/* Imagen del mockup */

.responsive-image {
  max-width: min(55%, 880px);
  height: auto;
  max-height: calc(100dvh - 360px);
  /* reduce un poco más la altura total */
  margin-bottom: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Pantallas medianas y grandes */

@media (min-width: 1024px) {
  .responsive-image {
    max-width: min(52%, 840px);
    max-height: calc(100dvh - 340px);
  }
}

@media (min-width: 1280px) {
  .responsive-image {
    max-width: min(50%, 800px);
    max-height: calc(100dvh - 320px);
  }
}

@media (min-width: 1536px) {
  .responsive-image {
    max-width: min(48%, 780px);
    max-height: calc(100dvh - 300px);
  }
}

.hover\:text-mgt-link-hover:hover{
  color: var(--mgt-color-link-hover);
}

@media (min-width: 640px){
  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px){
  .md\:block{
    display: block;
  }

  .md\:h-auto{
    height: auto;
  }

  .md\:max-h-\[640px\]{
    max-height: 640px;
  }

  .md\:max-w-\[638px\]{
    max-width: 638px;
  }

  .md\:px-\[52px\]{
    padding-left: 52px;
    padding-right: 52px;
  }

  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1024px){
  .lg\:max-w-\[409px\]{
    max-width: 409px;
  }

  .lg\:flex-1{
    flex: 1 1 0%;
  }

  .lg\:overflow-hidden{
    overflow: hidden;
  }
}

@media (min-width: 1280px){
  .xl\:flex{
    display: flex;
  }

  .xl\:grid{
    display: grid;
  }

  .xl\:h-auto{
    height: auto;
  }

  .xl\:h-dvh{
    height: 100dvh;
  }

  .xl\:max-h-\[calc\(100dvh-32px\)\]{
    max-height: calc(100dvh - 32px);
  }

  .xl\:max-h-\[calc\(100dvh-60px-85px-32px-128px-32px\)\]{
    max-height: calc(100dvh - 60px - 85px - 32px - 128px - 32px);
  }

  .xl\:w-2\/5{
    width: 40%;
  }

  .xl\:flex-none{
    flex: none;
  }

  .xl\:grid-rows-\[auto_auto\]{
    grid-template-rows: auto auto;
  }

  .xl\:py-\[32px\]{
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media (min-width: 1536px){
  .\32xl\:items-start{
    align-items: flex-start;
  }
}