/**
Theme Name: Xbyteio-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xbyteio-child
Template: astra
*/

/* Light - 300 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular - 400 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium - 500 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold - 600 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold - 700 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ExtraBold - 800 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Black - 900 */
@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("./assets/red-fonts/RedHatDisplay-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* <!-- ***** Font Families ***** --> */
    --xbyte-font-red-hat: "Red Hat Display";
    --xbyte-font-primary: var(--xbyte-font-red-hat);
    --xbyte-blog-font-family: "Red Hat Display";
    --swiper-theme-color: #ffffff !important;


    /* <!-- ***** Font Weights ***** --> */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-xbold: 800;
    --xbyte-font-regular: 400;
    --xbyte-font-medium: 500;
    --xbyte-font-semibold: 600;
    --xbyte-font-bold: 700;
    --xbyte-font-extrabold: 800;

    /* <!-- ***** Font Styles ***** --> */
    --xbyte-font-style-normal: normal;
    --xbyte-font-style-italic: italic;
    --xbyte-font-style-oblique: oblique;

    /* <!-- ***** Responsive Font Sizes ***** --> */
    --fs-14: 14px;
    --fs-12: 12px;
    --fs-120: 100px;
    --fs-h1: clamp(2.5rem, 5vw, 56px);
    /* 40px → 56px */
    --fs-h2: clamp(2rem, 4vw, 42px);
    /* 32px → 48px */
    --fs-h3: clamp(1.5rem, 3vw, 32px);
    /* 24px → 32px */
    --fs-h4: clamp(1.25rem, 2.5vw, 24px);
    /* 20px → 24px */
    --fs-h5: clamp(1.125rem, 2vw, 20px);
    /* 18px → 20px */
    --fs-h6: clamp(1rem, 1.5vw, 16px);
    /* 16px */
    --fs-body: clamp(1rem, 1.2vw, 16px);
    /* 16px → 18px */
    --fs-small: clamp(.875rem, 1vw, 14px);
    /* 14px → 15px */
    --fs-medium: clamp(1rem, 1.5vw, 18px);
    /* 16px → 18px */
    --fs-large: clamp(2rem, 4vw, 48px);
    /* 32px → 48px */
    --fs-40: clamp(28px, 3.5vw, 40px);
    --xbyte-font-120: clamp(56px, calc(37.71px + 5.71vw), 120px);
    --xbyte-font-56: clamp(36px, calc(30.29px + 1.79vw), 56px);
    --xbyte-font-48: clamp(32px, calc(27.43px + 1.43vw), 48px);
    --xbyte-font-48: clamp(30px, calc(24.86px + 1.61vw), 48px);
    --xbyte-font-40: clamp(28px, calc(25.71px + 0.71vw), 40px);
    --xbyte-font-32: clamp(24px, calc(21.71px + 0.71vw), 32px);
    --xbyte-font-24: clamp(20px, calc(18.86px + 0.36vw), 24px);
    --xbyte-font-20: clamp(18px, calc(17.43px + 0.18vw), 20px);
    --xbyte-font-18: clamp(16px, calc(15.43px + 0.18vw), 18px);
    --xbyte-font-16: clamp(15px, calc(14.71px + 0.09vw), 16px);
    --xbyte-font-14: clamp(13px, calc(12.71px + 0.09vw), 14px);
    --xbyte-font-12: 12px;

    /* <!-- ***** Line Heights ***** --> */
    --lh-h1: 1.12;
    --lh-h2: 1.2;
    --lh-h3: 1.25;
    --lh-h4: 1.35;
    --lh-h5: 1.4;
    --lh-h6: 1.45;
    --lh-body: 1.7;
    --lh-main: clamp(24px, calc(22.857px + 0.357vw), 28px);
    --lh-ex: clamp(44px, calc(34.857px + 2.857vw), 76px);
    --lh-ex1: clamp(28px, calc(26.857px + 0.357vw), 32px);
    --lh-ex22: clamp(20px, calc(19.314px + 0.214vw), 22.4px);
    --lh-ex3: clamp(22px, calc(21.086px + 0.286vw), 25.2px);
    --lh-ex4: clamp(32px, calc(29.143px + 0.893vw), 42px);
    --lh-ex5: clamp(44px, calc(38.286px + 1.786vw), 64px);
    --lh-h3-32: clamp(28px, calc(26.857px + 0.357vw), 32px);
    --lh-h2-76: clamp(44px, calc(34.857px + 2.857vw), 76px);
    --lh-h2-19: clamp(18px, calc(17.543px + 0.143vw), 19.6px);
    --lh-24: clamp(22px, calc(21.429px + 0.179vw), 24px);
    --lh-16: clamp(16px, calc(15.771px + 0.071vw), 16.8px);
    --lh-100: 100%;
    --lh-ex: clamp(48px, 6vw, 76px);
    --lh-ex1: clamp(24px, 3vw, 32px);
    --lh-ex22: clamp(22px, 2vw, 22.4px);
    --lh-ex3: clamp(24px, 2vw, 25.2px);
    --lh-ex4: clamp(32px, 4vw, 42px);
    --lh-ex5: clamp(42px, 5vw, 64px);
    --lh-36: clamp(28px, 4vw, 36px);
    --lh-34: clamp(28px, 3vw, 34px);
    --lh-54: clamp(40px, 5vw, 54px);
    --xbyte-line-76: clamp(52px, calc(45.14px + 2.143vw), 76px);
    --xbyte-line-64: clamp(46px, calc(40.86px + 1.607vw), 64px);
    --xbyte-line-54: clamp(40px, calc(36px + 1.25vw), 54px);
    --xbyte-line-50: clamp(38px, calc(34.57px + 1.071vw), 50px);
    --xbyte-line-42: clamp(34px, calc(31.71px + 0.714vw), 42px);
    --xbyte-line-36: clamp(30px, calc(28.29px + 0.536vw), 36px);
    --xbyte-line-34: clamp(28px, calc(26.29px + 0.536vw), 34px);
    --xbyte-line-32: clamp(27px, calc(25.57px + 0.446vw), 32px);
    --xbyte-line-28: clamp(24px, calc(22.86px + 0.357vw), 28px);
    --xbyte-line-25: clamp(22px, calc(21.09px + 0.286vw), 25.2px);
    --xbyte-line-24: clamp(21px, calc(20.14px + 0.268vw), 24px);
    --xbyte-line-21: clamp(19px, calc(18.43px + 0.179vw), 21px);
    --xbyte-line-22: clamp(20px, calc(19.31px + 0.214vw), 22.4px);
    --xbyte-line-20: clamp(18px, calc(17.43px + 0.179vw), 20px);
    --xbyte-line-19: clamp(18px, calc(17.54px + 0.143vw), 19.6px);
    --xbyte-line-16: clamp(16px, calc(15.77px + 0.071vw), 16.8px);
    --xbyte-line-67-2: 67.2px;
    --xbyte-line-44: 44px;
    --xbyte-line-16: 16px;
    --xbyte-line-26: 26px;
    --xbyte-line-11: 11px;
    --xbyte-line-100: 1;
    --xbyte-line-tight: 1.1;
    --xbyte-line-heading: 1.2;
    --xbyte-line-normal: 1.4;
    --xbyte-line-body: 1.6;

    /* <!-- ***** Letter Spacing ***** --> */
    --ls-h1: -1.2px;
    --ls-h2: -0.8px;
    --ls-h3: -0.4px;
    --ls-h4: -0.2px;
    --ls-body: 0px;
    --ls-small: 0.2px;
    --normal: 8%;
    --medium: 15%;
    --xbyte-letter-normal: 0;
    --xbyte-letter-4: 0.04em;
    --xbyte-letter-wide: 0.08em;
    --xbyte-letter-extra-wide: 0.24em;
    --xbyte-letter-12: 0.12em;
    --xbyte-letter-0: 0;
    --xbyte-letter-0: 0;
    --xbyte-letter-4: 0.04em;
    --xbyte-letter-8: 0.08em;
    --xbyte-letter-12: 0.12em;
    --xbyte-letter-24: 0.24em;
    --xbyte-letter-04: 0.4%;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: clamp(16px, 2vw, 20px);
    --space-24: clamp(20px, 2vw, 24px);
    --space-32: clamp(24px, 3vw, 32px);
    --space-40: clamp(28px, 4vw, 40px);
    --space-48: clamp(32px, 5vw, 48px);
    --space-64: clamp(40px, 6vw, 64px);
    --space-80: clamp(50px, 8vw, 80px);

    /* <!-- ***** Colors ***** --> */
    --color-brand-red: #E22633;
    --color-primary-black: #070808;
    --color-dark-maroon: #5E181D;
    --color-white: #FFFFFF;
    --color-off-white: #FAFAFA;
    --color-light-grey: #E8E5EA;
    --color-medium-grey: #8D9193;
    --h1-white: #ffffff;
    --dark1: #1D1D1D;
    --red1: #E61F2D;
    --gray1: #808080;
    --h3-clr: #ffffff;
    --p: #4F4F4F;
    --p-small: #BDBDBD;
    --p-dark: #4F4F4F;
    --clr: #333333;
    --clr1: #1F1C1D;
    --clr2: #282828;
    --clr3: #828282;
    --clr4: #E0E0E0;
    --xbyte-color-black: #000000;
    --xbyte-color-white: #FFFFFF;
    --xbyte-color-primary: #E61F2D;
    --xbyte-color-light-grey: #BDBDBD;
    --xbyte-color-dark-grey: #333333;
    --xbyte-color-grey-2: #828282;
    --xbyte-color-dark: #1D1D1D;
    --xbyte-color-grey-3: #4F4F4F;
    --xbyte-color-dark-2: #1F1C1D;
    --xbyte-color-grey: #808080;
    --xbyte-color-text: #484343;
    --xbyte-color-heading: #282828;
    --xbyte-color-gray: #333333;
    --xbyte-color-light-gray: #BDBDBD;
    --xbyte-color-gray-600: #4F4F4F;
    --xbyte-color-dark-900: #1F1C1D;
    --xbyte-color-gray-500: #808080;
    --xbyte-color-charcoal: #484343;
    --xbyte-color-charcoal-dark: #282828;
    --xbyte-color-gray-200: #E0E0E0;
    --xbyte-color-gray-400: #828282;
    --xbyte-color-charcoal-1: #3B4040;
    --xbyte-color-light: #E2E2E2;
    --xbyte-color-dark-green: #1B1C1A;
    --xbyte-color-slate: #424656;

    /* <!-- ***** Semantic ***** --> */
    --color-heading: var(--color-primary-black);
    --color-text: var(--color-medium-grey);
    --color-border: var(--color-light-grey);
    --color-background: var(--color-white);
    --color-section: var(--color-off-white);
    --color-primary: var(--color-brand-red);

    /* <!-- ***** Additional Colors ***** --> */
    --xbyte-color-text-dark: #3B4040;
    --xbyte-color-border: #E2E2E2;
    --xbyte-color-heading-dark: #1B1C1A;
    --xbyte-color-secondary: #424656;
    --xbyte-color-dark-3: #202020;
    --xbyte-color-grey-light-2: #E0E0E0;
    --xbyte-color-white-transparent: #FFFFFF1A;
    --xbyte-color-white-solid: #FFFFFF;
    --xbyte-color-border-light: #EEEFEE;
    --xbyte-color-border-transparent: #EEEFEE5C;
    --xbyte-color-border-grey: #BDBDBD;
    --xbyte-color-border-grey-light: #F6F6F6;
    --xbyte-color-off-white: #F5F5F5;
    --xbyte-color-bg-light: #FBFBFB;
    --xbyte-color-grey-light: #E0E0E0;

    /* <!-- ***** Text Alignment ***** --> */
    --xbyte-text-left: left;
    --xbyte-text-center: center;
    --xbyte-text-right: right;
    --xbyte-text-justify: justify;

    /* <!-- ***** Vertical Alignment ***** --> */
    --xbyte-vertical-top: top;
    --xbyte-vertical-middle: middle;
    --xbyte-vertical-bottom: bottom;

    /* <!-- *****  Text Transform ***** --> */
    --xbyte-text-normal: none;
    --xbyte-text-uppercase: uppercase;
    --xbyte-text-lowercase: lowercase;
    --xbyte-text-capitalize: capitalize;

    /* <!-- ***** Gradients ***** --> */
    --xbyte-gradient-white-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 82.22%);
    --xbyte-gradient-black-fade: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 50%, rgba(0, 0, 0, 0) 100%);
    --xbyte-gradient-dark: linear-gradient(180deg, #202020 0%, rgba(17, 17, 17, 0.0666667) 100%);
    --xbyte-gradient-red-border: linear-gradient(90deg, var(--xbyte-color-primary) 0%, rgba(0, 0, 0, 0) 100%);
    --xbyte-color-radial-dark: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);

    /* <!-- ***** Border ***** --> */
    --border-color: #f5f5f5;
    --border-color-2: #eaeaea;
    --text-muted: #777;
    --bg-tag: #f8f9fa;
    --accent-glow: rgba(255, 59, 48, 0.08);
    --bg-light-gray: #f5f5f5;
    --logo-text-color: #555555;
    --bg-dark: #0b0c10;
    --text-color: #cccccc;
    --accent-red: #c026d3;
    --timeline-line: rgba(255, 255, 255, 0.15);
    --red-dot: #E62533;
    --color-txt: hsl(236 35% 14%);
    --color-hover-txt: #000000;
    --color-shaded: hsla(0, 1%, 37%, 0.4);
    --xbyte-border-width-1: 1px;
    --xbyte-border-width-2: 2px;
    --xbyte-border-width-custom: 1.38px;
    --xbyte-border-solid: solid;

    /* <!-- ***** Border Radius ***** --> */
    --radius-sm: 4px;
    --radius-md: clamp(6px, 1vw, 8px);
    --radius-lg: clamp(8px, 2vw, 12px);
    --radius-xl: clamp(12px, 3vw, 20px);

    /* <!-- ***** Shadow ***** --> */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);

    /* <!-- ***** Spacing Top & Bottom ***** --> */
    --top: clamp(50px, 6vw, 80px);
    --bottom: clamp(50px, 6vw, 80px);
    --left: clamp(16px, 4vw, 35px);
    --right: clamp(16px, 4vw, 35px);
    --top1: 80px;
    --bottom1: 80px;

    /* <!-- ***** Transition ***** --> */
    --transition: all .3s ease;
    --xbyte-line-item-spacing-s-plus: normal;
    --xbyte-letter-minus-168: -1.68px;

    /* Font Size */
    --xbyte-blog-font-40: clamp(32px, calc(29.71px + 0.714vw), 40px);
    --xbyte-blog-font-36: clamp(30px, calc(28.29px + 0.536vw), 36px);
    --xbyte-blog-font-28: clamp(24px, calc(22.86px + 0.357vw), 28px);
    --xbyte-blog-font-24: clamp(20px, calc(18.86px + 0.357vw), 24px);
    --xbyte-blog-font-20: clamp(18px, calc(17.43px + 0.18vw), 20px);
    --xbyte-blog-font-18: clamp(16px, calc(15.43px + 0.18vw), 18px);
    --xbyte-blog-font-16: clamp(14px, calc(13.43px + 0.18vw), 16px);
    --xbyte-blog-font-14: clamp(13px, calc(12.71px + 0.089vw), 14px);

    /* Line Height */
    --xbyte-blog-line-54: clamp(46px, calc(43.71px + 0.714vw), 54px);
    --xbyte-blog-line-50: clamp(42px, calc(39.71px + 0.714vw), 50px);
    --xbyte-blog-line-38: clamp(34px, calc(32.86px + 0.357vw), 38px);
    --xbyte-blog-line-34: clamp(30px, calc(28.86px + 0.357vw), 34px);
    --xbyte-blog-line-32: clamp(28px, calc(26.86px + 0.357vw), 32px);
    --xbyte-blog-line-28: clamp(24px, calc(22.86px + 0.357vw), 28px);
    --xbyte-blog-line-26: clamp(22px, calc(20.86px + 0.357vw), 26px);
    --xbyte-blog-line-24: clamp(22px, calc(21.43px + 0.18vw), 24px);
    --xbyte-blog-line-22-4: clamp(20px, calc(19.31px + 0.214vw), 22.4px);
    --xbyte-blog-line-20: clamp(18px, calc(17.43px + 0.18vw), 20px);

    /* Font Weight */
    --xbyte-blog-font-regular: 400;
    --xbyte-blog-font-semibold: 600;

    /* Font Style */
    --xbyte-blog-font-style-normal: normal;
    --xbyte-blog-font-style-italic: italic;

    /* Letter Spacing */
    --xbyte-blog-letter-0: 0px;
    --xbyte-blog-letter-04: 0.4px;
    ;

    /* Colors */
    --xbyte-blog-color-heading: #1B1C1A;
    --xbyte-blog-color-heading-dark: #1D1D1D;
    --xbyte-blog-color-text: #424656;
    --xbyte-blog-color-text-light: #4F4F4F;

    /* <!-- ***** font-size-15, font-size-52.9 ,Line Heights :- 100% , 16px , 19 , 26 , 44 ***** --> */
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--xbyte-font-primary) !important;
    background-color: #ffffff !important;
}


/* <!-- ***** Comman class Name Root Start ***** --> */

/* 20px / Medium */
.typo-body-md-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / Regular */
.typo-body-md-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 56px / Medium */
.typo-display-xl-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 56px / Bold / Primary */
.typo-display-xl-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
    text-transform: uppercase;
}

/* 24px / SemiBold */
.typo-heading-lg-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 16px / Regular */
.typo-body-sm-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 18px / Medium */
.typo-body-base-medium {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / Bold */
.typo-display-lg-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* Google Sans Flex / 20px */
.typo-label-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 48px / Bold / 76px Line Height */
.typo-display-lg-bold-tall {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 20px / SemiBold */
.typo-body-md-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: justify;
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: justify;
}

/* 20px / Medium / Gray */
.typo-body-md-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / Medium / Dark */
.typo-body-md-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-900);
}

/* 56px / Bold / Black */
.typo-display-xl-bold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 20px / Medium / Uppercase */
.typo-label-md-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 48px / Medium / Uppercase */
.typo-display-lg-medium-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 48px / Bold / Primary */
.typo-display-lg-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
    text-transform: uppercase;
}

/* 16px / Bold */
.typo-body-sm-bold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 32px / SemiBold */
.typo-heading-xl-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / Muted */
.typo-body-md-semibold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light-gray);
}

/* 48px / Medium / Dark / Uppercase */
.typo-display-lg-medium-dark-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-dark);
    text-transform: uppercase;
}

/* 48px / Bold / Gray */
.typo-display-lg-bold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-gray-500);
    text-transform: uppercase;
}

/* 24px / SemiBold / Dark */
.typo-heading-lg-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray-1 {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 56px / Bold / White */
.typo-display-xl-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / ExtraBold */
.typo-display-lg-extrabold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: 800;
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Dark */
.typo-body-base-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 24px / SemiBold / Center / Uppercase */
.typo-heading-lg-uppercase-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 28px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
    text-align: center;
    text-transform: uppercase;
}

/* 24px / SemiBold / Center */
.typo-heading-lg-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 28px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
    text-align: center;
}

/* 16px / Regular / White */
.typo-body-sm-regular-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Regular / Right */
.typo-body-xs-regular-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: right;
}

/* 24px / SemiBold / Right */
.typo-heading-lg-semibold-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: right;
}

/* 32px / SemiBold */
.typo-heading-xl-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 20px / Regular / Gray */
.typo-body-md-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / SemiBold / Center */
.typo-body-md-semibold-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 18px / SemiBold */
.typo-body-base-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 12px / Regular */
.typo-caption-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-12);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / Medium / Gray */
.typo-body-md-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 20px / Medium / Dark */
.typo-body-md-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 14px / Regular */
.typo-body-xs-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 18px / Medium / Charcoal */
.typo-body-base-medium-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal-dark);
}

/* 56px / ExtraBold / Uppercase */
.typo-display-xl-extrabold-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    text-transform: uppercase;
}

/* 20px / Regular / Gray */
.typo-body-md-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / White */
.typo-heading-lg-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 36px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 24px / SemiBold / Dark */
.typo-heading-lg-semibold-dark-lg {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 48px / ExtraBold / White */
.typo-display-lg-extrabold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 24px / SemiBold / Light Gray */
.typo-heading-lg-semibold-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 20px / Bold / Uppercase */
.typo-label-bold-uppercase {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-black);
    text-transform: uppercase;
}

/* 40px / SemiBold */
.typo-heading-xxl-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Justify */
.typo-body-base-medium-justify {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-align: justify;
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 40px / SemiBold / Dark */
.typo-heading-xxl-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 20px / SemiBold / Gray */
.typo-body-md-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 48px / Bold / White / Uppercase */
.typo-display-lg-bold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 20px / SemiBold / White / Uppercase */
.typo-label-md-semibold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-12);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 20px / SemiBold / Light Gray / Uppercase */
.typo-label-md-semibold-uppercase-muted {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-12);
    color: var(--xbyte-color-light-gray);
    text-transform: uppercase;
}

/* 24px / SemiBold / White */
.typo-heading-lg-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Light Gray */
.typo-body-base-medium-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 18px / Regular / Right */
.typo-body-base-regular-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: right;
}

/* 24px / SemiBold / Center / Dark */
.typo-heading-lg-semibold-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 16px / Regular / Center */
.typo-body-sm-regular-center {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
    text-align: center;
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 40px / SemiBold / Center / White */
.typo-heading-xxl-semibold-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 16px / Regular / Center / Light Gray */
.typo-body-sm-regular-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
    text-align: center;
}

/* 20px / Medium / Black */
.typo-body-md-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 56px / ExtraBold / Uppercase / Black */
.typo-display-xl-extrabold-uppercase-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
    text-transform: uppercase;
}

/* 24px / SemiBold / Gray */
.typo-heading-lg-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 24px / SemiBold / Black */
.typo-heading-lg-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray-2 {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 18px / Medium / Center / Dark */
.typo-body-base-medium-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-align: center;
}

/* 20px / Bold / Uppercase / White */
.typo-label-bold-uppercase-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-white);
    text-transform: uppercase;
}

/* 16px / Regular / Light */
.typo-body-sm-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 56px / ExtraBold / Dark / Uppercase */
.typo-display-xl-extrabold-uppercase-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
    text-transform: uppercase;
}

/* 24px / SemiBold / Charcoal */
.typo-heading-lg-semibold-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 34px;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal-dark);
}

/* 18px / Regular / Light */
.typo-body-base-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 40px / SemiBold / Black */
.typo-heading-xxl-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Black */
.typo-body-base-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Bold / White */
.typo-body-sm-bold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 56px / ExtraBold / White */
.typo-display-xl-extrabold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / Light */
.typo-body-md-semibold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 14px / Bold / Light */
.typo-body-xs-bold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 14px / Regular / Light */
.typo-body-xs-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 48px / SemiBold / Dark / Sora */
.typo-display-lg-semibold-dark-sora {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 24px / Medium / Dark / Sora */
.typo-heading-lg-medium-dark-sora {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Regular / Google Sans Flex */
.typo-body-sm-regular-google {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 56px / Bold / White */
.typo-display-xl-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / Medium / Light */
.typo-body-md-medium-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 20px / Medium / White */
.typo-body-md-medium-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 14px / Medium / White */
.typo-body-xs-medium-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-4);
    color: var(--xbyte-color-white);
}

/* 40px / SemiBold / White */
.typo-heading-xxl-semibold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-40);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-54);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Justify / Light */
.typo-body-base-medium-justify-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
    text-align: justify;
}

/* 20px / Regular / Light */
.typo-body-md-regular-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-200);
}

/* 16px / SemiBold / Right / Gray */
.typo-body-sm-semibold-right-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
    text-align: right;
}

/* 14px / Regular / Space Mono */
.typo-code-sm-regular-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 48px / Medium / Center / Uppercase / Black */
.typo-display-lg-medium-center-uppercase-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-8);
    color: var(--xbyte-color-black);
    text-align: center;
    text-transform: uppercase;
}

/* 48px / Bold / Center / Uppercase / Red */
.typo-display-lg-bold-center-uppercase-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-primary);
    text-align: center;
    text-transform: uppercase;
}

/* 48px / ExtraBold / Center / Uppercase / Red */
.typo-display-lg-extrabold-center-uppercase-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-primary);
    /* text-align: center; */
    text-transform: uppercase;
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 48px / ExtraBold / Center / Uppercase / Gray */
.typo-display-lg-extrabold-center-uppercase-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-24);
    color: var(--xbyte-color-gray);
    /* text-align: center; */
    text-transform: uppercase;
}

/* 18px / Medium / Center / Dark */
.typo-body-base-medium-center-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-alt);
    text-align: center;
}

/* 18px / Medium / Center / White */
.typo-body-base-medium-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 18px / Medium / Charcoal */
.typo-body-base-medium-charcoal {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-charcoal);
}

/* 18px / Regular / Center / Light */
.typo-body-base-regular-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light);
    text-align: center;
}

/* 56px / Bold / Center / White */
.typo-display-xl-bold-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 20px / Medium / Center / Light */
.typo-body-md-medium-center-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-light);
    text-align: center;
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 15px / SemiBold / Red */
.typo-label-sm-semibold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 15px / SemiBold / Gray */
.typo-label-sm-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 20px / SemiBold / Dark */
.typo-body-md-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 14px / Medium / Dark Green */
.typo-body-xs-medium-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 16px / Bold / White */
.typo-body-sm-bold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 12px / Medium / Black */
.typo-caption-md-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-12);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 24px / Bold / Dark */
.typo-heading-md-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / Center / White */
.typo-heading-lg-semibold-center-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-34);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
    text-align: center;
}

/* 18px / Bold / Dark */
.typo-body-base-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Gray */
.typo-body-sm-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 16px / SemiBold / Red */
.typo-body-sm-semibold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 14px / Bold / Red */
.typo-body-xs-bold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 48px / Bold / Dark */
.typo-display-lg-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Gray / 100% */
.typo-body-sm-medium-gray-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 20px / SemiBold / Dark Green */
.typo-body-md-semibold-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 16px / Medium / Black */
.typo-body-sm-medium-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Medium / Gray */
.typo-body-sm-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 24px / SemiBold / Gray */
.typo-heading-lg-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-34);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-400);
}

/* 16px / SemiBold / White */
.typo-body-sm-semibold-white-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Regular / Gray */
.typo-body-base-regular-gray-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 48px / Bold / Dark */
.typo-display-lg-bold-dark-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-48);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-64);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Medium / Center / Gray */
.typo-body-base-medium-center-gray-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
    text-align: center;
}

/* 20px / SemiBold / White */
.typo-body-md-semibold-white {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 20px / SemiBold / White Compact */
.typo-body-md-semibold-white-compact {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-white);
}

/* 18px / Medium / Primary */
.typo-body-base-medium-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 14px / Regular / Dark */
.typo-body-xs-regular-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 18px / Italic / Slate */
.typo-body-base-italic-slate {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-regular);
    font-style: italic;
    line-height: var(--xbyte-line-28);
    letter-spacing: var(--xbyte-letter-04);
    color: var(--xbyte-color-slate);
}

/* 16px / Medium / Dark */
.typo-body-sm-medium-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}

/* 16px / Medium / Dark Green */
.typo-body-sm-medium-dark-green {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: 100%;
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark-green);
}

/* 15px / SemiBold / Black */
.typo-label-sm-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: 15px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-item-spacing-s-plus);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Bold / Primary */
.typo-body-xs-bold-primary {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}

/* 52.9px / SemiBold / Custom */
.typo-display-custom-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: 52.9px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-67-2);
    letter-spacing: var(--xbyte-letter-minus-168);
    color: var(--xbyte-color-black);
}

/* 18px / Medium / Gray */
.typo-body-base-medium-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-medium);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-25);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 14px / SemiBold / Uppercase */
.typo-label-xs-semibold-uppercase-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-4);
    color: var(--xbyte-color-gray);
    text-transform: uppercase;
}

/* 32px / SemiBold / Black */
.typo-heading-xl-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-44);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / SemiBold / Black */
.typo-body-sm-semibold-black-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 16px / Regular / Gray */
.typo-body-sm-regular-gray-tight {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-16);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 16px / SemiBold / Gray */
.typo-body-sm-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-24);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 32px / SemiBold / Black */
.typo-heading-xl-semibold-black-alt {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-32);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-42);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / SemiBold / Gray */
.typo-body-xs-semibold-gray {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-20);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray);
}

/* 18px / SemiBold / Black */
.typo-body-base-semibold-black {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-18);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-26);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray-middle {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 14px / SemiBold / Black */
.typo-body-xs-semibold-black-small {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-11);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}

/* 14px / Regular / Gray */
.typo-body-xs-regular-gray-small {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-11);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-gray-600);
}

/* 40px / SemiBold / Dark */
.typo-blog-display-xl-semibold-dark {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-40);
    font-weight: var(--xbyte-blog-font-semibold);
    font-style: var(--xbyte-blog-font-style-normal);
    line-height: var(--xbyte-blog-line-54);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading-dark);
}

/* 18px / Regular Italic / Gray */
.typo-blog-body-lg-italic-gray {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-18);
    font-weight: var(--xbyte-blog-font-regular);
    font-style: var(--xbyte-blog-font-style-italic);
    line-height: var(--xbyte-blog-line-28);
    letter-spacing: var(--xbyte-blog-letter-04);
    color: var(--xbyte-blog-color-text);
}

/* 36px / SemiBold / Heading */
.typo-blog-display-lg-semibold-heading {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-36);
    font-weight: var(--xbyte-blog-font-semibold);
    font-style: var(--xbyte-blog-font-style-normal);
    line-height: var(--xbyte-blog-line-50);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 16px / Regular / Gray */
.typo-blog-body-md-regular-gray {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-16);
    font-weight: var(--xbyte-blog-font-regular);
    font-style: var(--xbyte-blog-font-style-normal);
    line-height: var(--xbyte-blog-line-28);
    letter-spacing: var(--xbyte-blog-letter-04);
    color: var(--xbyte-blog-color-text);
}

/* 28px / SemiBold / Heading */
.typo-blog-heading-xl-semibold {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-28);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-38);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 24px / SemiBold / Heading */
.typo-blog-heading-lg-semibold {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-24);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-34);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 20px / SemiBold / Heading */
.typo-blog-heading-md-semibold {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-20);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-28);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 18px / SemiBold / Heading */
.typo-blog-heading-sm-semibold {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-18);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-26);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 16px / SemiBold / Heading */
.typo-blog-body-md-semibold-heading {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-16);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-24);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 14px / SemiBold / Heading */
.typo-blog-body-sm-semibold-heading {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-14);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-20);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading);
}

/* 24px / SemiBold / Dark */
.typo-blog-section-title {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-24);
    font-weight: var(--xbyte-blog-font-semibold);
    line-height: var(--xbyte-blog-line-32);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-heading-dark);
}

/* 16px / Regular / Light Gray */
.typo-blog-body-sm-regular-light {
    font-family: var(--xbyte-blog-font-family);
    font-size: var(--xbyte-blog-font-16);
    font-weight: var(--xbyte-blog-font-regular);
    line-height: var(--xbyte-blog-line-22-4);
    letter-spacing: var(--xbyte-blog-letter-0);
    color: var(--xbyte-blog-color-text-light);
}


/* =====================================================
   TYPOGRAPHY CLASSES Contact Page - FIGMA TO WEBSITE
   ===================================================== */

/* 14px / Bold */

.xbyte-contact-form-typo-body-sm-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: #050505;
}


/* 56px / Bold */

.xbyte-contact-form-typo-display-xl-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-56);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-76);
    letter-spacing: var(--xbyte-letter-0);
    color: #000000;
}


/* 20px / SemiBold */

.xbyte-contact-form-typo-body-md-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-26);
    letter-spacing: -0.6px;
    color: #686868;
}


/* 13px / Bold */

.xbyte-contact-form-typo-body-xs-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: 13px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 18.2px;
    letter-spacing: -0.26px;
    color: #050505;
}


/* 12.9px / Bold / Uppercase / Grey */

.xbyte-contact-form-typo-label-xs-bold-grey {
    font-family: var(--xbyte-font-red-hat);
    font-size: 12.9px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 15.6px;
    letter-spacing: -0.52px;
    color: #686868;
    text-transform: uppercase;
}


/* 12.9px / Bold / Uppercase / Dark */

.xbyte-contact-form-typo-label-xs-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: 12.9px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 15.6px;
    letter-spacing: -0.52px;
    color: #050505;
    text-transform: uppercase;
}


/* 11px / Bold / Uppercase */

.xbyte-contact-form-typo-label-xxs-bold {
    font-family: var(--xbyte-font-red-hat);
    font-size: 11px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 13.75px;
    letter-spacing: -0.55px;
    color: var(--xbyte-color-primary);
    text-transform: uppercase;
}


/* 60px / ExtraBold / Uppercase */

.xbyte-contact-form-typo-display-2xl-extrabold {
    font-family: var(--xbyte-font-red-hat);
    font-size: clamp(36px, 4.1vw, 60px);
    font-weight: var(--xbyte-font-extrabold);
    font-style: var(--xbyte-font-style-normal);
    line-height: clamp(40px, 4.8vw, 60px);
    letter-spacing: -1.8px;
    color: var(--xbyte-color-black);
    text-transform: uppercase;
}


/* 14px / Bold / Dark */

.xbyte-contact-form-typo-body-sm-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-14);
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-19);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-dark);
}


/* 20px / SemiBold / Right */

.xbyte-contact-form-typo-body-md-semibold-right {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-20);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-26);
    letter-spacing: -0.6px;
    color: var(--xbyte-color-dark-grey);
    text-align: right;
}


/* 24px / SemiBold */

.xbyte-contact-form-typo-heading-sm-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-24);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-32);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-black);
}


/* 16px / Regular */

.xbyte-contact-form-typo-body-base-regular {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-regular);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-22);
    letter-spacing: var(--xbyte-letter-0);
    color: var(--xbyte-color-primary);
}


/* 30px / SemiBold */

.xbyte-contact-form-typo-heading-lg-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: 30px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-36);
    letter-spacing: -0.9px;
    color: var(--xbyte-color-black);
}


/* 30px / SemiBold / Grey */

.xbyte-contact-form-typo-heading-lg-semibold-grey {
    font-family: var(--xbyte-font-red-hat);
    font-size: 30px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-36);
    letter-spacing: -0.9px;
    color: var(--xbyte-color-grey-2);
}


/* 30px / SemiBold / Dark */

.xbyte-contact-form-typo-heading-lg-semibold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: 30px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-36);
    letter-spacing: -0.9px;
    color: var(--xbyte-color-dark);
}


/* 11px / Bold / Uppercase / Dark */

.xbyte-contact-form-typo-label-xxs-bold-dark {
    font-family: var(--xbyte-font-red-hat);
    font-size: 11px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 13.2px;
    letter-spacing: -0.33px;
    color: var(--xbyte-color-dark);
    text-transform: uppercase;
}


/* 11px / Bold / Uppercase / Light */

.xbyte-contact-form-typo-label-xxs-bold-light {
    font-family: var(--xbyte-font-red-hat);
    font-size: 11px;
    font-weight: var(--xbyte-font-bold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 13.2px;
    letter-spacing: -0.33px;
    color: var(--xbyte-color-gray-200);
    text-transform: uppercase;
}


/* 16px / SemiBold */

.xbyte-contact-form-typo-body-base-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: var(--xbyte-font-16);
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: var(--xbyte-line-100);
    letter-spacing: -0.32px;
    color: var(--xbyte-color-dark);
}


/* 13px / SemiBold / Uppercase */

.xbyte-contact-form-typo-label-sm-semibold {
    font-family: var(--xbyte-font-red-hat);
    font-size: 13px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 18.2px;
    letter-spacing: -0.26px;
    color: var(--xbyte-color-dark-grey);
    text-transform: uppercase;
}


/* 13px / SemiBold / Red */

.xbyte-contact-form-typo-label-sm-semibold-red {
    font-family: var(--xbyte-font-red-hat);
    font-size: 13px;
    font-weight: var(--xbyte-font-semibold);
    font-style: var(--xbyte-font-style-normal);
    line-height: 18.2px;
    letter-spacing: -0.26px;
    color: var(--xbyte-color-primary);
}

/* <!-- ***** Comman class Name Root End ***** --> */
/* 320px - 575.98px */
@media (min-width: 320px) and (max-width: 575.98px) {
}

/* 576px - 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
}

/* 768px - 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* 992px - 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* 1200px - 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* 1400px and above */
@media (min-width: 1400px) {
}
/* 576px and above */
@media (min-width: 576px) {
    
}

/* 768px and above */
@media (min-width: 768px) {
}

/* 992px and above */
@media (min-width: 992px) {
}

/* 1200px and above */
@media (min-width: 1200px) {
}
/* 575.98px and below */
@media (max-width: 575.98px) {
    .xbyte-sec-com-head span, .xbyte-section-com-head-black-bg span, .xbyte-sec-com-head-left span{
        display: inline !important;
    }
}

/* 767.98px and below */
@media (max-width: 767.98px) {
.apis-crawlers-main-section{
    padding: 50px 10px !important;
}
.crawler-main-section .crawler-tabs-main-box-content{
    padding: 20px !important;
}

}

/* 991.98px and below */
@media (max-width: 991.98px) {
.crawler-main-section .crawler-tabs-main-box{
    position: relative !important;
    top: 0;
}
}

/* 1199.98px and below */
@media (max-width: 1199.98px) {
}


/* api inner page product api start  */

.rg-api-section {
  padding: 40px 40px 80px;
  overflow: hidden;
}

.rg-api-wrapper {
  max-width: 1700px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 45px;
  position: relative;
}

.rg-api-card {
  height: 400px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 45px 22px;
  position: relative;
}

.rg-down {
  margin-top: 45px;
}

.rg-no {
  position: absolute;
  right: 30px;
  top: 25px;
}

.rg-icon {
  position: absolute;
  bottom: 30px;
  left: 32px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  position: absolute;
  border-color: var(--xbyte-color-primary);
  border-style: dashed;
  z-index: 5;
}

.line-bottom {
  width: calc(100% + 45px);
  height: 70px;
  left: 50%;
  bottom: -70px;
  border-width: 0 0 1px 1px;
  z-index: -1;
}

.line-bottom::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 70px;
  border-right: 1px dashed var(--xbyte-color-primary);
}

.line-top {
  width: calc(100% + 45px);
  height: 70px;
  left: 50%;
  top: -70px;
  border-width: 1px 1px 0 1px;
  z-index: -1;
}

.rg-api-card:nth-child(3) .line-bottom {
  width: calc(100% + 45px);
  height: 70px;
  left: 50%;
  bottom: -70px;
  border-width: 0 0 1px 1px;
}

.rg-api-card:nth-child(3) .line-bottom::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 70px;
  border-right: 1px dashed var(--xbyte-color-primary);
}

@media (max-width: 1200px) {
  .xbyte-delivery-formats__list{
    gap: 14px 0px !important;
  }
  .rg-api-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .rg-down {
    margin-top: 0;
  }

  .line {
    display: none;
  }
  .rg-api-card {
  height: 300px;
}
}

@media (max-width: 767px) {
  .rg-api-section {
    padding: 30px 15px;
  }

  .rg-api-wrapper {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .rg-api-card {
    height: 260px;
  }
  .api-inner-page{
    flex-wrap: wrap;
  }
  .api-inner-button-grp{
    margin: 15px 0px;
  }
}

/* api inner page product api end  */

 /* Flexible Configuration & Data Delivery start */
.xbyte-flexible-configuration-content{
    padding: 0 clamp(15px, 2.5vw, 30px);
}
.xbyte-flexible-configuration-content p{
    width: 100%;
    max-width: clamp(320px, 85%, 1200px);
}
.xbyte-delivery-formats {
    width: 100%;
    /* padding: clamp(20px, 3vw, 40px); */
    background: var(--xbyte-color-white);
}

.xbyte-delivery-formats__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 14px clamp(30px, 6vw, 90px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.xbyte-delivery-formats__list li {
    position: relative;
    padding-left: 24px;
    color: var(--xbyte-color-dark-grey);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: var(--xbyte-line-25);
    color: var(--xbyte-color-dark-grey);
}

.xbyte-delivery-formats__list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 2px;
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--xbyte-color-primary);
    border-bottom: 2px solid var(--xbyte-color-primary);
    transform: rotate(45deg);
}

/* Tablet */
@media (max-width: 991px) {
    .xbyte-delivery-formats__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(6, auto);
        gap: 14px 35px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .xbyte-delivery-formats {
        padding: 20px 16px;
    }

    .xbyte-delivery-formats__list {
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 13px;
    }
}
/* Flexible Configuration & Data Delivery end */


/* <!-- ***** Case Study Main Page Css Start ***** --> */


.page-template-case-study-main .comman-class-stats-counts-section {
    display: none;
}

.page-template-case-study-main .case-study-slider {
    border-bottom: 2px solid #F6F6F6;
}

.case-main-section {
    padding: 120px 0px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: #1d1d1d;
    background: #0000000A;
}

.case-main-section .container,
.cs-class-section .container {
    max-width: 1440px;
}

.case-main-section .container h1 {
    width: 1020px;
}

.case-main-section ol.case-main-ol {
    list-style: none;
    display: flex;
    justify-content: left;
    margin: 0;
    gap: 5px;
    padding: 0;
}

.case-main-section ol.case-main-ol li a,
.case-main-section ol.case-main-ol li {
    font-weight: 400;
    font-size: 18px;
    line-height: 25.2px;
    text-decoration: none;
}

.case-main-section ol.case-main-ol li.case-breadcrumb-active {
    color: var(--xbyte-color-primary);
}

.case-main-section .case-main-content p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.cs-class-section .case-second-row .card.case-flip-card {
    margin-bottom: 30px;
}


/* =========================================
   FLIP CARD 3  post 
========================================= */

.card-txt {
    position: relative;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    perspective: 1000px;
}


/* =========================================
   FRONT CONTENT
========================================= */

.card-txt .card-content1 {
    width: 100%;
    min-height: 400px;

    display: flex;
    align-items: center;

    padding: 80px !important;

    position: relative;

    z-index: 2;

    background: #fff;

    transform: rotateY(0deg);

     transition:
        background 0.7s ease;
}


.card-txt .card-content1 .card-number,
.card-txt .card-content1 h2 {
    color: #1d1d1d;
}


.card-txt .card-content1 .card-info1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}


/* =========================================
   HOVER IMAGE
========================================= */

.card-hover-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    transform: rotateY(-180deg);

    transition: transform 0.7s ease;

    transform-origin: center;
}


/* =========================================
   IMAGE
========================================= */

.card-hover-image > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================
   HOVER CONTENT
========================================= */

.card-hover-content {
    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 40px;

    color: #fff;

    /*
     * Prevent empty div from affecting layout
     */
    pointer-events: none;
}

/* =========================================
   FLIP
========================================= */

.card-txt:hover .card-hover-image {
    transform: rotateY(0deg);
}
.card-txt:hover .card-content1 {
    background: transparent;
}


/* =========================================
   HOVER CONTENT
========================================= */

.card-hover-content {
    color: #fff !important;
}

.card-txt:hover .card-content1 .card-number,
.card-txt:hover .card-content1 h2 {
    color: #fff !important;
}

.card-txt:hover .card-content1 h3 {
    color: #fff !important;
}

.card-txt:hover .card-content1 p {
    color: #fff !important;
        margin-bottom: 0;
}

/*  flip 3 post end */

/* flip another posts */

/* =========================================
   FLIP CARD
========================================= */

.case-flip-card {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    perspective: 1000px;
    
}

/* =========================================
   IMAGE - DEFAULT VISIBLE
========================================= */

.case-flip-card .card-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;

    transform: rotateY(0deg);

    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;

    transform-style: preserve-3d;
}

.case-flip-card .card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

/* =========================================
   IMAGE OVERLAY
========================================= */

.case-flip-card .card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.25);

    z-index: 2;

    pointer-events: none;
}

/* =========================================
   CONTENT - DEFAULT
========================================= */

.case-flip-card .card-content {
    position: relative;

    min-height: 480px;

    width: 100%;

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    z-index: 3;
    background: transparent;

    transition:
        background 0.7s ease;

    backface-visibility: hidden;
}

/* =========================================
   CONTENT
========================================= */

.case-flip-card .card-info {
    position: relative;

    z-index: 5;
}

/* =========================================
   DEFAULT TEXT
========================================= */

.case-flip-card .card-number,
.case-flip-card h2,
.case-flip-card h3 {
    color: #fff !important;
}

/* =========================================
   HOVER - FLIP IMAGE AWAY
========================================= */

.case-flip-card:hover .card-image {
    transform: rotateY(180deg);
}


/* filter css of case study */


/* =========================================
   CASE STUDY FILTER
========================================= */

.case-study-filter {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 50px;
}
.case-filter {
        display: flex;
    gap: 60px;
}

/* =========================================
   FILTER ITEM
========================================= */

.case-filter-item {
    position: relative;
    width: 240px;
}


/* =========================================
   FILTER BUTTON
========================================= */

.case-filter-btn {
    width: 100%;
    height: 42px;

    padding: 0 0 12px 0;

    border: 0;
    border-bottom: 1px solid #D9D9D9;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #1D1D1D;

    font-size: 12px;
    line-height: 16px;
    font-weight: 400;

    cursor: pointer;

    text-align: left;
}
.case-filter-btn:hover, .case-filter-btn:focus, .case-filter-btn:focus-visible{
    background: transparent !important;
    border-color: #1d1d1d !important;
}

/* =========================================
   ARROW
========================================= */

.case-filter-arrow {
    color: #E31E24;

    font-size: 15px;
    line-height: 10px;

    transition: transform 0.3s ease;
}

.case-filter-item.active .case-filter-arrow {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN
========================================= */

.case-filter-dropdown {
    position: absolute;

    top: 38px;
    left: 0;

    width: 100%;

    background: #fff;

    border: 1px solid #E5E5E5;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

    padding: 8px 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 50;
}

.case-filter-item.active .case-filter-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================
   DROPDOWN OPTION
========================================= */

.case-filter-option {
    padding: 9px 14px;

    /* font-size: 12px; */
    line-height: 16px;

    color: #1D1D1D;

    cursor: pointer;

    transition: background 0.2s ease,
                color 0.2s ease;
}

.case-filter-option:hover,
.case-filter-option.active {
    background: #F7F7F7;
    color: #E31E24;
}


/* =========================================
   SEARCH
========================================= */

.case-filter-search {
    width: 360px;
    height: 42px;

    border: 1px solid #E1E1E1;

    display: flex;
    align-items: center;

    padding: 0 9px;

    position: relative;
}


/* SEARCH ICON */

.case-search-icon {
    width: 14px;
    height: 14px;

    color: #E31E24;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


/* INPUT */

.case-filter-search input {
    width: 100%;
    height: 100%;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    padding: 0 7px;

    color: #1D1D1D;
}

.case-filter-search input::placeholder {
    color: #999;
    opacity: 1;
}


/* SEARCH ARROW */

.case-search-arrow {
    font-size: 17px;
    line-height: 1;

    color: #B5B5B5;

    transform: rotate(0deg);

    flex-shrink: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1025px) {
    .case-main-section .container h1 {
        width: auto;
        flex-direction: column;
    }
    .case-filter {
        display: flex;
        gap: 40px;
    }
}
@media (max-width: 880px) {
    .case-study-filter{
        row-gap: 30px;
    }
    .case-filter-item, .case-filter-search, .case-filter{
        width: 100%;
    }
    .case-study-filter{
        flex-direction: column;
    }
}
@media (max-width: 767px) {
    .case-filter {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
    .case-study-filter {
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 35px;
    }
    .case-filter-search {
        width: 100%;
    }
    .card-txt .card-content1, .case-flip-card .card-content, .cs-class-section .success .card{
        height: 400px;
        min-height: 400px;
    }
}
@media (max-width: 430px) {
    .card-txt .card-content1, .case-flip-card .card-content{
        padding: 25px !important;
    }
}

.case-study-loading {
    min-height: 300px;
}

.case-study-no-results {
    width: 100%;
    padding: 80px 20px;
    text-align: center;
    font-size: 18px;
    color: #666;
}

#case-study-results {
    transition: opacity 0.3s ease;
}
#case-study-results a{
    text-decoration: none;
}